HTML5 和 Javascript/jQuery 中的动态 META 标签答案

【问题标题】：Dynamic META tags in HTML5 and Javascript/jQueryHTML5 和 Javascript/jQuery 中的动态 META 标签
【发布时间】：2015-05-21 13:57:32
【问题描述】：

我们正在开发一个公司网站，所有导航都使用哈希 (http://xxx/#/content/xpto) 完成，内容使用 AJAX 动态加载。角色的东西已经很好地工作了，我们从中得到了很好的结果。我的问题（或问题）是这样的，因为导航完全使用哈希完成并且实际上没有页面加载（URI更改），我们正在更改“META”标签（*使用类似$('meta[property="title"]').attr('content', metainfo.title);）代码。 Google 的 SEO 引擎或 Facebook 的页面运行时，是否可以理解代码所做的这种元更改，即http://myurl.com/#/load/products，或者通过处理来自服务器的 HTML 内容来分析内容（html 的东西 <html><head>blah blah blah</head></html>)?

提前谢谢各位。

【问题讨论】：

stackoverflow.com/questions/7885710/…的可能重复

标签： javascript jquery html facebook seo

【解决方案1】：

看来你可以使用JS来动态改变meta标签，就像这篇文章中提到的： https://developers.google.com/search/docs/guides/javascript-seo-basics#titles-and-snippets

【讨论】：

【解决方案2】：

如果有人和我遇到同样的问题，答案并不简单。不幸的是，对于使用复杂 JS 进程创建页面的情况，市场上最常见的“headless”浏览器（包括 Google 推荐的 - HtmlUnit、watiji 或 Crawjax ) 不要这样做。

我找到的解决方案不是很优雅，但它确实有效。我已经使用http://www.awesomium.com/ 实现了一个 C++ 索引服务。他们有一个基于 Google 的 chromium API 的非常简单的解决方案。当然，必须删除一些“JS”动画，但无论如何，HTML 快照正在按预期生成。

解决方案流程：

创建了一个站点地图；

让索引服务（使用 Awesomium）为 sitemap 文件中定义的每个页面读取并生成 HTML 快照；

文件（HTML 快照）保存在服务器的安全位置，具有相同的目录结构和文件名浏览器网址；

创建了一个 Servlet（我们使用 Java EE）来读取 Google 索引无人机请求的 HTML 快照： "?_escaped_fragment_=" 查询字符串参数。

可以在此处找到有关如何为 Google 构建完整的爬虫无人机的详细信息（如 OX 所述 - thx）：https://developers.google.com/webmasters/ajax-crawling/docs/getting-started

【讨论】：

【解决方案3】：

你不能做动态元标记（或者，你可以，但谷歌和 Facebook 不会运行你的 JavaScript，所以它们对你没有任何好处），但你可以关注 Google's guide for making AJAX applications crawlable。我不知道 Facebook 是否有类似的指南。

【讨论】：

感谢 ox，但这只是解决方案的一部分。不幸的是，非常复杂的 JS 页面很难按照 Google 的要求进行索引和生成 HTML 快照。我正在使用 chromium C++ API 在服务器中编写索引服务，因为 Chrome 是我几乎完成角色任务的唯一解决方案（成功生成用于复杂 JS 处理的 HTML 快照）。无论如何，如果您有任何可以帮助的意见或想法，请与我交谈。
答案中的 Google 指南链接已正式弃用
这整个已经过时了。 Google 现在肯定会运行 JavaScript，甚至会关注动态创建的元标记。