前端工程師必須要知道的SEO技巧(2):製作比設計還要漂亮的代碼(內容和語義化代碼)上

標籤：

前言:現在的網站設計,大多數不僅僅要求美觀,前端代碼往往發揮著重要的作用.這意味著很大一部分搜尋引擎最佳化或搜尋引擎最佳化責任應該落在設計師身上.然而,有大量的網頁設計師不理解這個問題以及如何在建立一個網站初期就達到是完全的搜尋引擎最佳化.當然,要達到這個高度,肯定離不開學習.需要花費時間使用.

一.製作比設計還要漂亮的代碼(語義化代碼)其實就是在適當的位置使用適當的代碼.

接下來,我舉幾個例子就能明白:

H1~H6標籤多用於標題.

UL標籤多用於無序列表.

OL標籤多用於有序列表.

DL標籤多用於定義資料列表.

stong和em表示強調,意思就是告訴爬蟲這裡是重點.

根據內容的結構化(內容語義化),選擇合適的標籤(代碼語義化)便於開發人員閱讀和寫出更優雅的代碼的同時讓瀏覽器的爬蟲和機器很好地解析.

二.語義化標籤有什麼好處?為什麼要語義化標籤?

一個網頁就好像是一棟房子,HTML結構就是一面面的牆,而標籤則是一塊塊的磚,磚要擺放有序,整整齊齊,牆才會牢固.最後css則是裝飾材料,美不美就靠她了.因此,我們要有一個優秀的網頁,既要提供一個乾淨而又有清晰結構的HTML,更加離不開css的極致美化.

從上面也說明標籤語義化極其重要,HTML每個標籤都有自己的語義,都有自己適用的範圍.但往往會被我們忽略或者被我們濫用,舉個例子:在一個頁面中<div>用了幾十個甚至上百個,這是個無意義的標籤,只是表示一個層而已,非常不利於後期的維護;而<table>標籤則是一個資料標籤，該用的時候,我們就要大膽使用.

標籤語義化的好處

1.去掉或樣式丟失的時候能讓頁面呈現清晰的結構:

html本身是沒有表現的,我們看到例如<h1>是粗體,字型大小2em,加粗；

<strong>是加粗的,不要認為這是 html的表現,這些其實html預設的css樣式在起作用,所以去掉或樣式丟失的時候能讓頁面呈現清晰的結構不是語義化的HTML結構的優點，但是瀏覽器都有有預設樣式,預設樣式的目的也是為了更好的表達html的語義,可以說瀏覽器的預設樣式和語義化的HTML結構是不可分割的.

2.螢幕助讀程式(如果訪客有視障)會完全根據你的標記來"讀"你的網頁.

例如,如果你使用的含語義的標記,螢幕助讀程式就會"逐個拼出"你的單詞,而不是試著去對它完整發音.

3.PDA、手機等裝置可能無法像普通電腦的瀏覽器一樣來渲染網頁（通常是因為這些裝置對CSS的支援較弱）.

使用語義標記可以確保這些裝置以一種有意義的方式來渲染網頁.理想情況下,觀看裝置的任務是符合裝置本身的條件來渲染網頁.

語義標記為裝置提供了所需的相關資訊,就省去了你自己去考慮所有可能的顯示情況（包括現有的或者將來新的裝置）.例如,一部手機可以選擇使一區段標記 了標題的文字以粗體顯示.而掌上型電腦可能會以比較大的字型來顯示.無論哪種方式一旦你對文本標記為標題,您就可以確信讀取裝置將根據其自身的條件來合適地 顯示頁面.

4.搜尋引擎的爬蟲也依賴於標記來確定上下文和各個關鍵字的權重.

過去你可能還沒有考慮搜尋引擎的爬蟲也是網站的"訪客",但現在它們他們實際上是極其寶貴的使用者.沒有他們的話,搜尋引擎將無法索引你的網站,然後一般使用者將很難過來訪問.

5.你的頁面是否對爬蟲容易理解非常重要,因為爬蟲很大程度上會忽略用於表現的標記,而只注重語義標記.

因此,如果分頁檔的標題被標記,而不是,那麼這個頁面在搜尋結果的位置可能會比較靠後.除了提升易用性外,語義標記有利於正確使用CSS和JavaScript,因為其本身提供了許多"鉤鉤"來應用頁面的樣式與行為.
SEO主要還是靠你網站的內容和外部連結的.

6.便於團隊開發和維護

W3C給我們定了一個很好的標準,在團隊中大家都遵循這個標準,可以減少很多差異化的東西,方便開發和維護,提高開發效率,甚至實現模組化開發.

三.我們應該怎麼做?

1.儘可能的少使用無語義的標籤:div和span

2.語義不明顯時,既可以使用div也可以使用p,盡量使用p,因為p在預設的情況下有上下間距,對相容特殊終端有利;

3.不要使用純樣式標籤:b,font,u,i,del,要用css設定.

4.需要強調的文本,可以包含在strong或者em標籤中(瀏覽器預設樣式,能用CSS指定就不用他們),strong預設樣式是加粗(不要用b)，em是斜體(不用i)；

5.使用表格時,標題要用caption,表頭用thead,主體部分用tbody包圍,尾部用tfoot包圍.表頭和一般儲存格要區分開,表頭用th,儲存格用td;

6.表單域要用fieldset標籤包起來,並用legend標籤說明表單的用途;

7.每個input標籤對應的說明文本都需要使用label標籤,並且通過為input設定id屬性,在lable標籤中設定for=someld來讓說明文本和相對應的input關聯起來.

前端工程師必須要知道的SEO技巧(2):製作比設計還要漂亮的代碼(內容和語義化代碼)上