語意網，或者也有人稱為語義網，都是英文 semantic web 的翻譯，指的是在 html 內埋入一些定義好的標籤，這些定義好的標籤裡面有可以讓機器更容易理解網頁的內容，也就是語意，這整件事就稱為語意網。
語意網的概念一直到今天都還存在，不過換了個名字，現在埋語意標籤這件事一般稱為 SEO，目的也更明確，就是盡可能的讓搜尋引擎讀懂我的網頁，並更準確的對應到潛在訪客的關鍵字搜尋結果內，最終就是要爭取更多的訪客，不過本人是個老派的人，在本文還是用語意網稱之。
語意網要埋入的標籤，實做的規範很多，並未統一，甚至 HTML5 也加上了 <main>、<section>、<article>、<aside>、<nav> 等一系列標籤試圖讓 HTML 本身就可以語義化，不過事實證明這些在外觀和行為上和 <div> 一模一樣的標籤根本對幫助機器理解網頁這件事起不了作用，因為規範上對於標籤用法訂的過於寬鬆，導致沒有人知道怎麼用才叫正確，所以可以說人人都正確，也可以說人人都不正確，可是對爬蟲來說，這樣鬆散的標籤使用方式還是無法讓爬蟲正確的理解網頁的架構與內容。
語意標籤除了給爬蟲讀優化 SEO 外，還有為障礙人士埋入的輔助標籤也是一種，這些標籤讓障礙人士的輔助設備可以更好的把網頁的理解那些是控制元素（導覽、按鈕等等）哪些是內容，這一系列統稱為 ARIA 屬性，透過把 ARIA 屬性附加在 HTML 標籤內，就可以讓障礙人士的輔助設備理解網頁的架構。
除了上面提到的 HTML5 語意標籤與 ARIA 屬性外，目前真正實際被廣泛採納的語意標籤系統是 Schema.org 與 Open Graph。
Schema.org
Schema.org 是由 Google、Microsoft、Yahoo、Yandex 一起成立的組織，他們定義了八百多種的結構化欄位格式（schema），包括文章、新聞、電影、書籍、音樂、網誌、網站、活動等等，而 schema 的撰寫格式（syntax）可以是 RDFa、Microdata 與 JSON-LD。
Schema / Syntax
中文說的「格式」在資訊領域可能對應到三個不同的英文單詞－format / schema / syntax。
- Format
- 指的是檔案的格式，以影片為例，檔案格式會有 .mov、.mp4 等。
- Schema
- 指的是資料欄位的定義，以通訊錄來說，會有姓名、電話、地址、年齡等欄位，而各個欄位又有自己的欄位定義，譬如說電話欄位只能是數字或符號，不能是文字；年齡欄位只能是整數。 更進階的會牽涉到欄位的歸納與分組，也就是關聯式資料庫的領域。
- Syntax
- 指的是語法格式，延續上面的通訊錄例子，這些欄位定義可以用不同的語法規範撰寫，可能是 JSON 或 XML 或 SQL 等。
在實務上，JSON-LD 已經是目前的主流，所以可以無視其它的選項。
雖然 Schema.org 定義了八百多種 schema，但 Google 只採用幾十種，Google 不認得的，除非是自有其它用途，否則看起來完全沒有實用價值。
Open Graph
Facebook 無視於現成的 Schema.org 而自行成立了 Open Graph。Open Graph 因為臉書的關係，也是目前主流標準之一，語法以 HTML 為基礎，比 JSON-LD 更為簡單易讀也易寫。
Open Graph 只有四個基礎欄位－title、type、image、url，範本也很簡單：
<html prefix="og: http://ogp.me/ns#">
<head>
<title>The Rock (1996)</title>
<meta property="og:title" content="The Rock" />
<meta property="og:type" content="video.movie" />
<meta property="og:url" content="http://www.imdb.com/title/tt0117500/" />
<meta property="og:image" content="http://ia.media-imdb.com/images/rock.jpg" />
...
</head>
...
</html>
Open Graph 標籤內定義的內容具體會影響網頁被貼進 Facebook 後會呈現的樣貌，而 Open Graph 雖然簡單，但相較於 Schema.org 還是有所不足，以目前的業界需求來說，在臉書放產品貼文是非常普遍的需求，但 Open Graph 卻缺少了 product 這類的 type，所以要打產品的，在臉書還是只能用 Facebook Marketplace 或 Facebook Shops。
更新
Open Graph 有 product type，不過定義在 Facebook 自己的文件內。
其它
除了 Schema.org 和 Open Graph，越來越多台灣人用的 Twitter 也有自己的標籤系統 Twitter Cards，Twitter Cards 相容於 Open Graph，意思是 Twitter 爬蟲找不到 Twitter Cards 標籤的情況下會去找 Open Graph 的標籤，所以不用特別為 Twitter Card 埋入標籤。
第三方工具
前面講了這麼多格式，其實不用靠自己手工製作埋入網頁，有許多現成的第三方服務可以幫我們把這些格式產生出來，隨便找一下就有：
結語
Schema.org 和 Open Graph 都是目前在網頁內埋入的語意格式的主流，它們能讓 Google 和 Facebook 更精確的解讀網頁的內容，對有心經營網站的人來說是必須加入的元素。
Top comments (0)