接下來的連續三集都會跟 語意標記(Semantic Markup) 有關係。 語意標記是指網頁內容的標記,他能夠讓搜尋引擎了解網頁的內容是在寫什麼。

語意標記範例

語意標記有很多種撰寫方式,例如 HTML5 語意標記、Schema 語意標記等等,這些都會在後兩集慢慢說明。 今天先用 Schema 語意標記 Microdata 的方式舉例。

請看下方範例程式碼,itemprop 的部分。

  • itemprop="moveName" 說明這段文字是電影名稱
  • itemprop="director" 說明這段文字是導演
  • itemprop="genre" 說明這段文字是分類
  • itemprop="trailer 說明這連結是預告片
Semantic Markup
  • html
1
2
3
4
5
6
7
8
<div>
<h1 itemprop="moveName">Avatar</h1>
<span>Director:
<span itemprop="director">James Cameron</span> (born August 16, 1954)
</span>
<span itemprop="genre">Science fiction</span>
<a href="../movies/avatar-theatrical-trailer.html" itemprop="trailer">Trailer</a>
</div>

有了這些語意標記,搜尋引擎更能理解網頁裡面文字的內容,然後就可以正確的索引與分類。

資料螢光筆

對於程式不熟悉的人,Google 有推出 資料螢光筆。 資料螢光筆能夠在沒有語意標記的情況下,事後在 Google Search Console 裡面對該網頁做語意標記。 實際上怎麼做可以參考 建立包含單一網頁的網頁集

如果使用 Google 資料螢光筆做語意標記,這種語意標記只有 Google 搜尋引擎會知道,其他的搜尋引擎並不知情。

延伸閱讀

[A free guide to HTML5 head elements]