我看到AngularJS应用程序关于搜索引擎和SEO的两个问题:
1)自定义标签会发生什么?搜索引擎会忽略这些标签中的全部内容吗?例如，假设我有
<custom>
<h1>Hey, this title is important</h1>
</custom>
<h1>是否在自定义标记中被索引?
2)有没有办法避免搜索引擎索引{{}}绑定字面上?即。
<h2>{{title}}</h2>
我知道我可以做点什么
<h2 ng-bind="title"></h2>
但是如果我真的想让爬虫“看到”标题呢?服务器端渲染是唯一的解决方案吗?
当前回答
2014年5月更新
谷歌爬虫现在执行javascript -您可以使用谷歌网站管理员工具来更好地理解您的网站是如何通过谷歌呈现的。
原来的答案 如果你想优化你的应用程序的搜索引擎，不幸的是没有办法提供预渲染版本的爬虫。你可以在这里阅读谷歌对ajax和javascript较多的网站的更多推荐。
如果这是一个选项，我会推荐阅读这篇关于如何使用服务器端渲染为Angular做SEO的文章。
我不确定当爬虫遇到自定义标记时它会做什么。
其他回答
2014年5月更新
谷歌爬虫现在执行javascript -您可以使用谷歌网站管理员工具来更好地理解您的网站是如何通过谷歌呈现的。
原来的答案 如果你想优化你的应用程序的搜索引擎，不幸的是没有办法提供预渲染版本的爬虫。你可以在这里阅读谷歌对ajax和javascript较多的网站的更多推荐。
如果这是一个选项，我会推荐阅读这篇关于如何使用服务器端渲染为Angular做SEO的文章。
我不确定当爬虫遇到自定义标记时它会做什么。
我已经找到了一个优雅的解决方案，可以覆盖你的大部分基础。我最初在这里写过它，并回答了另一个类似的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支持上是不确定的)，你仍然必须使用其他一些答案中提到的预呈现服务之一。
你真的应该看看moo博客上关于如何构建一个seo友好的AngularJS网站的教程。他会带领你完成Angular文档中列出的所有步骤。http://www.yearofmoo.com/2012/11/angularjs-and-seo.html
使用这种技术，搜索引擎看到的是展开的HTML，而不是自定义标记。
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的路由和控制器。
我决定用无头浏览器生成快照，尽管我觉得这有点不太理想。
自从提出这个问题以来，情况已经发生了很大的变化。现在有一些选项可以让谷歌索引你的AngularJS站点。我发现最简单的选择是使用http://prerender.io的免费服务，它会为你生成可抓取的页面，并将其提供给搜索引擎。几乎所有服务器端web平台都支持它。我最近开始使用它们，支持也很好。
我和他们没有任何关系，这是来自一个快乐的用户。
