[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中有許多標籤性的功能的語法,你真的都要會,以下小黑整理幾個比較重要的語法:
  1. Headings:也就是 h1~  h6,標籤數字越小層級越高,這就有如書本中或是報紙的大中小標題一般。被標示為 h1(大標題)通常是很醒目的目標,一定是具代表性的意義的文字,於是搜索引擎就會特別注意 h1標籤內的字。

    所以在操作SEO的時候,網站或是每篇文章的重要關鍵字,一定是要被包在h1標籤中的。

  2. b v.s strongi 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把它劃上重點吧。

  3. Alt:這是附屬在img標籤裡面的屬性,因為搜索引擎看到的都是程式碼,alt的功用就是幫圖附上註解,讓搜索引擎知道,這張圖是在說什麼。
以上是基礎中的基礎,要做好SEO事實上並沒有那麼困難,出發點就是讓人及搜尋引擎能夠輕鬆的看懂你的網站,就是好的網站優化。目前我比較滿意符合Semantic HTML結構又是免費的BSP還是痞客邦,部落格名稱用h1標記、文章標題用h2;不用b跟i標籤而是strong跟em;圖片加上註解方式簡單,在在都符合Semantic HTML要求。如果你不是自己刻HTML的話,Pixnet會是你的好朋友。

留言