前端工程師必須要知道的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關聯起來.