代碼語義化提高網站對搜尋引擎的友好度

仲介交易 HTTP://www.aliyun.com/zixun/aggregation/6858.html">SEO診斷 淘寶客 雲主機 技術大廳

近幾日多用了點心在工作室小站——悠然天空工作室(L-SKY. STUDIO)上面，以前一直不重視它主要是因為客戶幾乎都是來自線下，弄個小站的目的僅僅是給自己一個空間，「為所欲為」罷了!回到家20多天了，前期一直在弄團隊博客——青裝行銷策劃機構，百度已經開始收錄了， 希望過年這段時間大家也別放鬆，多多給力才好!

這幾天給工作室的後臺添加了線上生成Robots.txt檔和線上訪客這兩個功能，測試了一段時間發現各家蜘蛛大神來我這裡還是比較勤快的，尤其是雅虎中國和百度，不過基本上都是首頁，內鏈的比較少。 前幾天在寫蜘蛛爬行記錄功能的時候，一不小心把百度和谷歌兩家的蜘蛛關在門外了，搞的平日2天一更新的快照到現在都5天了還不更新!為了吸引蜘蛛大大們的照顧，重新把前臺的代碼翻了出來，結合《搜尋引擎優化的一些規則》 一文裡面的要點對代碼整體進行了優化。 請注意：我下面要說的其實並不是SEO優化，如果你想學習SEO優化、行銷策劃等知識，請移步我們的團隊博客——青裝行銷策劃機構，那裡絕對有你想要的一切!

這次我做的站內優化重中之重其實就是下面一點：

代碼語義化

代碼語義化，絕對算得上一個老生常談的問題了。 百度一下，你會發現大把的關於代碼語義化的文章。 那麼，為什麼要語義化代碼?其實我們知道html裡面的每一個標籤都有它自己的特定意義，而語義化這些標籤的意思，就是要我們在適當的位置使用合適的標籤，以此達到更好的讓人和機器(這裡說的機器可以理解為搜尋引擎的蜘蛛大神們) 都一目了然。 更多資訊請前往我們的團隊博客瞭解......

如何在適當的位置使用合適的標籤?

這是一個簡單的理解邏輯。 比如，h1~h6標籤是用於標題類的;ul是用於無序清單的;ol是用於有充清單的;dl是用於定義清單的;em，strong標籤是用來強調的... 說白了，HTML標籤的每個英文釋義決定了它的語義(本文後面，我會放一份常用HTML標籤的英文釋義對照表供參考)。

什麼樣的代碼才可以讓人和機器都能一目了然?

檢查HTML頁面是否語義化最好的方法，便是去掉頁面的CSS連結，看網頁結構是否井然有序，頁面是否仍然有很好的可讀性。 為什麼可以這麼說?大家都知道瀏覽器都有預設的樣式(推薦使用Chrome的Web Developer Tools for Chrome 外掛程式，或者Firefox的Web Developer 外掛程式)，比如h1~h6，會有加粗/字型大小依次減小 、上下邊距的預設樣式，ul、ol、dl都有預設的專案符號，strong預設有加粗的樣式... 所以，同樣的頁面，語義化良好的HTML可以在頁面CSS去掉的情況下依然有良好的表現。

還有一點，好的語義化編碼，對搜尋引擎有更好的友好性。 搜索蜘蛛是不認識你的CSS的，但它能識別HTML標籤。

下面是一個簡單的例子：

通過上面的簡單的示例和沒有任何CSS定義情況下的效果圖，該明白了兩者的區別了吧。 如果你在學習HTML5，它的header、footer、sidebar、article等元素都是新增的語義化標籤.

HTML編碼語義化是邁向高品質前端開發的一步。 即更好的遵循Web標準，也能讓你頁面在去掉樣式後依然井然有序。 關於語義化更多更詳細的介紹，可以自行Google或閱讀阿當的《Web前端開發修煉之道》 第三章。

附: 標籤語義中英文對照表(刪除線為html5不支援的標籤)

如果無視標籤語義和預設樣式，所有標籤都用div，其實也是可以寫出來視覺效果很好的頁面，只要你靈活運用CSS。 但是那樣的話雖然視覺上達到了要求，但是整個頁面一點語義都沒有，搜尋引擎還是看不懂。 所以，要記住：

結構(html)才是重點，樣式(css)是用來修飾結構的。 所以，要先確定html，確定標籤，再來選用合適的css。

一般來說，所有的標籤都會有一個預設的樣式，所以一個簡單的判斷網頁標籤語義是否良好的方法就是：去掉樣式，看網頁結構是否組織良好有序，是否仍然有很好的可讀性。

另外，值得重點提及的是h標籤，h標籤的語意是標題，搜尋引擎對這個標籤比較敏感，特別是h1和h2。 一個語義良好的頁面，h標籤應該是完整有序沒有斷層的。 也就是說，要h1，h2，h3，h4這樣推下來，不要h1，h3，h4，漏掉h2。 一個結構良好的網頁，h標籤可以組織起一個網頁的大綱。

本文由　悠然白鹿原創 轉載請保留原文位址：HTTP://www.28sem.com/blog/rumen/669.html，歡迎加入，青裝行銷策劃交流群共同交流學習：36936294