AngularJS SEO - 一劳永逸

Question

我在一个有 15 个子站点和 13 个不同架构页面的大项目中。目前，该站点的所有页面都基于 ui.route，而我的数据集则由 $http angular 请求。在搜索控制台上进行测试和试用后，看起来 google 看不到我的所有页面，除了主页和来自 $http 请求的数据没有显示。我做错了什么？

我目前所做的是：

在<head>中设置基础标签:

<base href="/" />

创建.htaccess:

RewriteEngine On 
Options FollowSymLinks

RewriteBase /

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

添加到app.config:

$locationProvider.html5Mode(true);

我的例子 app.config:

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);

Answer 1

Google 机器人不编译 JavaScript，ui-router 在这里不起作用，所以当 google 机器人开始抓取 URL（无论如何url is), 它总是得到网站的索引页。在服务器端通过检查用户代理检测机器人，然后您可以使用 phantomjs 加载 angular 应用程序并为机器人编译 html。（这就是我使用的对于我的应用程序。在服务器上我有节点 js)

阅读 here

的更多内容

Answer 2

为什么 google 爬虫不跟踪由 UI 路由器创建的我的链接/状态更改？

好吧，google 抓取机器人能够执行 Java 脚本（此功能不久前实现）。但是机器人仍然像以前一样爬行 URL。它正在检查的 href 属性 HTML 标记中的所有 a-标签并跟进它们。如果您使用的是 JavaScript 状态更改 ui.router 提供的功能，机器人将永远无法访问此链接。它也无法识别 HTML5 URL 路由更改。 -> 因此不会抓取/索引任何页面

您可以使用一些基本的 SEO 功能来抵消它。但是你仍然有一些限制需要处理。其中一些限制是：

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

如何让爬虫机器人索引您的网页？ 这很简单，只需创建一个包含所有 URL 的 sitemap.xml，将其上传到您的网络服务器并使用 google 网站管理员工具进行注册。 google 机器人现在将抓取您在 sitemap.xml 中提供的所有 URL，最后它将为您的 pages/URLs 编制索引！ =)

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9 http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd">
 <url>
  <loc>http://example.com/</loc>
 </url>
 <url>
  <loc>http://example.com/anotherside/</loc>
 </url>
 <url>
  <loc>http://example.com/search/param1/param2</loc>
 </url>
</urlset>

我们这样做了，而且效果很好。您可以手动创建 sitemap.xml。我们更进一步，将这些东西自动化。我们的 XML 和 ui.routes 在我们的网络应用程序的后端创建。所以我们有一个配置 JSON 文件，我们在其中配置所有路由。脚本创建 XML 和 Java 脚本 ui.routes 自动地。

这是我们所做的结果：https://www.google.de/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8#q=site:linslin.org&start=0

如果您想构建一个漂亮的 SEO/Social 优化页面，请不要使用像 AngularJS 这样的 SPA 应用程序。我也不希望创建预编译器。创建 SPA 应用程序并对其进行预编译是没有意义的。在创建预编译器之前，您应该通过使用 PHP、Node.JS、Java 等回到根源来创建 Web 应用程序。

AngularJS SEO - 一劳永逸

AngularJS SEO - Once and for all

javascript

.htaccess

seo

angularjs

我目前所做的是：