內容目錄
歡迎回到鵠學苑 — WordPress 網頁設計超詳細攻略 – 結構化資料 （ Structured data ）在應用上稱為語意標記 （ Semantic mark），最主要的功用，就是使用特定格式的程式語言，將建立網頁的 HTML 中特定的資料標示出來，讓 Google 能夠透過這些以標記的資訊，在搜尋結果頁中為網站中不同種類的資料顯示不同樣式的呈現方式，相信對部份比較不熟程式語言的人而言，在定義上看起來有點難懂。
那麼用搬家的方式來比喻的話，我們預先在新房子（網站）的空間平面圖上（結構化資料），標示哪些地方是客廳、廚房、臥室（網站架構），並且將傢具（HTML 元素）要放的位置也加入到其中，當搬家公司（Google 搜尋引擎）看到這張以標注的平面圖（建立完成的結構化資料），就知道應該要把傢俱正確的擺放在哪些位置，讓新家更有效率的完成擺設（在搜尋結果中顯示語意標記的內容）。
在本次教學中，除了簡單解釋 Search Console 中結構化資料項目外，也會提供 WordPress 加入 Schema 的外掛教學，在後續也會有對結構化資料其他標記方式做說明，當然比較專業的知識，可能會需要花費您一些時間看完，希望能夠給想要學習 Search Console 的朋友一些幫助。接下來跟著鵠學苑的腳步，讓我們開始學習吧！
（小提醒：本篇教學是以 Google Search Console 結構化資料為主要說明，因此在解釋時只有針對 Google 單一搜尋引擎對結構化資料的定義，不同的搜尋引擎會對網站結構化資料有不一樣的識別方式，因此並不適用喔！）
Google Search Console 結構化資料說明網頁
https://support.google.com/webmasters/answer/2650907?hl=zh-Hant
Schema.org 結構化資料型態規則
https://schema.org/
Schema 網站結構化資料建立外掛下載
https://wordpress.org/plugins/schema/
Google 結構化資料測試工具
https://search.google.com/structured-data/testing-tool
Search Console 結構化資料項目資料表說明
第一步：進入到 Search Console 資訊主頁，可以在搜尋結果呈現方式中找到結構化資料選項。
第二步：進入之後可以在下圖中標示的位置看到當前網站具有哪些類型的結構化資料，每一個網站因為所使用的佈景主題（Theme）與外掛都不一樣，因此在查看這一部分時，可能會發現已經有一些結構化資料在上面，但你卻不知道為何會有，這就有可能是網站在安裝主題後本身就具有結構化資料的語意標記，通常都不會是錯誤的項目，因此可以不用在意。以下就目前圖表中筆者自行建立的結構化資料類型做簡單說明：
-
- BreadcrumbList：中文翻譯為麵包屑，取自童話故事中以麵包屑引導小鳥行走的寓意，較正式的名稱為網站路徑導航，在網頁上標示此頁面的上一階層頁面為何，實例可看鵠崙設計 – 範例展示，在頁面左上角的就是網站導航文字。而加入此類型的結構化資料，將可以在搜尋結果網頁標題的下方也顯示網站路徑導航。
- SiteNavigationElement：網頁連結元素，使用品牌關鍵字搜尋首頁時，將有機率顯示網站其它頁面連結，範例可看鵠學苑的搜尋結果。
- Organization：企業網站組織，在語義標記元素中通常包含服務類型、品牌圖片、網站網址、聯絡方式等，可以與 Google 在地商家資料相結合，在搜尋結果中顯示知識圖譜，本文後續會講解到。
- Brand：設定網站的品牌標誌，單一圖片即可。
- Article：頁面、文章專用的結構化類型，可以在相關關鍵字的搜尋結果中以輪播的方式顯示內容。
- BlogPosting：部落格文章結構化資料，可以在行動搜尋結果中顯示文章群組，或者在 AMP 類型的搜尋結果中顯示輪播（Google AMP 網頁 教學 AMP是什麼 ? 加速 手機版網頁 必學技能！）
第三步：筆者以 BlogPosing 的資料類型說明點擊進入後的介面。
第四步：在下圖中可以看到 BlogPosing 是以 Schema.org 標記結構化資料，另外也可以看到網站中目前有哪些網頁有 BlogPosing 語意標記，基本上一定是 ” 文章 “的網頁才會有 BlogPosing ，如果有其他類型的網頁有 BlogPosing 標記，就表示 Schema 有標示錯誤，會顯示在上方圖表發生錯誤的項目數中，BlogPosing 以外的語意標記類型也是同樣的規則，特定的結構化資料必須要對應到特定頁面，如 BreadcrumbList 需對應到有麵包屑導航的頁面，SiteNavigationElement 只能在網站首頁導入等，這個規則必須要注意到。
第五步：那麼結構化資料的程式語法建立類型，有沒有一個統一制定的規則標準依據，讓網站所有結構化資料都能夠查詢到應用方式？下圖的網站就是所有結構化資料建立時的來源位置，在建立任何一種類型的語意標記時，可以到 Schema.org 這個網站搜尋標記名稱，筆者以搜尋 BlogPosting 做示範。
第六步：可以在搜尋出來的列表中直接找到 BlogPosting 的項目。
第七步：點擊進入後會有一個表格，列出 BlogPosting 可以加入的數值項目，因種類過於繁多，可以自行觀看，在此只介紹結構化資料定義方式的案例要如何查詢，請直接向下捲動到 Examples 的位置，可以看到語意標記方式有三種：Microdate、RDFa、JSON-LD，比較常被應用的是 Microdate 與 JSON-LD ，而就 Google 結構化資料說明與國外網路普遍對結構化資料的教學，都是以 JSON-LD 為主要教學方式。
在下圖中可以看到 JSON-LD 的標記方式，如果熟悉 WordPress php 規則或者可以將 HTML 元素 在 Goolge Tag Manager 中標記後並創建 JavaScript 導入網站，就可以先擷取 Google 結構化資料範例，並將 JSON-LD 修改成自家網站的資料內容，就能完成結構化資料的建立。
第八步：下圖是 Google 關於結構化資料如何運作的說明，可以在中間底的程式碼位置看到，Google 也是以 JSON-LD 的格式作為範例。
WordPress 結構化資料建立外掛 – Schema 簡易教學
第一步：無論在上一個小節能理解多少結構化資料的說明與應用，在此章節將運用 WordPress 具有外掛附加功能的優勢，直接安裝名稱為 Schema 的語意標記外掛，透過外掛選項的設定，就能直接建立基礎的網站結構化資料。與一般外掛安裝相同，搜尋 Schema 後依序立即安裝並啟用。
第二步：安裝完成後在側邊工具欄可以找到 Schema 外掛的設定項目，點選 Settings 進入後在第一個頁籤 General 中首先要選擇自己的網站類型（Site Type），並在第二選項中設定品牌標誌（圖二）。
第三步：第二頁籤 Knowiedge Graph （知識圖譜），在此頁中有對於知識圖譜的說明，在此設定的資料會顯示在搜尋結果中右側中，以單獨區塊顯示品牌基本資料。
下圖是 Google 在地商家關於知識圖譜的說明，標示的位置就是在搜尋結果中可以顯示的樣式。
可以看實際案例，下圖就是搜尋鵠崙設計（品牌關鍵字）後會在右側顯示鵠崙設計的知識圖譜，要注意的是如果只在 Schema 外掛中設定 Organization name（品牌名稱）、website URL（網站網址）、Logo（品牌圖片），不一定會在側邊顯示知識圖譜，必須要結合 Google 在地商家 的設定，才會顯示比較完整的資訊內容。
第四步：在 Shema 第二個設定 Type 中，可以設定文章及頁面的結構化資料，在此以 Post 為例。
進入後在 Artice Type 中選擇 BlogPosting，並記得儲存。
第五步：Schema 外掛設定完成後，就可以到 Google 結構化資料測試工具中檢查網站語意標記狀態，如下圖所示輸入網址並執行測試。
第六步：在筆者的測試網站中可以看到剛剛標記的 Brand 及 BlogPosting 均有偵測到。
點擊進入後可以看到文章的詳細資訊以正確被標記，如果有錯誤會以紅字標示直接顯示在上面。
下圖是 Brand 項目進入後顯示的數值，沒有出現錯誤就表示完成。
第七步：下圖是第一小節有提到的運用 Google Tag Manager 導入結構化資料到網站中，之後有專門講解 Google Tag Manager 的教學文章時會再詳細解釋。
結語：
結構化資料其實是非常專業的知識，對於程式語言本科出身或者從事相關工作的人來說並不是太難，但對於想要做好網站 SEO 的自有品牌站長或者網站行銷人員而言，無疑是相當艱難的一門學問，但就筆者的認知，結構化資料不只是 Google 作為相同類型網站的在搜尋結果中顯示樣式的區分，更是未來競爭自然搜尋結果排名的一項重大指標與趨勢。
Google 會不斷的加入更具有特色的搜尋結果呈現樣式讓瀏覽者在使用 Google 搜尋時始終都會有耳目一新的搜尋體驗，而如何讓網站內容能顯示某特定結構化資料類型效果，就必須要依靠語意標記的建立，如果説網站發展與行銷規劃都只能依靠個人來操作，建議可以多學習結構化資料的相關知識，才能提高網站競爭力。
今天的教學到這裡告一段落了，不要忘記在右側訂閱鵠學苑電子報，確保收到最新 WordPress 教學文章，如果有網頁設計相關需求，或者想了解最新網站知識，也可以到 鵠崙設計 做線上免費諮詢喔！我們下次的教學見～
架站 相關教學文章
網站架設知識推薦閱讀
無障礙網站介紹－規範說明、檢測工具與操作影片
部落格架站該如何選擇？Medium跟WordPress的優勢比較！
Elementor 網頁編輯器 突破 300 萬下載次數，最受歡迎的外掛！
