以 Google 方式获取 - Googlebot（桌面）无法正确呈现页面答案

【问题标题】：Fetch as Google - Googlebot (desktop) not rendering page correctly以 Google 方式获取 - Googlebot（桌面）无法正确呈现页面
【发布时间】：2016-11-01 09:35:51
【问题描述】：

我在让 Googlebot 正确呈现我的网页时遇到问题。

它正在渲染我的页面的页眉和一个“行”（只是页面的顶部背景图片），然后无法渲染除此之外的任何内容，甚至页脚，丢失了大约 3/4 的页面。

我的网站是www.runparis.fr，并附上呈现的抓取屏幕截图。

其他可能相关的信息包括：

获取的代码没有丢失任何内容
获取状态已完成（没有丢失资源）
问题是站点范围的；它发生在我的所有页面上
当我检查缓存时，整个页面都完美呈现
Google 抓取（移动）完美呈现网站
该网站在我的任何浏览器中看起来都很好
我的页面上没有什么时髦的东西；它只是背景图像和文本。简单的东西。

我的问题是：

Google 无法呈现页面是否会影响 Google 对其排名的方式？
对于解决问题和让 google 正确呈现页面有什么建议吗？

感谢任何人提供的任何帮助或建议！ Googlebot render 2

编辑：我已经完成了另一个 Fetch as Google 并渲染了一个测试页面，发现 Googlebot 在渲染了我在我的 Wordpress 安装中的页面构建器中设置为“全高”的任何背景图像后将停止渲染；也就是说，任何设置为占据浏览器窗口整个高度的图像都会终止渲染。

因此，它会渲染所有内容，直到遇到此图像，渲染该图像，然后停止。

如前所述，我的页面并不漂亮；它只是简单的背景图片和文字。令我惊讶的是，Googlebot 无法呈现任何浏览器都可以完美呈现的内容，尤其是考虑到页面的简单性！

所以，我的问题是：

Google 无法呈现我的页面会影响 Google 对我的网站进行排名的方式吗？（假设缓存中的内容在我的浏览器上呈现良好）
而且，这是一个常见问题吗？是否有任何修复程序可以让 Google 正确呈现我的网页？

外部来源提供的一些新信息：

“validator.w3.org/nu/?doc=http%3A%2F%2Frunparis.fr%2F”

"jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Frunparis.fr%2F&profile=css3&usermedium=all&warning=1&vextwarning=&lang=en"

各种错误和警告可能解释了为什么在某些工具（例如 Google Fetch 和渲染）中渲染会受到阻碍。浏览器比所有这些验证和渲染工具更宽容。我猜在 Google 的渲染工具中，设置背景图像和前景图像以及文本内容的 css 规则以错误的顺序应用，因此背景内容最终位于前景之上。

此新信息是否有助于任何人了解 Googlebot 无法呈现页面的原因？

【问题讨论】：

你有想过这个吗？我在 www.wayhome.io 遇到了同样的事情，我不知道如何修复它/如果它很重要。

标签： google-search-console googlebot google-crawlers

【解决方案1】：

我在 (Google Mobile-Friendly) 工具和 (Fetch as Google) 移动版本上遇到了类似的问题，因为 Googlebot 没有加载我的 style.css 并影响我的排名所以我手动为移动设备输出我的 stlye.css 代码

add_action('wp_head','load_mobile_styles');

function load_mobile_styles () { 

 if( wp_is_mobile() )
    {

        ob_start(); ?>
        <style>
         enter code here
        </style>
        <style>
         enter code here
        </style>
        <?php
        echo ob_ob_get_clean();
    }
}

【讨论】：

【解决方案2】：

我遇到了同样的问题，渲染器上唯一可见的东西是英雄部分，这是由为英雄部分定义 height:100vh; 引起的。
出现此问题当使用vh css 单位时，或者在某些情况下height:100%;

Here 是真正帮助我理解问题的线程和讨论：

我相信 google bot 正在这样做：
1. 以 1024x768 视口查看您的网站。
2. 检查window.scrollHeight is
3. 将其虚拟浏览器的大小调整为与 window.scrollHeight 相同的高度
4. 截取屏幕截图并
5. 检查哪些元素是可见的，并酌情计算 SE 分数。（不可见的叮当内容。）

我部分通过在 mediaqueries 中插入额外规则解决了这个问题：
所以对于宽度约为 1024px 的分辨率，我输入了 @987654325 @（规则 height:100vh; 保持活动状态）在我的英雄部分，
和关于 1280px 宽度及以上规则的媒体查询上，我设置了 max-height:none;（规则 height:100vh; 处于活动状态）。

我仍然在渲染器中丢失 height 的 30px，但在页面末尾被截断，没有文本和任何有意义的内容。

【讨论】：