探讨SEO与前端：使用display:none对seo的影响

又到了利用碎片学习的时间了，我们来探讨一个困扰很多seo和前端开发人员的小案例：使用display:none对seo的影响。

前端开发工程师在制作html的页面过程中，有时候为了达到 SEO 与界面美观，不得不采用一些隐藏文本的办法。不仅是网易、腾讯等大型门户网站如此，小网站在网站 LOGO 上采用文本背景、文本缩进等方式的也屡见不鲜。

采用 display:none 的做法唯一的一个弊端就是代码所隐藏的文字很有可能会被引擎误以为的垃圾信息，从而忽略其内容。在这个说法的前提下，display:none 仅仅作为达到界面样式的作用，而失去了 SEO 的作用。

如果说因 display:none 样式导致网站被 K ，有点说不过去了。除非是网站中大量的站外链接都设置 display:none 样式，这种情况下会被认为是黑链。

display:none有所不足就肯定要想办法解决，针对 SEO 最佳隐藏文本的办法是：

1.使用 .seowhy{display: block;height: 0;width: 0;overflow: hidden;}

2.其次还可以使用 visibility:hidden; 样式，但是它会占据一定的文本流空间。

前端伙伴们可以根据自己的项目需求做出选择！好啦，碎片时间不宜长篇大论，小小的案例就到此结束啦，是不是又get到新技能啦！

前端爱好者们约定，阅读后：

if（‘觉得有用’）

｛

分享到朋友圈（‘I get it！’）;

｝

else if（‘已了解’）

｛

分享到朋友圈（‘a piece of cake！’）;

｝

else if('看不懂')

{

回复小编（'help me!'）;

}