为了了解Google在使用前端框架创建的网站中实际索引的内容，我构建了一个小实验。它并未涵盖所有用例，但它至少是一种了解Google行为的方法。我用Vue.js构建了一个小型网站，并以不同的方式呈现不同的文本部分。

该网站的内容取自David Foster Wallace在Infinite Jest Wiki中的书“ Infinite Jest”的描述（谢谢你们！）。整本书有几个介绍性文本，以及个人简历中的人物列表：

• 静态HTML中的一些文本，在Vue.js主容器之外;
• 一些文本由Vue.js立即呈现，因为它包含在应用程序代码中已经存在的变量中：它们在组件的data对象中定义;
• #Sume文本由data对象呈现，但延迟时间为300毫秒;
• 字符bios来自一组休息API，我是使用Sandbox专门构建的。由于我假设Google会执行网站的代码并在一段时间后停止拍摄页面当前状态的快照，因此我将每个Web服务设置为以增量延迟响应，第一个为0ms，第二个为300ms，第三个是600毫秒，依此类推，最长可达2700毫秒。

每个字符bio缩短并包含指向子页面的链接，该子页面只能通过Vue.js使用（URL由Vue.js使用历史记录API生成），但不是服务器端（如果您调用URL的URL）页面直接，您没有得到服务器的响应），以检查那些是否也被索引。我认为这些不会被索引，因为它们不是呈现服务器端的正确链接，并且Google无法直接将用户引导到这些链接。但我只是想检查一下。

我将这个小测试网站发布到我的Github Pages并请求索引 – 看一看。

结果

实验结果（关于主页）如下：

• 已经在静态HTML内容中的内容被Google索引（这是相当明显的）;
• Vue实时生成的内容总是由Google索引;
• 由Vue生成但在300ms之后呈现的内容也被索引;
• 来自Web服务的内容有一些延迟，可能会被编入索引，但并非总是如此。我在不同时刻检查了Google的页面索引，并且最后插入的内容（几秒钟后）有时会被编入索引，有时则没有。即使它来自对外部Web服务的异步调用，大部分时间内都会很快得到索引的内容。这取决于Google 每个网页和网站的渲染预算，这取决于其内部算法，并且可能会根据您网站的排名和Googlebot渲染队列的当前状态而有很大差异。因此，您不能依赖来自外部Web服务的内容来获取索引;
• 子页面（因为它们不能作为直接链接访问）不会按预期编制索引。

这个实验告诉我们什么？基本上，Google确实会对动态生成的内容进行索引，即使来自外部Web服务，但如果内容“到达时间太晚”，则无法保证将内容编入索引。除了这个实验，我和其他真实的制作网站有过类似的经历。

有竞争力的SEO

好的，所以内容被编入索引，但是这个实验没有告诉我们的是：内容是否会被竞争排名？谷歌是否更喜欢将静态内容的网站添加到动态生成的网站？这不是一个容易回答的问题。

根据我的经验，我可以看出动态生成的内容可以排在SERPS的最高位置。我曾在网站上为一家大型汽车公司的新车型工作，推出了一个新的三级域名网站。该网站是使用Vue.js完全生成的 – 除了<title>标签和meta描述之外，静态HTML中的内容非常少。

该网站在发布后的前几天开始对次要搜索进行排名，并且SERP中的文本片段报告了直接来自动态内容的文字。

在三个月内，它与大多数与该车型相关的搜索排名第一 – 由于它是在汽车制造商的官方域名上托管的，因此相对容易，而且域名与信誉良好的网站密切相关。

但鉴于我们不得不面对负责该项目的SEO公司的强烈反对，我认为结果仍然非常显着。

由于项目的截止日期和时间紧迫，我们将在没有预渲染的情况下发布网站。

动画文字

谷歌没有索引的是动画严重的文本。我与之合作的公司之一Rabbit Hole Consulting包含大量文本动画，这些动画在用户滚动时执行，并要求将文本拆分为不同标签的多个块。

网站主页中的主要文本不适用于搜索引擎索引，因为它们没有针对SEO进行优化。它们不是由技术说话而且不使用关键字：它们只是为了陪伴用户进行关于公司的概念性旅程。当用户进入主页的各个部分时，动态插入文本。