Javascript AngularJS SEO-一劳永逸

我在一个有15个子站点和13个不同模式页面的大项目中。 目前，该网站基于

ui.route

为所有页面和

$http

请求设置的我的数据。 在搜索控制台上进行测试和试用后，谷歌似乎看不到我所有的页面，除了主页和来自

$http

请求的数据没有显示。 我做错了什么

到目前为止，我正在做的是： 在

中设置基本标记：

<base href="/" />

RewriteEngine On 
Options FollowSymLinks

RewriteBase /

RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ /#/$1 [L]

$locationProvider.html5Mode(true);

function createState(name) {
    return {
        url: '/' + name + '/:id',
        templateUrl : 'templates/pages/' + name +'.html',
        controller : 'singlePage',
        resolve: {
           pageData: function(getData, $stateParams) {
                var params = $stateParams;
                params.type = this.self.name;
                return getData.getPageData(params.type, params)
           }
        }
    }
}
.state('info', createState('info'))
.state('news', createState('news'))
.state('event', createState('event'))

$urlRouterProvider.otherwise('/');
$locationProvider.html5Mode(true);

添加到

app.config

：

<base href="/" />

RewriteEngine On 
Options FollowSymLinks

RewriteBase /

RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ /#/$1 [L]

$locationProvider.html5Mode(true);

function createState(name) {
    return {
        url: '/' + name + '/:id',
        templateUrl : 'templates/pages/' + name +'.html',
        controller : 'singlePage',
        resolve: {
           pageData: function(getData, $stateParams) {
                var params = $stateParams;
                params.type = this.self.name;
                return getData.getPageData(params.type, params)
           }
        }
    }
}
.state('info', createState('info'))
.state('news', createState('news'))
.state('event', createState('event'))

$urlRouterProvider.otherwise('/');
$locationProvider.html5Mode(true);

我的

app.config的示例

：

<base href="/" />

RewriteEngine On 
Options FollowSymLinks

RewriteBase /

RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ /#/$1 [L]

$locationProvider.html5Mode(true);

function createState(name) {
    return {
        url: '/' + name + '/:id',
        templateUrl : 'templates/pages/' + name +'.html',
        controller : 'singlePage',
        resolve: {
           pageData: function(getData, $stateParams) {
                var params = $stateParams;
                params.type = this.self.name;
                return getData.getPageData(params.type, params)
           }
        }
    }
}
.state('info', createState('info'))
.state('news', createState('news'))
.state('event', createState('event'))

$urlRouterProvider.otherwise('/');
$locationProvider.html5Mode(true);

---

谷歌机器人不编译JavaScript，ui路由器在这里不起作用，所以当谷歌机器人来抓取URL时（不管URL是什么），它总是会得到网站的索引页。在服务器端，通过检查用户代理来检测bot，然后您可以使用phantomjs加载angular应用程序并为bot编译html。（这就是我在应用程序中使用的。在服务器上，我有节点js）

---

从

阅读更多信息，为什么谷歌爬虫不遵循UI路由器创建的我的链接/状态更改？

---

谷歌爬网机器人能够执行JavaScript（这个功能不久前就实现了）。 但机器人仍然像以前一样爬行URL。它正在检查的

href

属性 将所有

a

-标记添加到HTML标记中，并跟踪它们。如果您使用的是JavaScript状态 更改由

ui.router提供的功能。bot将永远无法遵循此链接。
它也无法识别HTML5 URL路由已更改。->因此，不会对任何页面进行爬网/索引

你可以用一些基本的SEO功能来抵消这一点。但是你仍然有一些限制
需要处理。这些限制包括：


元标签提供的社交内容。（使用
og:image
等在facebook上共享页面将无法与AngularJS E2E绑定一起使用）
社交媒体共享将无法识别与E2E绑定一起使用的
title
标记

如何使爬网机器人为您的页面编制索引？
这很简单，只需创建一个包含所有URL的
sitemap.xml
，将其上传到您的Web服务器，并使用google webmastertools注册即可。google机器人现在将抓取您在
sitemap.xml中提供的所有URL，最后它将为您的页面/URL建立索引！=）


http://example.com/
http://example.com/anotherside/
http://example.com/search/param1/param2

我们这样做了，效果很好。您可以手动创建
sitemap.xml
。我们又前进了一步，实现了自动化。我们的XML和
ui.routes
是在我们的Web应用程序的后端创建的。因此，我们有一个配置JSON文件，在其中配置所有路由。脚本创建XML和JavaScript
ui.routes
自动地

这是我们所做工作的结果：

如果你想构建一个不错的SEO/社交优化页面，不要使用像AngularJS这样的SPA应用程序。我也不希望创建预编译器。创建SPA应用程序并对其进行预编译是没有意义的。在创建预编译器之前，您应该使用PHP、Node.JS、Java等返回根目录来创建webapplication
 谷歌爬网机器人能够执行JavaScript（这个功能不久前就实现了）。但机器人仍然像以前一样爬行URL。它正在检查HTML标记中所有
a
-标记的
href
属性，并跟踪它们。如果您使用的是
ui.router
提供的JavaScript状态更改功能，则bot将永远无法跟踪此链接。它也无法识别HTML5 URL路由更改。->因此，不会对任何页面进行爬网/索引。我可以创建一个答案，提供我上面提到的内容。我还可以为您提供一个解决方案，如何使其他URL对爬虫机器人可见。@lin非常感谢您的完整回答！预编译根本不是一个好的解决方案。这有很多限制和问题。在将SPA应用程序与预编译器混合之前，我会先创建一个基于后端的应用程序（PHP、Node、Java等）。感谢您的宝贵意见和回答。我必须学习很多。只为谷歌机器人预编译是很好的，甚至被谷歌推荐作为一种解决方法。非常感谢！你有一个简单的方法来自动生成站点地图（处理角度路线）？我们创建了一个自定义脚本。但是对不起。我们不会分享这个。嗯，我不知道。你必须自己制作。你可以用它来生成网站地图，它支持JavaScript网站