經常收到小伙伴的私信,如:
1.請問display:none是否被搜索引擎認為作弊?或者直接忽略其中的內容?
2.如果想實現部分內容不在前臺顯示,而被搜索引擎抓取,比較可靠有效的方式是什么?
從飛優角度來講,我們把以上問題簡單定義為網站前端設計會不會影響到SEO的整體效果,以使用Display:none屬性為例,它會不會被判定為SEO作弊?在搞清楚之前我們先需要掌握Display:none的具體定義和使用場景。
Display:none的定義
Display:none是CSS代碼中在需要隱藏文字時需要用到的代碼,當放到網站的頁面時,它可以簡單的控制內容是否顯示。主要作用節省屏幕空間以達到美化和提升用戶體驗的目的地。
比如:許多大型CMS門戶網站,為了實現簡潔而良好的用戶體驗,經常會使用display:none屬性去隱藏部分模塊,當用戶鼠標劃過或點擊某個按鈕等行為時,這些模塊會通過js代碼顯現出來。它可以在有限的空間里給用戶展示更多的內容,提高了用戶的體驗,節約了屏幕空間。
參考示例-導航展示
但是任何事物都有兩面性,它的另一面就是被人用來SEO作弊。
前端與SEO的關系
Display:none這種可以隱藏文字的功能經常會被SEO作弊者利用,意圖提高文字相關性,或希望某些與頁面不相關的但搜索次數高的關鍵詞能有排名和流量。當然,搜索引擎也不是傻子,在作弊與反作弊的較量上幾乎從沒有停止過,如今這個屬性已經造成了搜索引擎的敏感。
這么理解起來比較晦澀,總的來說就是用戶想看到的你沒有給展示,但是我只能通過查看源代碼及相關提示引導才能看到相關的內容(是指一種被迫營業狀態),從這一行為上判斷就能篩選出這個內容是否是正常行為或者刻意為之,若是刻意的那你能從相關的JS代碼進行查看,所以檢查出來也是比較容易的。
那我們再回到讀者之前的問題:
Q1.請問display:none是否被搜索引擎認為作弊?或者直接忽略其中的內容?
Q2.如果想實現部分內容不在前臺顯示,而被搜索引擎抓取,比較可靠有效的方式是什么?
關于Q1:僅僅因為使用display:none并不會被搜索引擎認為是作弊,也不會忽略其中的內容。
display:none可以有很正常的使用場景,和作弊沒有任何關系,比如PC版和移動版顯示不同菜單、排版,某些內容太長,缺省設置是隱藏的,用戶點擊“顯示更多/點擊閱讀”或加號,或者點擊選項卡,內容才顯示。這很正常。
參考示例說明:
關于Q2:但你說的情況可能就危險了,因為實現部分內容不在前臺顯示,而被搜索引擎抓取。如果所謂部分內容不在前臺顯示,指的是前面說的類似情況,用戶點擊選項的話,還是可以顯示的,那沒問題。如果不顯示的內容,無論用戶做什么都顯示不出來(除了看源代碼),用戶是怎么都看不到的,而你又想被搜索引擎當作正文抓取,那就是刻意隱藏文字了,有作弊之嫌。這樣會收到懲罰,這里一般性而言黑帽會用得較多,具體示例就不便展示,否則會有被判定為惡意慫恿之嫌疑,撤了撤了!
正確倡導前端與SEO良性發展
當然大家也不必杞人憂天,按照飛優前面介紹的正確的使用場景這是不會判定為作弊的(屬于正常應用行為),只有那些刻意為之通過掛相關的高流量詞做跳轉不展示給用戶且能正常抓取這樣才會收到搜索引擎的嚴判,基本上就是死刑了。
若非要用到display:none并且也需要關聯到文字且做到隱藏,那我們不妨采用這種替代方案,這是能接受的:
.xxx{display: block;height: 0;width: 0;overflow: hidden;}
所以大家還是不要太刻意使用捷徑來做SEO,沒有捷徑可走,唯有扎實做好內容,解決用戶需求,這樣才能形成好的搜索體驗帶來源源不斷的自然流量。