結構化資料標記協助工具

結構化資料標記協助工具可協助您為網頁上的元素加上標記,以便 Google 解讀網頁上的資料。一旦 Google 更清楚解讀您的網頁資料,就能在 Google 搜尋中以全新的面貌呈現您的資料,並吸引更多目光。此外,如果您傳送 HTML 格式化的電子郵件給客戶,標記協助工具可示範如何變更電子郵件範本,讓 Gmail 以新穎而實用的方式向使用者呈現電子郵件中的資料。

開啟結構化資料標記協助工具

例如:

  • 活動:如果您標記了您網站上的活動,當 Google 下次檢索您的網站時,這些活動資料就可以顯示在搜尋結果頁面的複合式摘要中。

    針對網頁中多項活動顯示的複合式摘要

  • 電子郵件:如果航班相關電子郵件內含有關機票預訂的標記,Gmail 就能在您的桌面用戶端或個人動態餽給中顯示這些資訊。

    Gmail snippet for a flight reservation.

 

如果您不想為網站新增程式碼,可以改用資料螢光筆

如果您具備技術條件,建議您瞭解結構化資料,並為您的網站手動加上標記。

標記網頁或電子郵件

您可以標記 HTML 網頁或 HTML 電子郵件中的元素。

標記網頁

標記網頁中元素的方法如下。

  1. 開啟結構化資料標記協助工具。
  2. 選取 [網站] 分頁。
  3. 選擇您要標記的網頁類型,例如電影網頁或活動網頁。您可以在單一網頁上標記多個項目,但我們建議所有項目應屬於同一類型 (例如所有電影或所有活動)。
  4. 輸入現有網頁的網址或原始網頁 HTML。如果輸入網址,請確定所有使用者不需登入即可存取網頁 (您可以開啟 Chrome 的無痕式視窗,然後嘗試造訪網頁,藉此測試網頁存取權。如果可以連上網頁,就表示沒問題)。
  5. 按一下 [開始標記]。
  6. 讓網頁上含有重要資訊的部分醒目顯示 (例如活動網頁上的開始時間),然後在顯示的下拉式選單中指出資訊類型 (「開始時間」)。
    1. 如有複雜日期字串,或無法順利標記日期,請參閱進階日期標記
    2. 如要新增網頁中沒有顯示的資訊,請參閱新增缺少的資料
    3. 如要移除結構化資料標記協助工具產生的標記,請參閱移除標記
  7. 請務必為特定資料類型提供所有必要的資訊。 「我的資料項目」窗格中會列出各項目所有可能的值,並標明必要的值。舉例來說,您必須為活動提供活動名稱、地點和開始日期。
  8. 標記完網頁上所有適當的資料後,請選取 [建立 HTML] 來產生網頁程式碼。接著選擇輸出格式:預設值為 JSON-LD (Google 偏好的格式),但您也可以選擇微資料。然後複製並貼上輸出視窗中的程式碼,或是選取 [下載]。程式碼的使用方式取決於格式:
    1. JSON-LD:複製產生的程式碼並貼到現有網頁的主體中。
    2. 微資料:以產生的 HTML 取代您的網頁。
  9. 如要測試程式碼,請複製產生的程式碼並貼到結構化資料標記協助工具中。這項工具會告訴您有無任何未填妥的欄位 (必須提供才能協助 Google 解讀網頁內容),並針對某些類型的資料提供預覽,讓您瞭解網頁在 Google 搜尋結果中的顯示樣貌。
  10. Google 可能需要經過幾週才會找到您的最新網頁程式碼。您的結構化資料會顯示在 Search Console 結構化資料報告中。如果您的資料經過檢索且詳實正確,就會以複合式結果型態顯示。如果您的網站並未以複合式結果型態顯示,請參閱這些可能原因

標記電子郵件

標記 HTML 格式化電子郵件的方法如下:

  1. 開啟結構化資料標記協助工具。
  2. 選取 [電子郵件] 分頁。
  3. 選擇您要標記的資訊類型,例如車票預訂或產品訂單。
  4. 輸入電子郵件的 HTML。
  5. 按一下 [開始標記]。
  6. 讓網頁上含有重要資訊的部分醒目顯示 (例如車票預訂號碼),然後在顯示的下拉式選單中選取資訊類型 (「預訂號碼」)。
    1. 如有複雜日期字串,或無法順利標記日期,請參閱進階日期標記
    2. 如要新增網頁中沒有顯示的資訊,請參閱新增缺少的資料
    3. 如要移除結構化資料標記協助工具產生的標記,請參閱移除標記
  7. 請務必為特定資料類型提供所有必要的資訊。 「我的資料項目」窗格中會列出所有可能的值,並標明必要的值。如果您未提供所有必要的值,Google 將無法處理網頁。
  8. 如果標記的元素旁邊顯示警示圖示 (Alert Icon),請選取圖示旁邊的資料並檢閱標記,然後採取下列其中一種做法:
    • 如果標記不正確,請選取資料旁的 [X],然後重新為該資料加上標記。
    • 如果標記正確,請依序選取警示圖示 (Alert Icon) 和 [清除警告]。
  9. 完成標記後,請選取 [建立 HTML] 來產生要為電子郵件使用的 HTML。預設值為 Google 偏好的 JSON-LD,但您也可以選擇微資料。您可以選取 [下載],也可以直接複製並貼上產生的 HTML。
    1. JSON-LD:複製產生的程式碼並貼到電子郵件的內文中。
    2. 微資料:以產生的 HTML 取代您的電子郵件。
  10. 如要測試程式碼,請將電子郵件傳送至 Gmail 帳戶,或是使用電子郵件架構驗證程式

儲存並繼續編輯網頁或電子郵件

如要儲存標記目前的狀態,請在瀏覽器中為網頁加上書籤。結構化資料標記協助工具會將您的狀態儲存一個月,包括標記的值。

 

移除標記

您可以將結構化資料標記協助工具建立的部分或所有標記復原。

如何清除特定標記:

  1. 選取範例網頁或電子郵件中的標記。
  2. 從選取標記後顯示的彈出式選單中選取 [清除標記]。
您也可以在 [我的資料項目] 欄中找出要清除的資料,然後將滑鼠游標移至該項目上方並選取畫面上顯示的 [X]。

 

如何清除所有標記:

  1. 注意:一旦清除所有標記後即無法復原,只能從頭開始標記。如果您的內容已經有標記,標記協助工具將不會移除現有的標記。清除所有標記的動作只會移除由標記協助工具所新增的標記。
  2. 選取齒輪圖示 設定
  3. 選取 [清除這個網頁上的所有標記]。
進階日期標記

結構化資料標記協助工具可解讀多種日期格式 (必須包含日、月和年)。如要提供任何缺少的資料 (例如年份),您可以將缺少的資料新增至網頁集

如果您的範例內容是將日期顯示為單一項目 (例如,2012 年 6 月 4 日),我們建議您建立單一日期標記。建立的標記越少,標記程序會越迅速,且標記協助工具的正確性也會越高。

建立單一日期標記:

  1. 標記網頁標記電子郵件所述,開始標記資料。
  2. 在「標記工具」頁面中,使用滑鼠選取日期,例如選取下列項目:2012 年 6 月 4 日
  3. 在隨即顯示的內容選單中,依序選取 [日期] > [日期/時間或範圍]。

    標記協助工具會將該日期新增至 [我的資料項目] 欄中。

  4. 標記網頁標記電子郵件所述,完成網頁標記程序。

建立獨立的日期標記

部分內容會將日期資訊顯示為獨立的項目,或是使用標籤來辨識個別日期元件。舉例來說,一個含有多項活動的網頁可能會將年份和月份統一顯示在頂端,然後將活動當日顯示在該活動旁。如果您的內容是將日期顯示為獨立項目,則您必須建立獨立的日期標記。

注意,標記協助工具無法解讀使用獨立項目標記,同時又指定範圍的日期 (例如 6 月 4-5 日2012 年)。

建立獨立的日期標記:

  1. 標記網頁標記電子郵件所述,開始標記資料。
  2. 在「標記工具」頁面中,使用滑鼠選取日期的一部分,例如選取下列項目:6 月
  3. 在隨即顯示的內容選單中,依序選取 [日期] > [進階] > [日期項目]。舉例來說,依序選取 [日期] > [進階] > [月]

    標記協助工具會將該日期新增至 [我的資料項目] 欄中。

  4. 繼續使用該日期項目來為所有適用日期加上標記。
  5. 標記網頁標記電子郵件所述,完成網頁標記程序。

日期標記範例

下列為您可標記的日期範例:

  • 單一日期。舉例來說,您可標記下列任一日期:
    • 6 月 4 日,2012 年
    • 2012 年 6 月 4 日
    • 6/4/12 - 您可標記其他分隔符號和 4 位數年份 (例如 6-4-2012)。當以數字表示的日期不夠明確時,Google 會將第一個數字認定為月份。舉例來說,Google 會將 6/4/12 解讀為 2012 年 6 月 4 日,而將 13/4/12 解讀為 2012 年 4 月 13。
    您可以在網頁上標記多個日期。舉例來說,如果您標記了 2012 年 6 月 4 日2012 年 6 月 6 日,系統會將活動解讀為發生兩次:6 月 4 日和 6 月 6 日各發生一次。
  • 日期範圍。例如 2012 年 6 月 4-7 日
    請注意,連接開始日期和結束日期之間的分隔符號必須為破折號 (-)。
  • 包含時間的日期。舉例來說,您可標記下列任一日期:
    • 2012 年 6 月 4 日下午 3 點:前面加上上午或下午的時間;Google 會使用一般營業時間來解讀前面未加上午或下午的時間。舉例來說,Google 會將11 解讀為上午 11 點,而將 2 解讀為下午 2 點。
    • 2012 年 6 月 4 日 15:00:24 小時制時間
    • 東部標準時間 2012 年 6 月 4 日下午 3 點2012 年 6 月 4 日下午 3-5 點:含時區或世界統一時間/格林威治標準時間差距的時間。
    • 2012 年 6 月 4 日下午 2-3 點2012 年 6 月 4-5 日下午 2-3 點:含/不含日期範圍的時間範圍。
  • 以獨立項目組成的日期。您可以透過進階標記選項,將下列獨立的文字片段辨識為一組日期:
    • 日期:6 月 4 日 (星期二) 年份:2013 年
    • 6 月 4 日 | 時間:下午 7:30-下午 9:302012 年
    Google 無法辨識已分割成多個標記的時間範圍。舉例來說,系統無法將下列標記辨識為一組有效日期:
    • 6 月 4-5 日和 2012 年

手動指定日期格式

標記協助工具會根據內容語言所適用的日期格式規則來判斷其中的日期。舉例來說,如果網頁的語言是英文 (美國),標記協助工具就會將 12-06-12 判斷為 2012 年 12 月 6 日;如果網頁的語言是英文 (英國),標記協助工具就會將 12-06-12 判斷為 2012 年 6 月 12 日。標記協助工具會自動判斷網頁的語言,進而判斷日期格式規則。

如何覆寫標記協助工具並指定其他日期格式:

  1. 依序選取齒輪圖示和 [設定]。
  2. 在 [設定] 彈出式視窗的 [日期格式] 清單中,選取要指定的格式。
  3. 選取 [儲存]
新增缺少的資料

如果您的範例內容有缺少資料 (例如活動的年份),您可以為該資料指定要使用的值。結構化資料標記協助工具會為這些值加上標記。

您隨時都可以新增缺少的資料,並可視需求予以變更或刪除。

如何新增、變更或刪除缺少的資料:

  1. 在 [我的資料項目] 欄的底部,選取 [新增缺少的資料]。
  2. 執行下列任一項動作:
    • 從 [選取標記] 清單中選取要使用的標記以新增值,然後在文字方塊中輸入值。舉例來說,您可以選取 [類別],然後輸入「愛爾蘭傳統音樂」。
    • 選取文字方塊中的 [X],將現有的資料刪除。
    • 變更文字方塊中的值以編輯現有資料。
  3. 選取 [儲存]
    標記協助工具會在 [我的資料項目] 底下顯示指定的值。

變更網頁語言

結構化資料標記協助工具會自動偵測您範例內容的語言,以便正確解讀網頁中的資料。如果標記協助工具所建立的標記不正確,您可以將您所使用的語言明確地告知標記協助工具。

如何手動指定語言:

  1. 依序選取齒輪圖示和 [設定]。
  2. 在 [設定] 彈出式視窗的 [網站語言] 清單中,選取要指定的語言。
  3. 選取 [儲存]
什麼是 schema.org?

schema.org 是由 Google、Microsoft 與 Yahoo! 聯手打造的計劃,旨在建立描述網頁資料的常用詞彙,藉此改善網路瀏覽體驗。如果您在 HTML 網頁中加入 schema.org 標記,即可讓許多公司與產品 (包括 Google 搜尋) 解讀您網站上的資料。同樣地,如果您在 HTML 格式化的電子郵件中加入 schema.org 標記,也能讓 Gmail 以外的其他電子郵件產品解讀其中的資料。

您可以使用不同類型的標記,透過 schema.org 詞彙來描述您的資料。標記協助工具可為您示範如何使用微資料與 JSON-LD。

如需進一步瞭解 schema.org,請參閱 schema.org 常見問題

什麼是微資料與 JSON-LD 標記?

微資料與 JSON-LD 是兩種不同的標記資料方法 (兩者皆使用 schema.org 詞彙)。建議您擇一使用微資料或 JSON-LD, 避免在單一網頁或電子郵件同時使用這兩種方法。Google 建議您使用微資料 標記網頁內容。

微資料

微資料使用 HTML 標記與屬性來定義資料。舉例來說,以下為 描述活動的 HTML:

<div> 
  快來聽聽國家交響樂團的現場演奏會
  歡迎在 2013 年 7 月 6 日蒞臨美輪美奐的國家音樂廳!
</div>
    

以下是使用微資料標記同一段 HTML 的結果:

<div itemscope itemtype="http://schema.org/Event"> 
  快來聽聽
  <span itemprop="name">國家交響樂團</span>
  的現場演奏會,歡迎在
  <span itemprop="startDate" 
  content="2013-07-06>2013 年 7 月 6 日</span> 
  蒞臨美輪美奐的
  <span itemprop="location" itemscope 
    itemtype="http://schema.org/Place"> 
    <span itemprop="name">國家音樂廳</span>!
  </span>
</div>
    

如需更多資訊,請參閱關於微資料

JSON-LD

JSON-LD 會使用 HTML 網頁上的 JavaScript 物件來定義資料。舉例來說, 以下為描述活動的 JSON-LD:

<script type="application/ld+json">
{
  "@context" : "http://schema.org",
  "@type" : "活動",
  "name" : "已故經典民歌演唱者追思音樂會",
  "startDate" : "2013 年 7 月 6 日",
  "location" : {
    "@type" : "地點",
    "name" : "台北小巨蛋"
  }
}
</script>
    

如需更多資訊,請參閱 JSON-LD

標記協助工具會如何處理我現有的標記?

標記協助工具會忽略您在範例網頁或電子郵件中所加上的所有現有標記。因此,當您要標記的文字已由現有標記所定義時,標記協助工具會予以忽略,然後為該文字新增額外的標記。

 
如果您對結構化資料標記協助工具有任何意見,請前往結構化資料 Search Console 論壇,將您的想法告訴我們。
這篇文章實用嗎?
我們應如何改進呢?