又到了利用碎片學習的時間了，我們來探討一個困擾很多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!'）;

}

總結

以上是生活随笔為你收集整理的探讨SEO与前端：使用display:none对seo的影响的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。