“display: none”隐藏的内容会影响SEO吗？

其实，我经常会被问到，使用 display: none 这个 CSS 属性来隐藏一些网页元素、或者用手风琴样式做 FAQs 是不是会对网页有影响。 这种做法初衷可能是为了提升用户体验，这篇文，我结合了谷歌等搜索引擎的官方指南和业内专家的观点，供大家参考。

首先扔出结论：会，移动端可以折叠。谷歌说只要为了用户体验隐藏的，可以，但一般也不推荐，因为用户体验见仁见智。

搜索引擎会索引隐藏的内容吗？

首先，我们需要了解搜索引擎是如何处理隐藏内容的。 搜索引擎会抓取网页内容并将其编入索引，以便用户搜索相关信息时能够找到。 尽管谷歌的算法复杂且不断更新，但从谷歌官方支持页面和其他可靠来源可以确认，使用 display: none 隐藏的内容仍然会被索引。

但这并不意味着隐藏内容与可见内容具有相同的权重。 搜索引擎会优先考虑用户直接可见的内容，认为这是页面的主要聚焦点。

• ContentForest 上的一个问题“谷歌是否会索引 display: none 隐藏的内容？” 就得到了肯定的回答，但同时也强调了可见内容的优先级更高。

• 谷歌的 Gary Illyes 在 2016 年的帖子 中也证实了这一点，他表示谷歌会索引隐藏内容，但会赋予其较低的权重。

虽然隐藏内容不会被完全忽略，但它对 SEO 的影响可能有限。

“display: none” 对 SEO 的影响

display: none 对 SEO 的影响取决于具体的使用场景和方式。

潜在的滥用风险: 过去，一些网站利用 display: none 进行“黑帽”SEO 操作，例如隐藏关键词或无关内容来操纵搜索排名。 搜索引擎现在会积极打击这种做法。

• Stack Overflow 上的一篇帖子就指出，如果滥用 CSS display: none，可能会对搜索引擎排名产生负面影响。 如果谷歌检测到网站使用 display: none 隐藏无关或垃圾内容来操纵搜索排名，甚至可能会对其进行惩罚。

用户体验: 如果 display: none 的使用是为了增强用户体验，例如在响应式布局、交互式元素（选项卡、折叠面板）或隐藏季节性内容等场景中，则不太可能对 SEO 产生负面影响。

• Burk Digital Factory 的博客文章“SEO & CSS Display None” 指出，谷歌的 John Mueller 曾表示，在“移动优先”的时代，出于用户体验目的而隐藏的内容应该具有完整的权重。

页面权重: 根据 Webmasters Stack Exchange 的说法，使用 display: none 隐藏的链接仍然可以传递页面权重。 这意味着它们有助于链接页面的整体 SEO 价值。

搜索摘要: Fresh Egg 的文章“谷歌如何处理隐藏内容？” 解释说，谷歌通常不会在搜索摘要中显示 display: none 隐藏的内容。 这可能会影响点击率，因为用户可能无法在摘要中看到相关信息。

桌面端与移动端 “display: none” 的区别

随着谷歌转向移动优先索引（2015 年前后），在移动设备上使用 display: none 已成为 SEO 的一个关键考虑因素。 谷歌对隐藏内容的评估也随着这一转变而发生了变化。 过去，桌面端隐藏的内容会被降权，但现在，只要谷歌可以在移动端看到这些内容，即使它们处于折叠或选项卡状态，也会对其赋予价值。

移动优先索引: 谷歌主要使用网站的移动版本进行索引和排名。但也正如 Search Engine Journal 在其“移动优先与桌面内容”一文中所述，这意味着仅在桌面版本上可用的内容可能不会获得太多权重。

内容一致性: 理想情况下，桌面和移动版本应该提供相同的内容，即使它们的呈现方式不同。比如谷歌搜索中心社区的一篇帖子指出，在移动端隐藏大量内容可能会导致流量损失。

响应式设计: 使用 display: none 进行响应式设计，根据屏幕尺寸重新排列或隐藏内容，通常是被接受的，甚至是被谷歌鼓励的，因为它可以提升用户体验。

隐藏图片: Webmasters Stack Exchange 上的一篇帖子探讨了“如果我在桌面端隐藏图片但在移动端显示它们，会对 SEO 产生什么影响？” 这个问题。 普遍的共识是，在桌面端隐藏图片但在移动端显示它们可能会影响它们在谷歌图片搜索中的排名。

虽然谷歌不会惩罚在移动优先环境下出于用户体验目的而隐藏的内容，但 SearchPilot 的一项案例研究发现，从选项卡框中移除内容实际上使自然流量增加了 12%。 这表明，虽然使用 display: none 可能不会对 SEO 造成直接损害，但这可能不是处理用户不可见内容的最有效方法。

使用 “display: none” 的最佳实践

那么为了确保 display: none 不会对 SEO 产生负面影响，请考虑以下最佳实践：

• 优先考虑用户体验: 目的要正确。使用 display: none 是为了改善用户体验，而不是为了操纵搜索引擎排名而去恶意堆砌内容。比如用手风琴样式去让页面更加简洁，是可以接受的。

• 避免隐藏关键内容: 确保重要的内容对用户和搜索引擎都可见。

• 使用语义化的 HTML: 对可以展开或折叠的内容使用适当的 HTML 元素（例如 <details>、<summary>）。

虽然但是

虽然搜索引擎会索引使用 display: none 隐藏的内容，但与可见内容相比，其 SEO 价值可能会降低。 display: none 对 SEO 的影响取决于多种因素，包括上下文、实现方式和用户体验。又因为移动优先索引的优先级更高，我们也必须优先考虑内容一致性和响应式设计，以确保最佳的 SEO 成效。

归根结底，有效地使用 display: none 进行 SEO 需要在优化用户体验和避免操纵策略之间取得平衡。 通过优先考虑用户需求并遵守最佳实践，前端开发同学也可以好好利用这个 CSS 属性，而不会危及搜索引擎排名。。