Angularjs网站没有在谷歌上索引答案

【问题标题】：Angularjs website not indexing on googleAngularjs网站没有在谷歌上索引
【发布时间】：2015-02-03 14:44:29
【问题描述】：

我开发了一个 20 多页的大型 angularjs 应用程序，并添加了一些 SEO 标签。但它不能很好地运作。页面的大部分内容也使用 javascript 填充。这就是我为每个页面实现 SEO 标签的方式。

app.js

(function() {

var app = angular.module('myApp', ['ngRoute', 'ngSanitize', 'angular-flexslider']);

// config route
app.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
    var baseUrl = "partials/";

    $routeProvider.when('/', {
        title: 'Title 1',
        metadescription: "Description 1",
        metakeywords: "Keyword 1",
        templateUrl: baseUrl + 'home.html',
        controller: 'homeCtrl'
    })
    .when('/page1', {
        title: 'Title 2',
        metadescription: "Description 2",
        metakeywords: "Keyword 2",
        templateUrl: baseUrl + 'page1.html',
        controller: 'page1Ctrl',
    })

    .otherwise({
        redirectTo: '/'
    });

    $locationProvider.html5Mode(true);
    $locationProvider.hashPrefix('!');
}
]);

app.run(['$location', '$rootScope', function ($location, $rootScope) {
    $rootScope.$on('$routeChangeSuccess', function (event, current, previous) {
        $rootScope.title = current.$$route.title;
        $rootScope.metadescription = current.$$route.metadescription;
        $rootScope.metakeywords = current.$$route.metakeywords;

    });
}]);

}());

html的元标签实现如下

<!DOCTYPE html>
<html lang="en" ng-app="lennonsApp">
<head>
<base href="/">
<meta charset="utf-8">
<title ng-bind="title"></title>
<meta name="description" content="{{metadescription}}">
<meta name="keywords" content="{{metakeywords}}">
<meta name="fragment" content="!">
</head>

<body>
   Content goes here.....
</body>
</html>

页面加载时所有元标记数据绑定都正常工作。但即使一个月后我的网站也没有在搜索引擎中搜索。该网站托管在 IIS 服务器上。我的问题： 1).这种方法适用于搜索引擎吗？ 2).我是否需要为 Angularjs 应用程序的 IIS 服务器做任何其他特定配置？ 3).任何人都可以推荐任何其他支持SEO的方法

提前致谢

编辑我尝试了 google.com 站点：[域名]，如上实现的 seo 标签均不受影响。

编辑与IIS服务器有什么关系吗？

【问题讨论】：

输入 google.com 站点：[您的域] 它会告诉您 google 在您的站点上索引了多少页。你只使用页面的关键字吗？尝试像 sitegrader 这样的工具，让您了解您的 seo 影响
开始于：developers.google.com/webmasters/ajax-crawling/docs/…
@atmd 我检查了我的网站。 app.js 设置的任何元标记都不会显示在结果中。接缝我的实现不支持 SEO。是的，我只使用关键字和标题作为我上面的代码。
@JanithWidarshana 我也遇到了同样的问题，你找到解决方案了吗？
@ShibinRagh 我使用 prerender.io 来解决这个问题。如果您使用 IIS 服务器stackoverflow.com/questions/29160320/… 也会对您有所帮助。

标签： javascript angularjs html seo search-engine

【解决方案1】：

搜索引擎往往不执行 JavaScript。

您需要在服务器端生成“真实”页面，以便搜索引擎和 JS 因任何原因失败的用户。然后使用pushState（Angular 可以通过它的路由来做到这一点）将 Angular 页面映射到服务器生成的页面上。

您可以采用isomorphic 方法来解决问题并编写您的 JS，以便它可以运行服务器端或客户端（这可能涉及运行 Node.js 而不是 IIS 或使用 IIS 作为代理）。

即便如此，元关键字几乎总是被忽略，元描述通常被忽略，以利于分析实际内容。

【讨论】：

【解决方案2】：

在 SPA 上的 SEO 实施并非微不足道，而且目前并非所有搜索引擎都支持它，我认为 google，也许 bing 能够抓取 SPA，但需要为此做一些工作。有几种方法可以做到这一点：

1 use !# for your angular routes instead of  just #
2 use html5 routes instead of # routes
3 detect crawlers on your server and serve the metadata
4 create snapshots of your site and serve them

基本上这些是您的大部分选择您可以在这些文章中找到更多详细信息

http://www.yearofmoo.com/2012/11/angularjs-and-seo.html https://developers.google.com/webmasters/ajax-crawling/

【讨论】：

我已经使用这个代码实现了前两个 $locationProvider.html5Mode(true); $locationProvider.hashPrefix('!');
它们是专有的，如果你使用 html5 路由器，你不需要使用#routes。这里docs.angularjs.org/guide/$location
据我所知，pushstate 的实现在我的代码中是可以的。你能告诉我哪里出错了吗？我有点困惑。