通過(guò)360實(shí)例淺談前端與seo(2)

無(wú)樣式情況下：

加載樣式1：

加載樣式2：

利用布局，把重要內(nèi)容HTML代碼放在最前。

搜索引擎抓取HTML內(nèi)容是從上到下，利用這一特點(diǎn)，可以讓主要代碼優(yōu)先讀取，廣告等不重要代碼放在下邊。例如，在左欄和右欄的代碼不變的情況下，只需改一下樣式，利用float:left;和float:right;就可以隨意讓兩欄在展現(xiàn)上位置互換，這樣就可以保證重要代碼在最前，讓爬蟲(chóng)最先抓取。同樣也適用于多欄的情況。

重要內(nèi)容不要用JS輸出。

蜘蛛不會(huì)讀取JS里的內(nèi)容，所以重要內(nèi)容必須放在HTML里。

盡少使用iframe框架。

搜索引擎不會(huì)抓取到iframe里的內(nèi)容，重要內(nèi)容不要放在框架中。

為圖片加上alt屬性。

當(dāng)網(wǎng)絡(luò)速度很慢，或者圖片地址失效的時(shí)候，就可以體現(xiàn)出alt屬性的作用，他可以讓用戶在圖片沒(méi)有顯示的時(shí)候知道這個(gè)圖片的作用。

可以顯示圖片時(shí)：

不能顯示圖片時(shí)：

需要強(qiáng)調(diào)的地方可以加上title屬性。

保留文字效果。

如果需要兼顧用戶體驗(yàn)和SEO效果，在必須用圖片的地方，例如個(gè)性字體的標(biāo)題，我們可以利用樣式控制，讓文本文字不會(huì)出現(xiàn)在瀏覽器上，但在網(wǎng)頁(yè)代碼中是有該標(biāo)題的。
例如這里的“電視劇分類”，為了完美還原設(shè)計(jì)圖，前端工程師可以把文字做成背景圖，之后用樣式讓html中的文字的縮進(jìn)設(shè)置成足夠大的負(fù)數(shù)，偏離出瀏覽器之外，也可以利用設(shè)置行高的方法讓文字隱藏。注意：不可使用display:none;的方法讓文字隱藏，因?yàn)樗阉饕鏁?huì)過(guò)濾掉display:none;里邊的內(nèi)容，就不會(huì)被蜘蛛檢索了。

HTML代碼：

CSS代碼：

或

利用CSS截取字符。

如果文字長(zhǎng)度過(guò)長(zhǎng)，可以用樣式截取，設(shè)置高度，超出的部分隱藏即可。這樣做的好處是讓文字完整呈現(xiàn)給搜索引擎，同時(shí)在表現(xiàn)上也保證了美觀。

提升網(wǎng)站速度

盡量外鏈CSS和JS