使用 JSON-LD 處理 SEO，並讓 Google 針對不同形式網站做獨特的搜尋結果呈現

6 min readMar 28, 2019

最近在開發 AMP 時才發現到 JSON-LD 這東西，又為了要處理 SEO 所以特別去看了一下怎麼使用，又剛好這兩天看到幾篇關於 Google for Jobs 在台灣上線的文章…

Google 整合 104, 1111, 518… 數十萬職缺，幫你找工作！ —— 重灌狂人
現在只要同樣在搜尋列輸入「職務別＋工作／職缺」關鍵字，就可以快速搜尋到包含熱門網站、人力資源網和企業官網在內的各類職缺。目前搜尋結果提供數十萬個職缺，合作平台包括國內常用的104人力銀行、1111人力銀行、518人力銀行、yes123求職網，另外也囊括Linkedin、MichaelPage、Jobs77.com以及recruit.net等國際人力資源網的搜尋結果 —— 聯合新聞網

等等，Google 有可能這麼佛心去看你各家求職網有哪些資料、要怎麼撈然後做整合嗎？當然不是

何謂 JSON-LD

全名為 JavaScript Object Notation for Linked Data，JSON 是什麼就不多解釋了，而 JSON-LD 即是 JSON 格式的結構化資料，簡單來說就是在描述這個網頁的型態及內容，然而 Google 會去讀取網頁中這樣的結構化資料，並能針對不同的網頁型態做對應的搜尋結果呈現

如何使用

只需要在你的頁面中如下方式加入結構化資料即可

<script type="application/ld+json">
{ /* your structured data */}
</script>

比方說今天我們要促進部落格文章 SEO 及更好的搜尋結果呈現，那就可以在文章頁面中加入 JSON-LD，並提供 文章標題、圖片、摘要、作者、出版 等資訊，最後組合出的結果就像下面這樣

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "NewsArticle",
  "mainEntityOfPage": {
    "@type": "WebPage",
    "@id": "https://google.com/article"
  },
  "headline": "Article headline",
  "image": [
    "https://example.com/photos/1x1/photo.jpg",
    "https://example.com/photos/4x3/photo.jpg",
    "https://example.com/photos/16x9/photo.jpg"
   ],
  "datePublished": "2015-02-05T08:00:00+08:00",
  "dateModified": "2015-02-05T09:20:00+08:00",
  "author": {
    "@type": "Person",
    "name": "John Doe"
  },
   "publisher": {
    "@type": "Organization",
    "name": "Google",
    "logo": {
      "@type": "ImageObject",
      "url": "https://google.com/logo.jpg"
    }
  },
  "description": "A most wonderful article"
}
</script>