SEO（search engine optimization，SEO）是傳說中的SEO，指的是通過優(yōu)化行為來增加自然搜索結(jié)果中包含的頁面數(shù)，提高搜索引擎的排名地位。我認(rèn)為這是一種說起來簡單，但操作復(fù)雜的技術(shù)。它只能被理解而不能表達(dá)。作為一個前端工程師，你不需要精通SEO，但你必須了解它。SEO有一個不變的原則，它總是在變化，因?yàn)闆]有固定的優(yōu)化方案，每個人都可以應(yīng)用。但我們?nèi)匀豢梢哉业揭恍┗镜幕蚬J(rèn)的規(guī)則來進(jìn)行網(wǎng)站SEO。更重要的是，我們應(yīng)該有自己的實(shí)踐，不斷為自己找到有效的SEO方法。

前端是網(wǎng)站建設(shè)中非常重要的一個環(huán)節(jié)，本文著重從前端的角度闡述SEO的實(shí)現(xiàn)。前端工作主要負(fù)責(zé)HTML+CSS+JS頁面，優(yōu)化這些方面將為SEO工作打下堅(jiān)實(shí)的基礎(chǔ)。突出重要內(nèi)容可以讓搜索引擎判斷當(dāng)前頁面是什么，提高網(wǎng)站訪問速度可以讓搜索引擎的蜘蛛順暢、快速、大量地抓取網(wǎng)頁內(nèi)容，所以我將重點(diǎn)突出重要內(nèi)容和提高網(wǎng)站速度進(jìn)行總結(jié)。

從宏觀上看，我認(rèn)為SEO有三個最重要的規(guī)律，即原創(chuàng)內(nèi)容、高質(zhì)量的外部鏈接和持續(xù)適度的優(yōu)化。

合理的標(biāo)題、描述和關(guān)鍵詞

標(biāo)題：強(qiáng)調(diào)重點(diǎn)。重要關(guān)鍵字出現(xiàn)次數(shù)不應(yīng)超過2次。另外，每頁的標(biāo)題應(yīng)該有所不同，如下圖所示：

雖然對這三個項(xiàng)目的搜索權(quán)重逐漸降低，但我們還是希望能合理地寫出來，只寫有用的東西。我們不應(yīng)該在這里寫小說，而應(yīng)該表達(dá)重點(diǎn)。

描述：在這里總結(jié)網(wǎng)頁的內(nèi)容。長度要合理，關(guān)鍵字不要堆積太多。每一頁的描述應(yīng)該是不同的，如下圖所示：

編寫HTML代碼在語義上符合W3C標(biāo)準(zhǔn)。

關(guān)鍵詞：列出幾個關(guān)鍵詞，但不要堆積太多。

對于搜索引擎來說，最直接面對的是網(wǎng)頁的HTML代碼，如果代碼是按語義編寫的，搜索引擎很容易理解網(wǎng)頁的意思來表達(dá)。例如，文本模塊應(yīng)該有大標(biāo)題，合理使用h1-h6，列表代碼使用UL或ol，重要文本使用強(qiáng)等。當(dāng)然，chrome和chrome的主要工作就是充分利用各種瀏覽器標(biāo)簽。

搜索引擎從上到下獲取HTML內(nèi)容。使用這個特性，我們可以讓代碼先讀，而不重要的代碼，例如廣告，放在底部。例如，如果左右列中的代碼保持不變，只需更改樣式并使用浮動：左；以及浮動：右；你可以隨意交換兩列在顯示屏上的位置，以確保重要代碼在最上面，讓爬蟲先抓取。這同樣適用于多個列的情況。

spider不讀取JS中的內(nèi)容，所以重要的內(nèi)容必須放在HTML中。

搜索引擎不會抓取iframe中的內(nèi)容，重要內(nèi)容不應(yīng)該放在框架中。

當(dāng)網(wǎng)絡(luò)速度很慢，或者圖像地址無效時(shí)，可以反映alt屬性的作用。當(dāng)圖像未顯示時(shí)，它可以讓用戶知道圖像的角色。

當(dāng)可以顯示圖片時(shí)：

當(dāng)圖片無法顯示時(shí)：

如果需要考慮用戶體驗(yàn)和SEO效果，我們可以使用樣式控制使文本文本不出現(xiàn)在瀏覽器中，但是標(biāo)題包含在網(wǎng)頁代碼中必須使用圖片的地方，比如個性化的字體標(biāo)題。

例如，在這里的“電視劇分類”中，為了還原設(shè)計(jì)圖，前端工程師可以制作文本背景圖像，然后使用樣式將HTML中文本的縮進(jìn)量設(shè)置為足夠大的負(fù)數(shù)以偏離瀏覽器，或者使用設(shè)置行高的方法來隱藏文本。注：不可用顯示：無；因?yàn)樗阉饕鏁^濾掉顯示：無；里面的內(nèi)容不會被蜘蛛搜索。