【教學】教你如何使用 Google Search 結構化資料－橘子亂說話

網頁上線時，大家都會想讓網頁曝光率增加，在台灣最常被使用的兩個搜尋引擎分別為Google與Yahoo，但想在搜尋引擎上的排名增加也需要其他的技巧，各位可以搜尋一下SEO( search engine optimization )，今天我特別選擇了結構化資料來介紹給大家參考囉 !

資料來源 : Members , Inside

Google在台灣的市占率高達83.4%，所以我們要盡可能的要讓網站被Google搜尋到。

以下幾個步驟，教大家使用結構化資料協助你的網站達到最佳的搜尋效果。

1. 將網站加入Google Search Console

首先我們先透過 submit-url 將網站加入Google搜尋中

加入後，你就可以透過Search Console看到網頁目前的狀態囉！不過網站並不會馬上能被Google搜尋的到，需要等待一段時間等候Googlebot分析過你的網站後才會出現在搜尋結果中。

2. 在HTML中加入結構化資料

先來介紹一下什麼是結構化資料吧!

利用Google搜尋的時候除了會出現網站的標題外還會出現其他的相關資訊，例如地址、電話、評分等等，這些資訊有時候能透過Google爬蟲自動幫你產生，有時候只能靠自己加入結構化資料才能出現。

結構化資料有Microdata, JSON-LD, RDFa 等格式，本篇會介紹Microdata和JSON-LD這兩種格式，我覺得JSON-LD因為是json的格式，所以比起Microdata更易懂且容易維護變更，就連schema.org, Google也推薦各位潮潮使用JSON-LD呢!，廢話不多說，趕緊來看下面的介紹吧!

Microdata

以下來介紹一些主要屬性 :

itemscope : 將html內的attribute定義為item
itemprop : 描述item的屬性
itemtype : 定義item的種類(在schema.org中有各種類的介紹)

接下來我們使用Wikipedia的例子講解，說明如何用Microdata去描述種類為Person的範例。

<section itemscope itemtype="http://schema.org/Person">
  Hello, my name is
  <span itemprop="name">John Doe</span>,
  I am a
  <span itemprop="jobTitle">Graduate research assistant</span>
  at the
  <span itemprop="affiliation">University of Dreams</span>
  My friends call me
  <span itemprop="additionalName">Johnny</span>
  You can visit my homepage at
  <a href="http://www.example.com.com" itemprop="url">www.example.com</a>
  <section itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
    I live at
    <span itemprop="streetAddress">1234 Peach Drive</span>
    <span itemprop="addressLocality">Warner Robins</span>
    <span itemprop="addressRegion">Georgia</span>.
  </section>
</section>

首先我們可以看到第一列<section>中有兩個屬性，分別為itemscope和itemtype="http://schema.org/Person"

在itemtype中定義item為Person。

之後可以利用剛剛提到的schema.org，搜尋Person種類中有包含哪些屬性可以利用。

而wikipedie的範例中，使用name, jobTitle, affiliation等屬性來描述Person。

將itemprop="name"設為John Doe

itemprop="jobTitle"設為Graduate research assistant

itemprop="affiliation"設為University of Dreams 以此類推

<span itemprop="name">John Doe</span>,
  I am a
<span itemprop="jobTitle">Graduate research assistant</span>
  at the
<span itemprop="affiliation">University of Dreams</span>
  My friends call me

完成Microdata加入html的工作後，我們可以使用結構化測試工具藉由網址或程式碼測試屬性設定是否正確。

這次我使用程式碼片段，輸入剛剛的範例後得到的結果為下圖。

JSON-LD

相較於Microdata而言，JSON-LD的確簡潔的多，你只要在html的head內插入一段script就完成囉！

對於初學者而言，要使用這個格式必須先將json的階層關係釐清，之後再使用上面提到的schema.org找到自己網站適合的種類後根選擇屬性使用，接下來仍然用同個範例，只不過使用JSON-LD來˙完成我們的結構化資料吧！

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "Person",
  "name": "John Doe",
  "jobTitle": "Graduate research assistant",
  "affiliation": "University of Dreams",
  "additionalName": "Johnny",
  "url": "http://www.example.com",
  "address": {
    "@type": "PostalAddress",
    "streetAddress": "1234 Peach Drive",
    "addressLocality": "Wonderland",
    "addressRegion": "Georgia"
  }
}
</script>

要使用JSON-LD時，先在<script>內加入type="application/ld+json"，之後填入必要的屬性@context, @type，context用來定義JSON-LD使用的各個類別，type則是選擇schema.org中有提到的種類，例如: Restaurant, Organization, Product等，而後面的屬性像"name","jobTitle","affiliation"等都可以根據裡面的描述填入對應的格式。