接下來的連續三集都會跟 語意標記(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]