結構化資料SEO 優化顯示搜尋結果

過去，搜尋引擎難以理解網站的內容屬性，這時就依靠結構化資料(structured data)，這是 Google、Yahoo、Bing 等搜尋引擎根據 schema.org 制定的標記，共同的去支援。這些標記多半是關於網站內容的一些分類，麵包屑(breadcrumb)、文章(article)、活動(event)、影片(video)等等。

當你網站有依照規範使用這些標記，就會有助於搜尋引擎理解網站的內容。最重要、也最有回饋感的是，會直接讓網站在搜尋結果顯示更不一樣，間接地幫助提高網站點擊率。google 官方有非常詳盡的支援標籤，以及使用過後搜尋結果的變化。

接下來會分享些使用標籤的範例、心得。

google 介紹 : google structured data info

google 支援標籤 : google support structured data

結構化標記語法

有三種語法可以使用，分別為 JSON-LD(google 推薦)、Microdata、RDFa，JSON-LD 是 javascript 的語法類型，這只是 javascript 的資料所以不會顯示在畫面上，Microdata 則是在 html 上標記，所以就需要依賴實際存在的 html 來加入，RDFa 類似 Microdata，是基於 html5 的標記，但語法與 Microdata 不大相同，但邏輯非常類似。

我個人是比較喜歡用 JSON-LD 的語法，因為比較簡潔好讀寫，看下面範例比較應該很好理解。google 官方是表示三種方法並沒有差異，選擇方便使用的語法即可，但是提醒一下滿多屬性並不支援 Microdata。

稍微介紹一下 JSON 資料的概念，大概就是 key -> value，key 可以當作名稱，value 則當作值。{ } 稱作為物件，相同一筆的資料都會包覆在這個符號內，[ ] 則是代表陣列，多筆資料的意思。

JSON-LD Course 範例

<script type="application/ld+json">
{
  "@context": "http://schema.org/",
  "@type": "schema:Course",
  "name": "The Data Scientist's Toolbox",
  "description": "In this course you will get an introduction
                  to the main tools and ideas in the
                  data scientist's toolbox...",
  "hasCourseInstance": {
    "@type": "CourseInstance",
    "courseMode": ["MOOC","online"],
    "endDate": "March 21",
    "startDate": "February 15"
  }
}
</script>

RDFa Course 範例

<body vocab="http://schema.org/">
  <main typeof="Course">
    <h1 property="name">The Data Scientist's Toolbox</h1>
    <h2>About this Course</h2>
    <p property="description">
      In this course you will get an introduction to the main tools and ideas in
      the data scientist's toolbox...
    </p>
    <div rel="hasCourseInstance" typeof="CourseInstance">
      <meta property="courseMode" content="MOOC" />
      <meta property="courseMode" content="online" />
      <h2>Session dates</h2>
      <span property="startDate">February 15</span> -<span property="endDate">March 21</span>
    </div>
  </main>
</body>

最實用也最常用的莫過於麵包屑了，通常網站內容都會有不同的分類，例如說今天有某篇 ga 的文章歸類在 marketing，那結構大概會是 marketing › {{文章標題}}，俗稱麵包屑。再來來使用 JSON-LD 方法來標記。

首先使用@content 來宣告使用結構化標記，再來以@type 來使用標籤類型 BreadcrumbList，再以陣列[] 來列出多筆，第一筆資料會是 marketing，position 代表排在第一位，name 列上 marketing，item 則列上網址。以此類推往下增加下去，

JSON-LD breadcrumb

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  // use schema type BreadcrumbList
  "@type": "BreadcrumbList",
  // use array as list
  // key name is itemListElement
  "itemListElement": [{
    "@type": "ListItem",
    "position": 1,
    "name": "marketing",
    "item": "https://ianccy.com/categories/marketing/"
  },{
    "@type": "ListItem",
    "position": 2,
    "name": "Google Analytics 工作階段介紹、定義",
    "item": "https://ianccy.com/gasession/"
  }]
}
</script>

測試結構化資料

進入網站 google 測試結構化資料，點擊輸入程式碼片段，輸入剛剛那段 JSON，點擊下方驗證後，就可以看到語法有沒有成功，如果有錯誤的話，上面會提供修正的方式。

之後再進入 search console，提交網站索引或是 sitemap，等待搜尋引擎更新索引就大功告成了。

搜尋結果錨點 (非 structured data)

最後再提供一個最近特別用到修改，下方的搜尋結果出現頁面內的錨點，原本 blog 頁面架構就有用 id 錨點)，查閱結構化資料過後發現，並沒有錨點可以使用的功能，於是我針對搜尋結果有出現錨點的頁面都看過一次 html。

<h2 id="#錨點名稱">{{ content }}</h2>

發現都有相同概念，就是要當你搜尋結果要出現錨點，頁面上就必須要有實體連結可以點過去。於是我就做了頁面左邊的那個點擊 scroll 區塊，大約過了一週後搜尋結果就開始出現錨點。雖然常常一下只顯示麵包屑，一下又只顯示錨點…。

<div class="toc-article" id="toc">
  <div class="toc-title">文章目錄</div>
  <ol class="toc">
    <li class="toc-item toc-level-2">
      <a class="toc-link" href="#Google-analytics-設定事件">
        <span class="toc-text">Google analytics 設定事件</span>
      </a>
    </li>
    <li class="toc-item toc-level-2">
      <a class="toc-link" href="#實作測試">
        <span class="toc-text">實作測試</span>
      </a>
    </li>
    <li class="toc-item toc-level-2">
      <a class="toc-link" href="#ga-event產生器">
        <span class="toc-text">ga event產生器</span>
      </a>
    </li>
    ...
  </ol>
</div>

心得

結構化資料出了大概 3、4 年了，突然想到 search console 有螢光筆工具，它可以直接畫記結構資料屬性，我在 3 年前有用過，完成但搜尋結果並沒任何變化。

剩下還有很多的標籤屬性(event、product、recipe、video、article 等等)，其實也沒有技術難度，就依照官方文件範例照著填入需要的資料就好了，唯一難處可能是缺資料 XD。

再分享個最近實作結構化資料經驗，完成標記提交網站索引後，大概都要一週後才會漸漸地有變化。

結構化標記語法

breadcrumb 標記

測試結構化資料

搜尋結果錨點 (非 structured data)

心得