Display:none or visibility:hidden on body element on page load - 它会影响 SEO 吗？答案

【问题标题】：Display:none or visibility:hidden on body element on page load - does it affect SEO?Display:none or visibility:hidden on body element on page load - 它会影响 SEO 吗？
【发布时间】：2016-10-09 11:03:09
【问题描述】：

我正在构建一个网页，我会做一些 JS 计算和样式来制作一些花哨的东西。但是，我坚持使用FOUC。首先我调用所需的样式，然后根据 JS 计算更改 div 上的一些填充和边距。这会导致页面出现某种闪烁。为了省略这一点，我想将 display:none 或 visibility:hidden 设置为 body 元素，直到计算完成，然后显示页面。

HTML

<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
    <!-- These meta tags come first. -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap Theme Example</title>

    <!-- Bootstrap -->
    <link href="assets/css/bootstrap.min.css" rel="stylesheet">
    <link href="assets/css/styles.css" rel="stylesheet">

    <script src="assets/js/modernizr-custom.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script>
        $('body').hide();
        // ... do calculations and styling ...
        $('body').show();
    </script>
</head>

这会影响 SEO 吗？还有其他解决这个问题的方法吗？

【问题讨论】：

我会说它肯定会影响搜索引擎优化，谷歌一直在寻找方法来确定内容是否隐藏，因为它曾经是操纵 SERPS 的常用方法 -> support.google.com/webmasters/answer/66353?hl=en
将opacity: 0设置为body，然后恢复为opacity: 1怎么样？
我投票结束这个问题作为离题，因为它要求 SEO 建议。这可能是Webmasters 的主题。

标签： javascript jquery html css seo

【解决方案1】：

只要您不隐藏关键字或向内容发送垃圾邮件，就应该没有问题。

更多内容你可以在Google Webmaster Central论坛查看这个话题：

“仅使用 display:none 不会自动触发惩罚。关键是是否有机制——无论是自动的还是由用户调用的一种 - 使内容可见。Google 变得非常擅长处理 JavaScript 来查找和解释这样的机制。如果你使用有效的 HTML、CSS 和 JavaScript，你有没什么可担心的。祝你好运！”

希望这会有所帮助。

【讨论】：