SEO（Search Engine Optimization），就是傳說中的搜索引擎優(yōu)化，是指為了增加網(wǎng)頁在搜索引擎自然搜索結(jié)果中的收錄數(shù)量以及提升排序位置而做的優(yōu)化行為。我認(rèn)為這是一門說來簡單，但操作起來復(fù)雜的技術(shù)，只可意會，不可言傳。作為一名前端工程師，不需要精通SEO，但必須要了解它。SEO有一條不變的準(zhǔn)則就是它永遠(yuǎn)都在變，因為沒有一沉不變的優(yōu)化方案可供大家套用。但我們?nèi)匀豢梢园l(fā)現(xiàn)一些基礎(chǔ)的或是被人們公認(rèn)的規(guī)律來進(jìn)行網(wǎng)站的SEO。更重要的是我們要有自己的實踐，不斷發(fā)現(xiàn)適合自己行之有效的SEO方法。
從經(jīng)驗來說，我認(rèn)為SEO有三條最最重要的規(guī)律，那就是合理的網(wǎng)站布局，原創(chuàng)的內(nèi)容、高質(zhì)量的外部鏈接和持之以恒適度的優(yōu)化。
前端是構(gòu)建網(wǎng)站中很重要的一個環(huán)節(jié)，本篇重點從前端的角度來講解一下SEO的實施方法。前端的工作主要是負(fù)責(zé)頁面的HTML+CSS+JS，優(yōu)化好這幾個方面會為SEO工作打好一個堅實的基礎(chǔ)。突出重要內(nèi)容可以讓搜索引擎判斷當(dāng)前頁面的重點是什么，提升網(wǎng)站訪問速度可以讓搜索引擎的蜘蛛順利、快速、大量的抓取網(wǎng)頁內(nèi)容，所以以下我就著重以突出重要內(nèi)容和提升網(wǎng)站速度為主。
突出重要內(nèi)容
合理的title、description和keywords
截圖取自于360搜索（so.com）
雖然現(xiàn)在搜索對這三項的權(quán)重慢慢減小，但還是希望能夠合理的寫好他們，只寫有用的東西，不要在這里寫小說，要表達(dá)重點。
title：只強調(diào)重點即可，重要關(guān)鍵詞出現(xiàn)不要超過2次，而且要靠前，每個頁面title要有所不同，如下圖：
description：把網(wǎng)頁內(nèi)容高度概括到這里，長度要合理，不可過分堆砌關(guān)鍵詞，每個頁面description要有所不同，如下圖：
keywords：列舉出幾個重要關(guān)鍵詞即可，也不可過分堆砌。
語義化書寫HTML代碼，符合W3C標(biāo)準(zhǔn)。
對于搜索引擎來說，最直接面對的就是網(wǎng)頁HTML代碼，如果代碼寫的語義化，搜索引擎就會很容易的讀懂該網(wǎng)頁要表達(dá)的意思。例如文本模塊要有大標(biāo)題，合理利用h1-h6，列表形式的代碼使用ul或ol，重要的文字使用strong等等?？傊褪且浞掷酶鞣NHTML標(biāo)簽完成他們本職的工作，當(dāng)然要兼容IE、火狐、Chrome等主流瀏覽器。
我們來看看著名的禪意花園網(wǎng)站（http://www.csszengarden.com/），在沒有樣式的情況下，代碼非常語義化，看起來很工整，加載不同的樣式之后可以隨心所欲的改變頁面外觀。
無樣式情況下：
加載樣式1：
加載樣式2：
利用布局，把重要內(nèi)容HTML代碼放在最前。
搜索引擎抓取HTML內(nèi)容是從上到下，利用這一特點，可以讓主要代碼優(yōu)先讀取，廣告等不重要代碼放在下邊。例如，在左欄和右欄的代碼不變的情況下，只需改一下樣式，利用float:left;和float:right;就可以隨意讓兩欄在展現(xiàn)上位置互換，這樣就可以保證重要代碼在最前，讓爬蟲最先抓取。同樣也適用于多欄的情況。
重要內(nèi)容不要用JS輸出。
蜘蛛不會讀取JS里的內(nèi)容，所以重要內(nèi)容必須放在HTML里。
注：相關(guān)網(wǎng)站建設(shè)技巧閱讀請移步到建站教程頻道。
