.htaccess 用于 SEO 机器人在没有 hashbang 的情况下抓取单页应用程序

2023-11-25

Using a pushState启用页面,通常您使用重定向 SEO 机器人escaped_fragment习俗。您可以阅读更多相关内容here.

该约定假设您将使用 (#!) hashbang 前缀位于单页应用程序上所有 URI 之前。 SEO 机器人将通过用自己可识别的约定替换 hashbang 来逃避这些片段escaped_fragment当发出页面请求时。

//Your page
http://example.com/#!home

//Requested by bots as
http://example.com/?_escaped_fragment=home

这允许站点管理员检测机器人,并将它们重定向到缓存的预渲染页面。

RewriteCond %{QUERY_STRING} ^_escaped_fragment_=(.*)$
RewriteRule ^(.*)$  https://s3.amazonaws.com/mybucket/$1 [P,QSA,L]

问题是,随着广泛的应用,hashbang 正在迅速被淘汰。pushState支持。它也非常丑陋,并且对用户来说不是很直观。

那么如果我们使用 HTML5 模式,其中 pushState 引导entire用户应用程序?

//Your index is using pushState
http://example.com/

//Your category is using pushState (not a folder)
http://example.com/category

//Your category/subcategory is using pushState
http://example.com/category/subcategory

可以使用这个较新的约定重写规则引导机器人到您的缓存版本吗?相关,但仅说明索引边缘情况。谷歌也有一篇文章这建议使用opt-in对于这种单边缘情况的方法使用<meta name="fragment" content="!"> in the <head>页面的。同样,这是针对单一边缘情况的。这里我们讨论将每个页面作为一个opt-in塞纳里奥。

http://example.com/?escaped_fragment=
http://example.com/category?escaped_fragment=
http://example.com/category/subcategory?escaped_fragment=

我认为escaped_fragment仍然可以用作 SEO 机器人的标识符,并且我可以提取域和该标识符之间的所有内容以附加到我的存储桶位置,例如:

RewriteCond %{QUERY_STRING} ^_escaped_fragment_=$
# (high level example I have no idea how to do this)
# extract "category/subcategory" == $2
# from http://example.com/category/subcategory?escaped_fragment=
RewriteRule ^(.*)$  https://s3.amazonaws.com/mybucket/$2 [P,QSA,L]

处理这个问题的最佳方法是什么?


在单页网络应用程序上也有类似的问题。

我发现这个问题的唯一解决方案是有效地创建页面的静态版本,以便谷歌(和其他)机器人可以导航。

您可以自己执行此操作,但也有一些服务可以完全执行此操作并为您创建静态缓存(并通过其 CDN 向机器人提供快照)。

我最终使用了 SEO4Ajax,尽管还有其他类似的服务可用!

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

.htaccess 用于 SEO 机器人在没有 hashbang 的情况下抓取单页应用程序 的相关文章

  • 从 JavaScript 加载图像

    在我的专辑幻灯片放映页面上 我有类似的代码 span style display none img src imageUrl span span show loader span in showImage 我确定图像已加载 因此我显示图像并
  • React hooks 状态变量在重新渲染后未更新

    在下面的示例中 我有一个想要更新的元素 水果 数组 并使用更新后的数组执行其他操作 在本例中保存更新后的列表 我的理解是重新渲染状态将更新 但它不在这里 或者状态更新和我的操作之间存在延迟 In the addFruit功能我可以看到 Pe
  • 如何使用标准 JavaScript 在 CSS 转换结束后立即重新启动它?

    我构建了一种密码生成器 只要倒计时到期 它就会显示新密码 不幸的是 我只设法弄清楚如何运行我的代码一次 倒计时由一个简单的 CSS 过渡组成 我想保留它 因为它比我的其他尝试平滑得多 其中我尝试使用 JavaScript 重复更新宽度 va
  • Javascript:使用 IIFE 和块语句之间的区别

    IIFE主要用于封装作用域 function let myVar 10 not global 但为什么不直接使用块语句呢 let myVar 10 also not global 除了范围封装之外 进一步使用 IIFE 是否还有其他好处 块
  • CSS 网格/布局框架,专注于固定元素和单页全屏布局

    经验法则 如果您在布局中过多地使用 CSS 请切换到框架 我已经研究了数十个网格 布局框架 其中大多数都专注于传统的文档网格布局 我的页面更像是一个 SPA 单页应用程序 它类似于桌面应用程序使用的布局 显然 HTML 不能很好地处理这个问
  • 每n秒执行一次函数

    我制作了这个在 10 秒后点击链接的代码片段 function timeout window setTimeout function img left click 1000 setTimeout timeout 1000 timeout 我
  • 在 Cordova 中合并文件的多个部分

    在我的 Cordova 应用程序中 我正在下载任意文件 例如图像或视频文件 这是通过 Cordova 文件传输插件和 Range 标头完成的 因为我需要分段下载文件 我的问题是 我想将几 个小 字节 文件合并回原来的文件中 他们曾经在其中使
  • 有没有办法在 React 中自动播放音频而不使用 onClick 事件?

    我在尝试在 componentDidMount 中播放音频时收到此错误 未捕获 承诺中 DOMException play 失败 因为用户没有先与文档交互 componentDidMount document getElementById
  • vuejs 模板和 asp.net 部分视图,好的做法吗?

    我在网站中使用 Vue js 并将模板添加到 html 代码中 并将 js 代码添加到单个 js 文件中 所以我不想使用 vue Vuefy Browserfy 方法 而是稍后捆绑并缩小我的 js 文件 由于我必须使用 Asp Net MV
  • Angular UI-Router:多个 URL 到单一状态

    我已经开始使用 Angular 的 ui router 并且我正在尝试弄清楚如何让多个 URL 引用单个状态 例如 orgs 12354 overview retyrns the same pages as org overview 我的
  • 如何防止输入文本中出现“后重音”

    我相信这是一个简单的问题 但在谷歌上搜索几个小时后我找不到任何答案 也许我无法在搜索中使用正确的单词 P 我有一个 javascript 方法 可以防止用户用数字以外的其他字符填充文本框 如下面的代码所示 它在 KeyDown 事件中使用
  • 使用 Javascript/Node.js 在代码内执行 mongoimport

    node js javascript 中是否有任何库可供个人使用mongoimport在代码中 据我了解 mongoimport 有点像 exe 您必须先执行它 然后才能使用其文本输入环境 是否可以在我的代码中执行 mongoimport
  • 使用 JavaScript 防止网页导航离开

    如何使用 JavaScript 防止网页导航离开 Using onunload允许您显示消息 但不会中断导航 因为为时已晚 然而 使用onbeforeunload将中断导航 window onbeforeunload function re
  • Angular 2 将字符串转换为 md5 哈希

    我找到了ts md5 https www npmjs com package ts md5包 但在示例中它有一个hashStr方法 但现在不行了 类型上不存在属性 hashStr Md5 使用该错误后 该错误会记录在我的控制台中 我怎样才能
  • 在 Chrome 开发者工具中禁用调试器语句

    我正在尝试对恶意 JavaScript 进行逆向工程 当我最初加载侧面时 会注入 JS 代码 其中包括 debugger 语句并将断点注入我的 chrome 开发人员控制台 通过stackoverflow阅读 禁用所有断点does not帮
  • 如何使用 NextJS 使用自托管字体face?

    使用 NextJS 的字体 我已经阅读了有关如何在 NextJS 中使用自托管字体的不同主题 我得到了什么 wait compiling 当我这样做时 font face font family montserrat src url myp
  • 如何将项目插入到特定索引处的空数组中?

    我想将一个项目插入到空数组的指定索引中 我看到有 Array prototype splice 方法 但是 如果我在空数组上使用 splice 它只会添加项目来结束数组 如下所示 var a a splice 3 0 item 3 cons
  • VS Code 扩展 - 获取完整路径

    我正在为 VS Code 编写一个插件 我需要知道调用扩展的文件的路径 无论是从编辑器上下文菜单或资源管理器上下文菜单调用还是用户只需键入扩展命令 function activate context get full path of the
  • Html5画布最热门的任意形状

    我正在尝试开发可以在画布中渲染图像和文本的程序 我尝试处理画布中图像的点击 但它适用于可矩形图像 我的问题 您是否知道处理单击画布中图像的可见部分 非透明部分 的解决方案或框架 我正在寻找 ActionScript hitTestObjec
  • Safari 扩展将消息发送到特定选项卡

    有没有办法从全局页面发送消息到特定选项卡 我目前正在做的是 在创建选项卡时 注入的脚本会创建一个唯一的 ID 并将包含该编号的消息发送到全局页面 并且全局页面会保存该编号 如果全局页面需要发送一些数据到一个tab 即 tab 3 然后全局页

随机推荐