使用 javascript 进行 SEO 友好的条件加载答案

【问题标题】：SEO friendly conditional loading using javascript使用 javascript 进行 SEO 友好的条件加载
【发布时间】：2012-10-08 09:31:42
【问题描述】：

我计划进行响应式+移动优先的网页设计。所以这是我的计划：

但是，我这里有个问题。据我所知，我将使用 javascript 加载的 HTML 内容不会被搜索引擎读取？我在互联网上搜索了很多，但我找不到这个问题的合理答案。

谁能告诉我是否可以使用 Javascript 进行 SEO 友好的条件加载？或者我是否必须研究服务器端语言，即 PHP/ASP 才能使用设备检测加载内容？

【问题讨论】：

【解决方案1】：

如果移动网站和桌面网站的内容相同，而您只是为每个屏幕设置不同的格式，那么这应该只涉及 CSS、媒体查询和一些 JS 以帮助向后兼容。这种方法应该不会损害您的 SEO。

这是在初始页面加载时隐藏内容（因此您稍后通过 JS 显示或通过 AJAX 将其拉入）对 SEO 不利。

要让 Google 抓取 AJAX 内容，您需要按照以下步骤操作：http://developers.google.com/webmasters/ajax-crawling

【讨论】：

我不同意，因为 a) 平台之间的内容通常会有所不同，b) 即使使用 AJAX，SEO 仍然很好
在他们所说的问题中，“......我将使用 javascript 加载的 HTML 内容将无法被搜索引擎读取。”这正是我要回应的。通过 AJAX 提取数据会损害您的 SEO，因为许多搜索引擎只索引初始页面加载时可见的内容。
@Justin 的目标是保持移动和桌面的基本内容相同，但在桌面或大屏幕上显示时将其增强为详细的信息/内容。我打算通过 JS 加载它。
响应式设计可以根据屏幕大小显示/隐藏内容，因此我认为您不需要不同的 HTML 或任何服务器端代码来检查设备类型。为了让通过 JS 加载的内容被 Google 索引，您需要按照以下步骤操作：developers.google.com/webmasters/ajax-crawling
我需要条件加载，因为我不想一次加载所有内容，也不想使用 css/JS 技术显示/隐藏它。它使页面大小更大并增加下载时间。因此，这不是一个好的移动优先策略。感谢 Google 提供的链接。正如 Marko 所说，我需要使用 hashbang。

【解决方案2】：

阅读有关允许将内容动态加载到网页中的 Hashbangs。

我不会评论您是否应该使用服务器端、Javascript 或只是 响应式设计，因为您特别提到了 Javascript。

来自 Google

This document 描述了网络服务器和搜索引擎爬虫之间的协议，允许动态创建的内容对爬虫可见。 Google 目前支持此协议。希望其他搜索引擎也能采纳这个提议。

【讨论】：

目的是保持移动和桌面的基本内容相同，但在桌面或大屏幕上显示时将其增强为详细的信息/内容。所以，我真的不想使用 Hashbangs。即是否可以在 index.asp 而不是 index.asp#!desktop_version 上加载增强的内容。 google 是否将 index.asp#!desktop_version 视为与 index.asp 不同的 url？
我找到了以下解决方案：developers.google.com/webmasters/ajax-crawling/docs/… 第 3 点。处理没有哈希碎片的页面回答了我真正想做的事情。
Hashbangs 是一个有效的解决方案，但也有缺点。 Twitter 表示，当他们删除它们时，他们能够将页面速度提高 80%。 engineering.twitter.com/2012/05/…