[SEO專欄] 想做好網站優化？先學會Semantic HTML吧。

這幾日過往的「戰友」Friday所發表的Facebook新Graph API推出 – 你打算跟魔鬼做交易了嗎？著實引起不小的迴響，果然扯到資安問題，文章就會引起相當大的反應啊！由此可見在網路的世界裡，FUD（Fear, uncertainty, and doubt，恐懼、不確定、懷疑）策略對於一般的網路使用者還是很有效的。

不過今天要聊的不是資安問題，而是從其中的一個名詞：Semantic Web中的"Semantic"開始講起。

Semantic一詞在中文直譯為「語意」，不過這裡的「語意」非語言中的「語意」，而是讓你所撰寫的電子資訊，可以讓人類能夠清楚理解，同時也適合被機器或程式處理之。其實這一點就跟網站優化的目的相同：

可以讓人類能夠清楚理解 - SMO
適合被機器或程式處理 - SEO

然而在SEO的領域裡，撰寫Semantic HTML的觀念是基本中的基本。不論是怎樣的網站，目前最終的共通語言還是HTML，但是近年來Dreamweaver的發展及CMS程式（Content management system，泛指Wordpres、Joolma等套裝架站程式）的興起，「做出」一個網站似乎是越來越簡單的一件事情。但看在我這個當年是一筆一劃，用記事本刻出一個網站的人來說，著實覺得現在的網站對於HTML的結構及語法真的是越來越不重視。

在搜索引擎的眼中，你的網站是長得如右圖一樣，沒有漂亮的底圖、沒有花花綠綠的文字編排，只有一連串的程式語法。在小說「亦恕與珂雪」中有一段這樣對厲害畫家的敘述：『厲害的畫家，畫風時，會讓人感覺一股被風吹過的涼意；畫雨時，會讓人覺得好像淋了雨，全身溼答答的；而畫閃電時，會讓人瞬間全身發麻，好像被電到一樣。』

我有時候會笑說，身為一個網站優化的工作者，對於一般的使用者，就像是幫網站做美容一般，讓她到社會上的時候，每個人都想要看她；而對於搜索引擎來說，就是幫她充實她的內涵，並且讓搜索引擎很快的就能知道她不是只有外在而已，內在也是非常清楚的就能夠馬上觀察的到。外在的美容就是要靠SMO的設計，而內涵的基礎就是Semantic HTML，也就是「語意明確的HTML」如果你的網站是要描繪一場雨景，但卻沒辦法讓搜索引擎一看就感覺全身濕答答，那你的搜索引擎排名就會往後掉了。因為對於搜索引擎而言，你不是一個厲害的畫家。

那Semantic HTML很難編輯嘛？其實不然，最簡單的準則其實就在我們的身邊：現在請拿起你手邊的任何一本書，你會發現裡面的排版都是井然有序的，從大標題、中標題、小標題依序引導著你的閱讀；然後有些書籍（尤其是參考書）在重要的地方，還會幫你加粗、加底線或是以斜體的方式呈現；而且絕大多數的圖都會有圖片說明，如果有需要名詞解釋的地方，還會導引你要翻到哪一頁，去看哪個標題的解釋，這樣的一本書閱讀起來，一定相對的輕鬆，而不會無所適從。

講到這，先想想看，你的網站結構必須要具備哪些條件了？想好了，再繼續看下去吧。

Semantic HTML必備元素

因為搜索引擎不是人，她並不懂你網站中文字的意思是什麼，她會的只是整理跟歸納而已。所以你的HTML結構中，就必須先幫搜索引擎劃重點。至於該怎麼劃呢？HTML中有許多標籤性的功能的語法，你真的都要會，以下小黑整理幾個比較重要的語法：

Headings：也就是 h1~ h6，標籤數字越小層級越高，這就有如書本中或是報紙的大中小標題一般。被標示為 h1（大標題）通常是很醒目的目標，一定是具代表性的意義的文字，於是搜索引擎就會特別注意 h1標籤內的字。

所以在操作SEO的時候，網站或是每篇文章的重要關鍵字，一定是要被包在h1標籤中的。
b v.s strong 跟 i v.s em：b 跟strong的最後呈現的效果都是將字體加粗；而i跟em則是產生斜體的效果。但是其中有什麼差別呢？就W3C的準則而言：

I: Renders as italic text style.
B: Renders as bold text style. [w3c.org]
EM:Indicates emphasis.
STRONG:Indicates stronger emphasis. [w3c.org]

所以我們很清楚的看出，em跟strong除了在字體上有所改變之外，還附加了"emphasis（強調）"的意義。所以在內文重要關鍵字上，用em跟strong把它劃上重點吧。
Alt：這是附屬在img標籤裡面的屬性，因為搜索引擎看到的都是程式碼，alt的功用就是幫圖附上註解，讓搜索引擎知道，這張圖是在說什麼。

以上是基礎中的基礎，要做好SEO事實上並沒有那麼困難，出發點就是讓人及搜尋引擎能夠輕鬆的看懂你的網站，就是好的網站優化。目前我比較滿意符合Semantic HTML結構又是免費的BSP還是痞客邦，部落格名稱用h1標記、文章標題用h2；不用b跟i標籤而是strong跟em；圖片加上註解方式簡單，在在都符合Semantic HTML要求。如果你不是自己刻HTML的話，Pixnet會是你的好朋友。

留言