我看到AngularJS应用程序关于搜索引擎和SEO的两个问题:
1)自定义标签会发生什么?搜索引擎会忽略这些标签中的全部内容吗?例如，假设我有
<custom>
<h1>Hey, this title is important</h1>
</custom>
<h1>是否在自定义标记中被索引?
2)有没有办法避免搜索引擎索引{{}}绑定字面上?即。
<h2>{{title}}</h2>
我知道我可以做点什么
<h2 ng-bind="title"></h2>
但是如果我真的想让爬虫“看到”标题呢?服务器端渲染是唯一的解决方案吗?
当前回答
爬虫(或机器人)被设计用来抓取网页的HTML内容，但由于异步数据抓取的AJAX操作，这成为一个问题，因为它需要一段时间来呈现页面并在其上显示动态内容。类似地，AngularJS也使用异步模型，这给谷歌爬虫带来了问题。
一些开发人员使用真实数据创建基本的html页面，并在爬行时从服务器端提供这些页面。我们可以在服务端用PhantomJS渲染相同的页面，它有_escaped_fragment_(因为谷歌寻找#!在我们网站的url中，然后取#!并将其添加到_escaped_fragment_查询参数中)。更多细节请阅读这篇博客。
其他回答
我已经找到了一个优雅的解决方案，可以覆盖你的大部分基础。我最初在这里写过它，并回答了另一个类似的Stack Overflow问题，这里引用了它。
供参考，这个解决方案还包括硬编码的回退标签，以防JavaScript不被爬虫拾取。我没有明确地概述它，但值得一提的是，您应该激活HTML5模式以获得适当的URL支持。
还要注意:这些不是完整的文件，只是相关文件的重要部分。我不能帮助编写指令、服务等的样板文件。
app.example
在这里，您可以为每个路由(标题、描述等)提供自定义元数据。
$routeProvider
.when('/', {
templateUrl: 'views/homepage.html',
controller: 'HomepageCtrl',
metadata: {
title: 'The Base Page Title',
description: 'The Base Page Description' }
})
.when('/about', {
templateUrl: 'views/about.html',
controller: 'AboutCtrl',
metadata: {
title: 'The About Page Title',
description: 'The About Page Description' }
})
metadata-service.js(服务)
设置自定义元数据选项或使用默认值作为备用选项。
var self = this;
// Set custom options or use provided fallback (default) options
self.loadMetadata = function(metadata) {
self.title = document.title = metadata.title || 'Fallback Title';
self.description = metadata.description || 'Fallback Description';
self.url = metadata.url || $location.absUrl();
self.image = metadata.image || 'fallbackimage.jpg';
self.ogpType = metadata.ogpType || 'website';
self.twitterCard = metadata.twitterCard || 'summary_large_image';
self.twitterSite = metadata.twitterSite || '@fallback_handle';
};
// Route change handler, sets the route's defined metadata
$rootScope.$on('$routeChangeSuccess', function (event, newRoute) {
self.loadMetadata(newRoute.metadata);
});
metaproperty.js(指令)
为视图打包元数据服务结果。
return {
restrict: 'A',
scope: {
metaproperty: '@'
},
link: function postLink(scope, element, attrs) {
scope.default = element.attr('content');
scope.metadata = metadataService;
// Watch for metadata changes and set content
scope.$watch('metadata', function (newVal, oldVal) {
setContent(newVal);
}, true);
// Set the content attribute with new metadataService value or back to the default
function setContent(metadata) {
var content = metadata[scope.metaproperty] || scope.default;
element.attr('content', content);
}
setContent(scope.metadata);
}
};
index . html
使用前面提到的硬编码的回退标记完成，用于无法拾取任何JavaScript的爬行程序。
<head>
<title>Fallback Title</title>
<meta name="description" metaproperty="description" content="Fallback Description">
<!-- Open Graph Protocol Tags -->
<meta property="og:url" content="fallbackurl.example" metaproperty="url">
<meta property="og:title" content="Fallback Title" metaproperty="title">
<meta property="og:description" content="Fallback Description" metaproperty="description">
<meta property="og:type" content="website" metaproperty="ogpType">
<meta property="og:image" content="fallbackimage.jpg" metaproperty="image">
<!-- Twitter Card Tags -->
<meta name="twitter:card" content="summary_large_image" metaproperty="twitterCard">
<meta name="twitter:title" content="Fallback Title" metaproperty="title">
<meta name="twitter:description" content="Fallback Description" metaproperty="description">
<meta name="twitter:site" content="@fallback_handle" metaproperty="twitterSite">
<meta name="twitter:image:src" content="fallbackimage.jpg" metaproperty="image">
</head>
这将极大地帮助大多数搜索引擎的使用案例。如果你想要对社交网络爬虫进行完全动态呈现(这在JavaScript支持上是不确定的)，你仍然必须使用其他一些答案中提到的预呈现服务之一。
2014年5月更新
谷歌爬虫现在执行javascript -您可以使用谷歌网站管理员工具来更好地理解您的网站是如何通过谷歌呈现的。
原来的答案 如果你想优化你的应用程序的搜索引擎，不幸的是没有办法提供预渲染版本的爬虫。你可以在这里阅读谷歌对ajax和javascript较多的网站的更多推荐。
如果这是一个选项，我会推荐阅读这篇关于如何使用服务器端渲染为Angular做SEO的文章。
我不确定当爬虫遇到自定义标记时它会做什么。
你真的应该看看moo博客上关于如何构建一个seo友好的AngularJS网站的教程。他会带领你完成Angular文档中列出的所有步骤。http://www.yearofmoo.com/2012/11/angularjs-and-seo.html
使用这种技术，搜索引擎看到的是展开的HTML，而不是自定义标记。
这种情况已经发生了巨大的变化。
http://searchengineland.com/bing-offers-recommendations-for-seo-friendly-ajax-suggests-html5-pushstate-152946
如果你使用: 美元locationProvider.html5Mode(真正的); 你准备好了。
不再有渲染页面。
Angular自己的网站为搜索引擎提供简化的内容:http://docs.angularjs.org/?_escaped_fragment_=/tutorial/step_09
假设你的Angular应用正在使用一个Node.js/ express驱动的JSON api，比如/api/path/to/resource。也许您可以使用?_escaped_fragment_将任何请求重定向到/api/path/to/resource.html，并使用内容协商来呈现内容的HTML模板，而不是返回JSON数据。
唯一的问题是，你的Angular路由需要与你的REST API 1:1匹配。
编辑:我意识到这有可能真正搅乱你的REST api，我不建议在非常简单的用例之外使用它，在那里它可能是一个自然的适合。
相反，您可以为机器人友好的内容使用完全不同的路由和控制器集。但是你在Node/Express中复制了所有AngularJS的路由和控制器。
我决定用无头浏览器生成快照，尽管我觉得这有点不太理想。
