javascript - SEO友好的动态内容？

Question

所以我正在制作一个典型的网页——菜单容器和内容容器。由于各种内容本身是相当复杂和多样的小节，我将把它们创建为单独的 HTML 文件。

现在为了切换内容，我想使用 JS 来交换内容容器中的东西，而无需重新加载整个页面。几年前我在一个页面上做过类似的事情，然后我只是用 js 生成的内容替换了内容 div 的内部 HTML(各个页面在结构上非常相似)。问题在于，显然它对搜索引擎非常不友好，因为他们看不到任何内容。

这一次，我正在考虑动态加载 iframe，而不是(各种内容 HTML 子页面)。尽管如此，我也不确定这对 SEO 有多友好。在不影响搜索引擎的内容可见性的情况下，有什么通用方法可以解决我正在尝试做的事情吗？

Answer 1

这感觉像是一种不应仅限于前端技术的情况。

我的建议是使用渐进式增强方法。

建立一个常规网站，根据需要动态呈现其页面，并使用常规超链接在页面之间链接。然后使用 javascript 覆盖默认链接行为并发出 ajax 请求来检索页面。

您可以对 ajax 请求使用后端检测来提供部分页面，也可以使用 jQuery 或类似方法从请求的页面获取特定内容并加载到页面上的适当占位符。

谷歌有一些关于建立这样一个网站以及他们如何解释它们的建议:https://support.google.com/webmasters/answer/81766?hl=en

Google 中有大量关于逐步增强的 ajax 网站的教程，这里有一个用 PHP 编写的示例:

http://www.impressivewebs.com/ajax-progressive-enhancement/

您可以使用渐进增强来检索静态页面，并且它仍然可以在不使用后端语言的情况下工作。您将失去通过使用后端检测来提供部分页面而不是需要从中提取数据的完整页面来节省带宽的选项。