如何在 AngularJS SPA 中实现 SEO答案

【问题标题】：How to achieve SEO in AngularJS SPA如何在 AngularJS SPA 中实现 SEO
【发布时间】：2015-11-07 11:03:32
【问题描述】：

在解决了一些现有问题及其答案后，我无法找到完美的策略来实现 AngularJs 中的 SEO。

我发现实现它的方法是-

创建 Nginx 中间层，以不同方式为爬虫请求提供服务。
将 AngularJS 应用程序转换为支持 HTML5 模式。但只有Google（使用WebMaster Tool）搜索引擎支持。
使用可用的付费工具来支持 AngularJS 中的 SEO，例如 brombone、prerender、getseojs

我需要帮助来选择这个替代方案，这对我的 1 到 20 个 AngularJS (SAP) 很有帮助。我已经浏览过这个堆栈question

【问题讨论】：

标签： javascript angularjs nginx seo

【解决方案1】：

正如链接堆栈问题所说的那样

"Google 抓取工具现在执行 javascript - 您可以使用 Google 网站管理员工具可更好地了解您的网站是如何呈现的谷歌。” Check it out here

这意味着您不需要经历很多痛苦的步骤来让 Google 索引 AJAX 加载的 HTML。如果你用 AJAX 加载元数据就可以了。

我提出的一个解决方案是创建一个 AngularJS 指令，以从加载的模型中快速添加页面的元数据和标题名称。

  /*
  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 来完成此操作，但您可以随意更换它。

上述指令为您提供了一个 HTML 元素，您可以将其放置在该页面的某个位置：

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

如果您有类似的指令，那么 SEO 元数据和标题应该可以被 google 抓取。

【讨论】：