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

2013/1/15 21:25:17來源：360UXC

來看看著名的禪意花園網(wǎng)站（http://www.csszengarden.com/），在沒有樣式的情況下，代碼非常語義化，看起來很工整，加載不同的樣式之后可以隨心所欲的改變頁面外觀。

無樣式情況下：

加載樣式1：

加載樣式2：

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

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

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

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

盡少使用iframe框架。

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

為圖片加上alt屬性。

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

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

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

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

保留文字效果。

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