我看到AngularJS应用程序关于搜索引擎和SEO的两个问题:
1)自定义标签会发生什么?搜索引擎会忽略这些标签中的全部内容吗?例如，假设我有
<custom>
<h1>Hey, this title is important</h1>
</custom>
<h1>是否在自定义标记中被索引?
2)有没有办法避免搜索引擎索引{{}}绑定字面上?即。
<h2>{{title}}</h2>
我知道我可以做点什么
<h2 ng-bind="title"></h2>
但是如果我真的想让爬虫“看到”标题呢?服务器端渲染是唯一的解决方案吗?
当前回答
谷歌的可爬行Ajax规范，在这里的其他答案中引用，基本上是答案。
如果你对其他搜索引擎和社交机器人如何处理同样的问题感兴趣，我在这里写了最新的技术:http://blog.ajaxsnapshots.com/2013/11/googles-crawlable-ajax-specification.html
我在一家https://ajaxsnapshots.com公司工作，该公司将可爬行Ajax规范作为一种服务来实现——报告中的信息是基于我们对日志的观察。
其他回答
With Angular Universal, you can generate landing pages for the app that look like the complete app and then load your Angular app behind it. Angular Universal generates pure HTML means no-javascript pages in server-side and serve them to users without delaying. So you can deal with any crawler, bot and user (who already have low cpu and network speed).Then you can redirect them by links/buttons to your actual angular app that already loaded behind it. This solution is recommended by official site. -More info about SEO and Angular Universal-
2014年5月更新
谷歌爬虫现在执行javascript -您可以使用谷歌网站管理员工具来更好地理解您的网站是如何通过谷歌呈现的。
原来的答案 如果你想优化你的应用程序的搜索引擎，不幸的是没有办法提供预渲染版本的爬虫。你可以在这里阅读谷歌对ajax和javascript较多的网站的更多推荐。
如果这是一个选项，我会推荐阅读这篇关于如何使用服务器端渲染为Angular做SEO的文章。
我不确定当爬虫遇到自定义标记时它会做什么。
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的路由和控制器。
我决定用无头浏览器生成快照，尽管我觉得这有点不太理想。
爬虫不需要一个功能丰富的漂亮的图形用户界面，他们只想看到内容，所以你不需要给他们一个已经为人类构建的页面的快照。
我的解决方案:给爬虫程序想要的东西:
你必须考虑爬虫者想要什么，只给他那个。
小贴士:不要弄脏后面。只需使用相同的API添加一点服务器端前视图
我已经找到了一个优雅的解决方案，可以覆盖你的大部分基础。我最初在这里写过它，并回答了另一个类似的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支持上是不确定的)，你仍然必须使用其他一些答案中提到的预呈现服务之一。
