HTML5和Javascript/jQuery中的动态META标记

Dynamic META tags in HTML5 and Javascript/jQuery

本文关键字：动态 META 标记 jQuery Javascript HTML5      更新时间：2023-09-26

我们正在开发一个公司网站，其中所有的导航都是使用hash（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>）？

提前感谢各位。

你不能做动态元标记（或者，你可以，但谷歌和脸书不会运行你的JavaScript，所以它们对你没有任何好处），但你可以遵循谷歌的指南，让AJAX应用程序可以爬网。我不知道脸书是否也有类似的指南。

似乎可以使用JS动态更改元标记，如本文所述：https://developers.google.com/search/docs/guides/javascript-seo-basics#titles-和片段

如果有人在和我一样的问题上挣扎，答案并不简单。不幸的是，对于使用复杂JS进程创建页面的情况，市场上最常见的"无头"浏览器（包括谷歌推荐的HtmlUnit、watiji或Crawjax）无法做到这一点。

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

溶液流程：

  1. 创建了站点地图
  2. 使索引服务（使用Awesomium）读取并为站点地图文件中定义的每个页面生成HTML快照
  3. 文件（HTML快照）保存在服务器的安全位置，具有中定义的相同目录结构和文件名浏览器URL
  4. 创建了一个Servlet（我们使用Java EE）来读取谷歌索引无人机请求的HTML快照："？_escaped_fragment_="查询字符串参数

关于如何为谷歌构建全履带无人机的详细信息，请点击此处（如OX所述-thx）：https://developers.google.com/webmasters/ajax-crawling/docs/getting-started

相关文章：