且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

如何实现在AngularJS SPA SEO

更新时间:2023-09-24 15:48:04

由于链接的堆栈问题说:

As the linked stack questions says

谷歌爬虫现在执行JavaScript - 您可以使用谷歌
  网站管理员工具更好地了解您的网站是如何被渲染
  谷歌。
  看看这里

"Google crawlers now executes javascript - you can use the Google Webmaster Tools to better understand how your sites are rendered by Google." Check it out here

这意味着你不需要经过很多的痛苦步骤获得谷歌索引的AJAX加载HTML。如果您在使用AJAX加载的元数据,你会好起来的。

That means you don't need to go through a lot of the painful steps to get Google to index the AJAX loaded HTML. If you load the meta-data in with AJAX you will be fine.

这是我做了一个解决方案是创建一个AngularJS指令迅速从其中加载模型添加页面的元数据和标题名。

A solution that I have made was to create a AngularJS directive to quickly add the meta data and title name of the page from the model which is loaded.

  /*
  SEO directives
   */

  dtvs.directive('metaSeo', function() {
    return {
      restrict: 'E',
      scope: {
        desc: '=',
        title: '='
      },
      link: function(scope, el, attr) {
        scope.$watch('desc', function() {
          return $("head meta[name='description']").attr('content', scope.desc);
        });
        return scope.$watch('title', function() {
          return $("head title").html(scope.title);
        });
      }
    };
  });


我使用jQuery的做,在上面的例子中,但随时调换了这一点。

I've used jQuery to do that in the above example, but feel free to swap that out.

上面的指令给你一个HTML元素你可以把该网页上的某个地方:

The above directive gives you an HTML element you can just place somewhere on that page:

<meta-seo data-desc="lesson.brief" data-title="lesson.title"></meta-desc>

如果您有类似的指令,那么SEO元数据和标题应通过谷歌没有问题被抓取。

If you have a similar directive then the SEO metadata and title should be crawled by google without problem.