SEO（search engine optimization，SEO）是傳說中的SEO，指的是通過優化行為來增加自然搜索結果中包含的頁面數，提高搜索引擎的排名地位。我認為這是一種說起來簡單，但操作復雜的技術。它只能被理解而不能表達。作為一個前端工程師，你不需要精通SEO，但你必須了解它。SEO有一個不變的原則，它總是在變化，因為沒有固定的優化方案，每個人都可以應用。但我們仍然可以找到一些基本的或公認的規則來進行網站SEO。更重要的是，我們應該有自己的實踐，不斷為自己找到有效的SEO方法。

前端是網站建設中非常重要的一個環節，本文著重從前端的角度闡述SEO的實現。前端工作主要負責HTML+CSS+JS頁面，優化這些方面將為SEO工作打下堅實的基礎。突出重要內容可以讓搜索引擎判斷當前頁面是什么，提高網站訪問速度可以讓搜索引擎的蜘蛛順暢、快速、大量地抓取網頁內容，所以我將重點突出重要內容和提高網站速度進行總結。

從宏觀上看，我認為SEO有三個最重要的規律，即原創內容、高質量的外部鏈接和持續適度的優化。

合理的標題、描述和關鍵詞

標題：強調重點。重要關鍵字出現次數不應超過2次。另外，每頁的標題應該有所不同，如下圖所示：

雖然對這三個項目的搜索權重逐漸降低，但我們還是希望能合理地寫出來，只寫有用的東西。我們不應該在這里寫小說，而應該表達重點。

描述：在這里總結網頁的內容。長度要合理，關鍵字不要堆積太多。每一頁的描述應該是不同的，如下圖所示：

編寫HTML代碼在語義上符合W3C標準。

關鍵詞：列出幾個關鍵詞，但不要堆積太多。

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

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

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

搜索引擎不會抓取iframe中的內容，重要內容不應該放在框架中。

當網絡速度很慢，或者圖像地址無效時，可以反映alt屬性的作用。當圖像未顯示時，它可以讓用戶知道圖像的角色。

當可以顯示圖片時：

當圖片無法顯示時：

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

例如，在這里的“電視劇分類”中，為了還原設計圖，前端工程師可以制作文本背景圖像，然后使用樣式將HTML中文本的縮進量設置為足夠大的負數以偏離瀏覽器，或者使用設置行高的方法來隱藏文本。注：不可用顯示：無；因為搜索引擎會過濾掉顯示：無；里面的內容不會被蜘蛛搜索。