SEO（search engine optimization，SEO）是傳說(shuō)中的SEO，指的是通過(guò)優(yōu)化行為來(lái)增加自然搜索結(jié)果中包含的頁(yè)面數(shù)，提高搜索引擎的排名地位。我認(rèn)為這是一種說(shuō)起來(lái)簡(jiǎn)單，但操作復(fù)雜的技術(shù)。它只能被理解而不能表達(dá)。作為一個(gè)前端工程師，你不需要精通SEO，但你必須了解它。SEO有一個(gè)不變的原則，它總是在變化，因?yàn)闆](méi)有固定的優(yōu)化方案，每個(gè)人都可以應(yīng)用。但我們?nèi)匀豢梢哉业揭恍┗镜幕蚬J(rèn)的規(guī)則來(lái)進(jìn)行網(wǎng)站SEO。更重要的是，我們應(yīng)該有自己的實(shí)踐，不斷為自己找到有效的SEO方法。
前端是網(wǎng)站建設(shè)中非常重要的一個(gè)環(huán)節(jié)，本文著重從前端的角度闡述SEO的實(shí)現(xiàn)。前端工作主要負(fù)責(zé)HTML+CSS+JS頁(yè)面，優(yōu)化這些方面將為SEO工作打下堅(jiān)實(shí)的基礎(chǔ)。突出重要內(nèi)容可以讓搜索引擎判斷當(dāng)前頁(yè)面是什么，提高網(wǎng)站訪問(wèn)速度可以讓搜索引擎的蜘蛛順暢、快速、大量地抓取網(wǎng)頁(yè)內(nèi)容，所以我將重點(diǎn)突出重要內(nèi)容和提高網(wǎng)站速度進(jìn)行總結(jié)。
從宏觀上看，我認(rèn)為SEO有三個(gè)最重要的規(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)超過(guò)2次。另外，每頁(yè)的標(biāo)題應(yīng)該有所不同，如下圖所示：
雖然對(duì)這三個(gè)項(xiàng)目的搜索權(quán)重逐漸降低，但我們還是希望能合理地寫(xiě)出來(lái)，只寫(xiě)有用的東西。我們不應(yīng)該在這里寫(xiě)小說(shuō)，而應(yīng)該表達(dá)重點(diǎn)。
描述：在這里總結(jié)網(wǎng)頁(yè)的內(nèi)容。長(zhǎng)度要合理，關(guān)鍵字不要堆積太多。每一頁(yè)的描述應(yīng)該是不同的，如下圖所示：
編寫(xiě)HTML代碼在語(yǔ)義上符合W3C標(biāo)準(zhǔn)。
關(guān)鍵詞：列出幾個(gè)關(guān)鍵詞，但不要堆積太多。
對(duì)于搜索引擎來(lái)說(shuō)，最直接面對(duì)的是網(wǎng)頁(yè)的HTML代碼，如果代碼是按語(yǔ)義編寫(xiě)的，搜索引擎很容易理解網(wǎng)頁(yè)的意思來(lái)表達(dá)。例如，文本模塊應(yīng)該有大標(biāo)題，合理使用h1-h6，列表代碼使用UL或ol，重要文本使用強(qiáng)等。當(dāng)然，chrome和chrome的主要工作就是充分利用各種瀏覽器標(biāo)簽。
搜索引擎從上到下獲取HTML內(nèi)容。使用這個(gè)特性，我們可以讓代碼先讀，而不重要的代碼，例如廣告，放在底部。例如，如果左右列中的代碼保持不變，只需更改樣式并使用浮動(dòng)：左；以及浮動(dòng)：右；你可以隨意交換兩列在顯示屏上的位置，以確保重要代碼在最上面，讓爬蟲(chóng)先抓取。這同樣適用于多個(gè)列的情況。
spider不讀取JS中的內(nèi)容，所以重要的內(nèi)容必須放在HTML中。
搜索引擎不會(huì)抓取iframe中的內(nèi)容，重要內(nèi)容不應(yīng)該放在框架中。
當(dāng)網(wǎng)絡(luò)速度很慢，或者圖像地址無(wú)效時(shí)，可以反映alt屬性的作用。當(dāng)圖像未顯示時(shí)，它可以讓用戶(hù)知道圖像的角色。
當(dāng)可以顯示圖片時(shí)：
當(dāng)圖片無(wú)法顯示時(shí)：
如果需要考慮用戶(hù)體驗(yàn)和SEO效果，我們可以使用樣式控制使文本文本不出現(xiàn)在瀏覽器中，但是標(biāo)題包含在網(wǎng)頁(yè)代碼中必須使用圖片的地方，比如個(gè)性化的字體標(biāo)題。
例如，在這里的“電視劇分類(lèi)”中，為了還原設(shè)計(jì)圖，前端工程師可以制作文本背景圖像，然后使用樣式將HTML中文本的縮進(jìn)量設(shè)置為足夠大的負(fù)數(shù)以偏離瀏覽器，或者使用設(shè)置行高的方法來(lái)隱藏文本。注：不可用顯示：無(wú)；因?yàn)樗阉饕鏁?huì)過(guò)濾掉顯示：無(wú)；里面的內(nèi)容不會(huì)被蜘蛛搜索。