如何使搜索引擎索引动态创建的DOM页面

Question

我的网站主页上只有很少的内容，直到javascript函数将所有图像加载到页面上之后。在window.onload事件上调用该函数。我唯一的问题是搜索引擎无法为我的网站上的所有内容建立索引。它仅存储具有所有DOM元素的网站缓存，而没有使用javascript创建的元素。如何让搜索引擎将所有动态创建的元素及其索引建立页面索引？内容较少的网站将很难对结果进行排名，从而损害了网站的SEO。

这是网站的早期版本，其中包含最新的源代码：http://www.muscledex.com/

Answer 1

您最好先在服务器端生成内容，然后将其包含在对客户端的响应中，而不是在页面加载后要求它。您可以查看用于生成动态HTML的任何服务器端框架的模板库。

如果必须在客户端上加载内容，建议您将页面加载时间保持在4秒以下（source）。不过，您可能希望比4秒更快。可能包括一个超时，该超时可以在爬网程序完成您的页面之前发送一些静态内容（也许是缓存在服务器上的锻炼？）。对于这种情况，我的另一项建议是创建一个静态主页，并在单独的页面上包含这些类别和锻炼。这样，即使爬虫没有找到任何类别或特定的锻炼，它也至少可以获得站点描述，有关您提供的服务的一些信息，站点索引等。

Answer 2

注意：此答案仅与Google有关，我不知道其他人对此的处理方式。

Google机器人现在可以通过使用execute JS in crawled pages（全自动浏览器实例）进行headless browser的操作。但是，由于它们需要更多的资源（（因此，金钱）来运行该浏览器，因此与仅对初始HTML进行分析的常规搜寻器相比，它访问您的页面的频率就会降低。

无论如何，如果您想获得更好的SEO，则可以使用几种选择，这取决于您决定选择哪种。这里是一些：

使您的网站在没有JS的情况下工作

在大多数

情况下[[（而且您的网站从我所看到的绝对属于该类别），实际上，用数据填充HTML并不需要JS。它要么用于增加交互性，要么用于从API获取数据，这可以在服务器端完成。在这种情况下，最好在浏览器中关闭JS，然后看一切是否仍然有效。内容应该已经在您的页面上，即使它不是很漂亮，也可以正常工作。 JS应该只存在于为用户提供更好的服务。链接应该起作用，表格应该起作用。如果您有指向其他页面的按钮，则即使您的应用程序是<a>，它们也应该是SPA链接，并带有实际的URL。这将有助于漫游器了解您的页面以及网站的架构（即站点地图）。它不仅可以帮助使用屏幕阅读器的残障人士（例如盲人）。 Google考虑到这一点，这很好。

提供动态内容

想到的第一个显而易见的选择是处理数据服务器端，并动态呈现HTML页面。如果您只喜欢JS，则可以查看NodeJS，并使用ExpressJS或HapiJS之类的模块创建服务器。您可以找到大量的教程。或者，如果您知道其他语言，则可以使用Python，PHP，Java ...

第二个选项，如果您真的不知道如何操作或不想在服务器端工作，则可以考虑使用静态网站生成器，例如Hugo。您编写模板，定义一些数据，完成后，生成HTML页面并将其托管在静态服务器上。顺便说一句，这不会阻止您在前端使用Javascript来增强页面。但是内容已经存在。

通常针对更复杂的应用程序的另一种解决方案是服务器端渲染。您在类似浏览器的上下文中运行服务器上的页面

（不是真正的浏览器，但是JS在页面的上下文中运行）

，JS填充了DOM，更新的HTML就是发送到客户。然后，可以在客户端使用JS进行更多工作。它在现有框架中越来越受欢迎。例如，如果使用VueJS编写应用程序，则可以使用NuxtJS或Vue-server-renderer将HTML预呈现为仅在运行JS之后才能获得的状态。如果您不希望这样做，还可以使用SEO4Ajax这样的付费服务，该服务将在浏览器中运行您的页面，并保留最终HTML的缓存版本，以便您提供给Google bot等机器人。我们在公司使用了一段时间，效果很好。

给人留下好印象

最后，如果您想获得更高的排名，则您的网站必须是高质量的。例如，目前，它不支持https。您在这里失去积分。

它没有很多文本，因此使其价值降低。

它没有Open Graph tags，它将有助于在Twitter，Facebook或其他共享服务中显示漂亮的缩略图：

它没有structured data，可帮助抓取工具了解您的网页内容，并且可以用来在搜索结果中很好地显示您的网站：

还有很多其他事情需要照顾，但最重要的是，知道爬虫变得越来越聪明。因此，无论您做什么，如果您的网站质量低下且内容不丰富，那么人们将不会喜欢它。而且，如果他们不喜欢它，那么谷歌很有可能也不会这样做。满怀热情地建立您的网站，查看爬虫对您提出的建议，以改善您的网站（例如PageSpeedIndex，Google guidelines），然后您的网站最终会发展壮大：）