Google 机器人使用 HTML5 模式路由在 AngularJS 网站上爬行

2024-01-30

我们有一个使用 HTML5 路由的 AngularJS 网站。我刚刚做了一些测试“Fetch as Google”运行。结果有点令人困惑:

  • 在获取选项卡上,我看到我们的网站在查看源代码中的样子,其中包含所有前端绑定 {{ }},但并非所有呈现的 HTML
  • 在渲染选项卡上,我们的网站看起来非常好,没有 {{ }} 变量,看起来 Google bot 很好地获取并渲染了网站,这可能与此一致,http://googlewebmastercentral.blogspot.ae/2014/05/rendering-pages-with-fetch-as-google.html http://googlewebmastercentral.blogspot.ae/2014/05/rendering-pages-with-fetch-as-google.html.

但是,我们已经做好了 Google 无法抓取我们网站的准备,因此我们已经添加了 ,因此 Google 机器人会使用“?_escaped_fragment_=”重新访问我们的页面。我们遵循了这一点,https://developers.google.com/webmasters/ajax-crawling/docs/getting-started https://developers.google.com/webmasters/ajax-crawling/docs/getting-started(“3. 处理没有哈希片段的页面”部分)。在我们的 Nginx 配置中,我们有这样的内容:

if ($args ~ "_escaped_fragment_=") {
    serve the static HTML snapshots
}

,如果我们自己传递 _escaped_fragment_= ,它确实可以正常工作。但是,Google 机器人从未尝试使用此参数抓取我们的网站,因此它从未抓取快照。我们错过了什么吗?我们是否还应该在 Nginx 配置中添加针对 Google bot 的代理检测?像这样的东西吗?

if ($http_user_agent ~* "googlebot|yahoo|bingbot|baiduspider|yandex|yeti|yodaobot|gigabot|ia_archiver|facebookexternalhit|twitterbot|developers\.google\.com") {            

server from snapshots

}

如果我们能更好地理解这一点那就太好了,提前非常感谢!

UPDATE:
我刚刚读到这个,http://scotch.io/tutorials/javascript/angularjs-seo-with-prerender-io?_escaped_fragment_=tag#caveats http://scotch.io/tutorials/javascript/angularjs-seo-with-prerender-io?_escaped_fragment_=tag#caveats。因此,似乎在使用手动工具(Fetch as Google)时,我们应该传递自己 #!或 ?_escaped_fragment_= 在正确的位置。事实上,如果我在我们的例子中传递 ?_escaped_fragment_= ,我确实会看到我们创建的 HTML 快照。

真的吗?确实是这样吗?

UPDATE 2在此线程的底部,Google 员工验证了对于 Google 网站管理员“Fetch as Google”,您需要自己手动传递 _escaped_fragment_= 参数,https://productforums.google.com/forum/#!msg/webmasters/fZjdyjq0n98/PZ-nlq_2RjcJ https://productforums.google.com/forum/#!msg/webmasters/fZjdyjq0n98/PZ-nlq_2RjcJ

Cheers,
Iraklis


我将根据我们上个月开发HTML5模式的SPA的经验尝试回答您的问题。

如何让 Googlebot 使用 ?_escaped_fragment_= 而不是直接链接。

这实际上很简单,但很容易被忽视。事实上,有两种不同的方法可以让 Googlebot 尝试 escaped_fragment。第一种方法是以非 html5 模式运行您的网站。这意味着您的 URL 将采用以下形式:

http://my.domain.com/base/#!some/path/on/website http://my.domain.com/base/#!some/path/on/website

Googlebot 可识别 #!并使用更改后的 URL 对您的服务器进行第二次调用:

http://my.domain.com/base/?_escaped_fragment_=some/path/on/website http://my.domain.com/base/?_escaped_fragment_=some/path/on/website

然后您就可以按照您的意愿进行处理。让 Googlebot 尝试 _escaped_fragment_ 模式的第二种方法是在您提供给机器人的索引页上包含以下元标记:

<meta name="fragment" content="!">

这将使 googlebot 每次看到该标签时都会检查网页的其他版本。有趣的是,您可以同时使用这两种技术,或者您可以执行我们最终所做的操作,即使用元标记在 html5 模式下运行。这意味着您的 URL 将按如下方式转义:

http://my.domain.com/base/some/path/on/website?_escaped_fragment_= http://my.domain.com/base/some/path/on/website?_escaped_fragment_=

有趣的是,机器人不会在片段末尾放置任何内容。但根据您运行的网络服务器,您可以轻松地将其与“_escaped_fragment_”文本匹配的模式映射到您的备用机器人页面。有关逃逸片段的更多信息,请访问here https://developers.google.com/webmasters/ajax-crawling/docs/specification.

“Fetch as Googlebot”返回我的页面的两个不同版本,带有 {{}} 的源和看起来正确的呈现页面。这意味着什么?

自 2014 年初以来,Google 的 Bot 实际上可以在有限的范围内解释 JavaScript。有关更多信息,请阅读 google webmasters 上的官方博客条目here http://googlewebmastercentral.blogspot.ch/2014/05/understanding-web-pages-better.html。然而,正如博客文章中明确指出的,这有很多警告。例如:

  1. Googlebot 不保证执行所有 JavaScript 代码。
  2. Googlebot 将尝试在 javascript 中查找要跟踪的链接,并使用它们来帮助查找更多页面。
  3. Googlebot 将通过执行尽可能多的 JavaScript 来在网站站长工具中呈现预览(因此呈现版本中缺少 {{}})。
  4. Googlebot 不一定会使用渲染版本来为其索引构建有关您网站的元信息。

As of 2014年12月18日,我们仍然不确定 Googlebot 是否真的可以在呈现模式下从 SPA 中提取任何信息作为其索引,而不仅仅是在 javascript 中查找要跟踪的链接。根据我们的经验,Googlebot 会在其索引列表中包含 {{}},以便当您尝试使用 {{}} 填充元信息(说明、关键字、标题等...)时,您的网站在 Google 搜索中看起来像这样结果:

{{meta.siteTitle}}
http://my.domain.com/base/some/path/on/website http://my.domain.com/base/some/path/on/website
{{元.描述}}

而不是你所期望的,它可能看起来像这样:

Domain
http://my.domain.com/base/some/path/on/website http://my.domain.com/base/some/path/on/website
这是我的域上的随机页面。毫无疑问,这是一个出色的示例页面!

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Google 机器人使用 HTML5 模式路由在 AngularJS 网站上爬行 的相关文章

  • 我可以停止 :hover 应用于元素吗?

    假设我有一些 CSS button hover font weight bold 我怎样才能防止 hover随意应用样式 我的目标用例是当元素被禁用时 例如 使用这个 HTML
  • JSTL 在循环中每 5 个字段集创建一个新行

    您好 我目前正在迭代并在表中显示字段集列表 为了让布局变得更得体一些 我想在每次循环到达第五个字段集时创建一个新行 谢谢 JSP div class det table class det tr td td tr table div
  • 需要有关 React Js 的帮助

    我是 React Js 新手 我的代码无法正常工作 请看下面 这是我的脚本文件Main jsx 该文件由 React 编译 输出放置在 dist 文件夹下的 main js 文件中 var react require react react
  • 绝对定位的 div 中的文本重叠

    在下面的代码片段中 div 元素 main gt div 相对定位并向左浮动 由于相对定位 div 元素 main gt div 彼此相邻放置 span 元素位于 div 元素下方 main gt div gt span span 元素绝对
  • 博客上的随机背景图片

    我正在尝试整理某种代码 以随机化我的博主博客上的背景图像 我的编程技能不足 但我愿意尝试建议 我记得在 WordPress 中实现了类似的功能 通过将 php 代码文件存储在图像文件夹中 然后从 CSS 中调用该 php 文件 就像它是图像
  • Angular UI Select2,为什么 ng-model 被设置为 JSON 字符串?

    我使用 Angular ui 的 select2 来实现相当简单的下拉菜单 它由位于我的控制器范围内的静态数据数组支持 在我的控制器中 我有一个在下拉列表的 ng change 上调用的函数 以便我可以在值更改时执行一些操作 然而 我发现
  • 使用 CSS 删除不需要的表格单元格边框

    我有一个奇怪且令人沮丧的问题 对于简单的标记 table thead tr th 1 th th 2 th th 3 th tr thead tbody tr td a td td b gt td td c td tr tr class o
  • 如何获取 ng-repeat 中的前一项?

    我有一个模板 仅当当前项目与前一个项目有一些不同的字段时 我才想生成一些 HTML 如何访问 ng repeat 中的前一项 你可以做类似的事情 div ul li div class title index content title c
  • html 中的输入字段可以有多少个字符?

    html 输入字段中允许的 自然 字符数是多少 多谢 根据评论添加 我不需要通过邮寄或获取将其发送到服务器 我将通过 JS 解析字符串 因此 如果输入是无限的 就像 sAc 所说 这会给我带来两个进一步的问题 JS 最长的 String 可
  • SVG img keepAspectRatio Chrome

    当我对 SVG 文件中的图像使用preserveAspectRatio none 时 它 似乎在 Google Chrome 中不起作用 SVG 不会根据图像宽度和高度进行缩放
  • 排除单个浏览器使用 CSS 类

    我想排除 Internet Explorer 使用特定的 CSS 类 这可能吗 Details 我有一个 css 类 看起来像 input type radio checked input type radio hover box shad
  • 将一个文本框的内容复制到另一个文本框

    假设在文本框中输入了一个条目 是否可以在第二个文本框中保留相同的输入文本 如果是这样 这是如何完成的
  • 未捕获的引用错误:myFunction 未定义[重复]

    这个问题在这里已经有答案了 这到底是怎么回事 http jsfiddle net sVT54 http jsfiddle net sVT54
  • 使用模态表单 ajax 超出 HTMLFormElement.toString 的最大调用堆栈大小

    我想使用模态窗口中的 ajax 请求提交表单 单击此链接可打开该模式 a class btn btn primary i class fa fa edit i Write a review a 模态窗口 div class modal fa
  • 如何在 WordPress HTML 中包含“onclick”对象

    我正在尝试将 onclick 对象添加到触发事件的单站点 即而不是多站点 WordPress 中的页面 代码是 a href Send a voice message a 当尝试保存代码时 WordPress 会删除 onclick 对象
  • 如何改变HTML5视频的播放速度?

    如何更改 HTML5 中的视频播放速度 我查过视频标签的属性 https www w3schools com html html5 video asp在 w3school 但无法做到这一点 根据这个网站 http www chipwreck
  • 加载另一个 JS 脚本后加载

    这是我的代码 very big js file lots of html stuff 问题是 这些是异步加载的 有没有办法等待第二个脚本直到第一个脚本加载 如果您使用 jQuery 有一个非常简单的方法可以通过获取脚本 https api
  • gwt 中的垂直居中

    如何使用垂直面板在 gwt 中垂直居中 或者请告诉我有什么方法可以进行垂直居中 如果你想直接使用VerticalPanel从代码中 您需要使用setVerticalAlignment HasVerticalAlignment ALIGN M
  • MYSQL 按喜欢/不喜欢和受欢迎程度排序

    我有评论表 其中包括喜欢和不喜欢的内容 现在我在正确的顺序上遇到了问题 实际上 我的系统在顶部显示了最多点赞的评论 我正在 youtube 上寻找类似系统的东西 这意味着 100like 100dislikes 的评论的顺序高于 1 1 我
  • html,将链接显示为普通文本

    我想知道您是否可以将链接显示为普通文本 a href target self img src width 121 height 20 alt div style font size 12px display block font color

随机推荐

  • 我应该在 Swift Playgrounds 的 .gitignore 文件中包含什么?

    我想使用 Git 对我的 Playground 进行版本控制 但我不确定哪些文件应该被忽略以及哪些文件应该提交 目前我使用以下 gitignore游乐场文件 Xcode user data xcuserdata 还应该有什么 来自官方Swi
  • 使用环境调用 popen

    在我的 Lua 程序中 我必须捕获外部程序的输出 该外部程序需要某些环境变量 所以我这样做 e e e A 100 e e B Hi e e C Test file io popen e bin aprogr 显然 如果环境很大 popen
  • 如何使用Python获取两个PDF文件的差异?

    我需要找出两个 PDF 文件之间的差异 有谁知道任何与Python相关的工具具有直接给出两个PDF的差异的功能吗 你所说的 差异 是什么意思 PDF 文本存在差异或某些布局发生变化 例如 调整了嵌入图形的大小 第一个很容易检测 第二个几乎不
  • SQLITE 数据库在 java 中被锁定(IDE NetBeans)

    当我执行任何操作时 它在数据库中工作 但突然显示数据库已锁定错误 假设这是在一个按钮上执行的操作 private void jButton6ActionPerformed java awt event ActionEvent evt Sah
  • 是否可以在 webpack 中创建自定义解析器?

    当需要模块时我有自己的约定 例如 require components SettingsPanel 应解决require components SettingsPanel SettingsPanel js 有什么方法可以创建这样的解析器吗
  • 在谷歌闭包库中创建自定义事件调度程序时出现问题

    我正在尝试在 google Closure js 库中创建自定义事件调度程序 我将此代码基于 fx 文件夹中的动画类 但我不断收到此错误 goog events 未定义 但我将事件包放在顶部 这是我的代码 goog provide test
  • 如何自动重新连接 Rails 6 PostgreSQL 连接?

    我有一个带有一些工作进程的 Rails 6 应用程序 该应用程序使用 PostgreSQL 作为数据库 有时数据库会重新启动 例如次要版本升级 并且工作人员会失去连接 我希望他们能够自动重新连接 但它没有发生 我尝试使用reconnect
  • GWT 中的字符串格式化程序

    如何在 GWT 中格式化字符串 我做了一个方法 Formatter format new Formatter int matches 0 Formatter formattedString format format d numbers s
  • opencv中的HoughCircles函数可以检测圆内的圆吗?

    我在 OpenCV 中遇到了用于圆检测的 HoughCircles 但它有一个参数指定检测到的圆之间的最小距离 我担心的是 如果两个圆同心 即一个圆在另一个圆内 这是否有效 谢谢 沙尚克 如果两个圆的中心相距足够远 霍夫变换将仅返回 2 个
  • 将当前应用程序作为单实例运行并显示前一个实例

    我刚刚实现了这段保护应用程序单个实例的代码 以免应用程序运行两次 现在我想知道如何显示已经运行的原始应用程序进程 这是我在程序类中的代码 static class Program STAThread static void Main con
  • 合并两个已排序的链表

    这是微软笔试时提出的编程问题之一 我给出了我提出的问题和答案 事情是我的答案 虽然看起来很全面 至少对我来说 但我觉得行数可以减少 这是用 C 语言问的 我是一个 Java 人 但我设法编写了它 我的答案可能包含太多类似 Java 的语法
  • 使用重复条目绘制置信区间和预测区间

    I have a correlation plot for two variables the predictor variable temperature on the x axis and the response variable d
  • 如何在 Rstudio 演示文稿中创建表格

    我正在尝试在 RStudio Rpres 文件中创建一个表 以下是我目前在网上搜索到的内容 但对齐不正确 这是最好的方法吗 关于对齐有什么建议吗 Test Right Left Default Center 12 12 12 12 123
  • 基本的多文件上传不适用于移动设备

    我创建了一个非常基本的多文件上传表单示例 参考 https bootsnipp com snippets kWqEj 它在桌面上运行完美 但在移动设备上运行不佳 至少在我测试的移动设备上是这样 On Mobile Xiaomi Mi4 An
  • 在 Eclipse 中配置 Logback

    我正在从 Log4j 切换到 Logback 但我还没有成功地使 Logback 工作 我已经放置了logback xml在我的 Eclipse Java 项目的根目录中 下面是其内容
  • 样式选择下拉框

    我有一个 HTML 选择下拉框 我已经对其进行了样式设置 我遇到的问题是我似乎无法设置选项的背景颜色样式 下面是演示的链接 您可以看到下拉选项有白色背景 我正在尝试更改它 http cssdeck com labs lnroxrua htt
  • 如何从 xml 获取垂直按钮视图

    我想在垂直方向创建一个按钮 也许我们可以通过扩展一个按钮并将画布重新渲染 旋转 到垂直方向 我们可以获得自定义按钮 但我需要从 xml 检查图形表示 我需要一个像这样的按钮 请参阅下面的链接 应该可以解决您的问题 http blog sty
  • 如何在ionic 3中使用jquery

    我正在尝试使用 ionic 3 中的 jquery 在 div 中加载外部网站 TS export class HomePage constructor public navCtrl NavController loadExternalUR
  • 将字符串扫描为十六进制字符数组

    这是我的示例代码 char a char str 20 unsigned char b 8 unsigned char c 8 int argsread int i init 8051 while 1 printf n enter a 64
  • Google 机器人使用 HTML5 模式路由在 AngularJS 网站上爬行

    我们有一个使用 HTML5 路由的 AngularJS 网站 我刚刚做了一些测试 Fetch as Google 运行 结果有点令人困惑 在获取选项卡上 我看到我们的网站在查看源代码中的样子 其中包含所有前端绑定 但并非所有呈现的 HTML