Google Search Console 結構化資料教學- 網站建立Schema 標記

結構化資料（ Structured data ）在應用上稱為語意標記（ Semantic mark），最主要的功用，就是使用特定格式的程式語言，將建立網頁的HTML 中特定的 ... Skiptocontent WordPress WordPress教學 ＷordPress主題 WordPress外掛 WordPress相關工具 WordPress客製 Elementor教學 WooCommerce WooCommerce教學 WooCommerce主題 WooCommerce外掛 WooCommerce客製 WordPress網頁設計 SEO工具 SearchConsole教學 GoogleAnalytics教學 GoogleAds教學 架站資源 聯絡我們 選單 WordPress WordPress教學 ＷordPress主題 WordPress外掛 WordPress相關工具 WordPress客製 Elementor教學 WooCommerce WooCommerce教學 WooCommerce主題 WooCommerce外掛 WooCommerce客製 WordPress網頁設計 SEO工具 SearchConsole教學 GoogleAnalytics教學 GoogleAds教學 架站資源 聯絡我們 搜尋 >SEO工具>SearchConsole教學>GoogleSearchConsole結構化資料教學–網站建立Schema標記 SearchConsole教學,SEO工具 GoogleSearchConsole結構化資料教學–網站建立Schema標記 內容目錄 SearchConsole結構化資料項目資料表說明WordPress結構化資料建立外掛–Schema簡易教學 結語： 歡迎回到鵠學苑—WordPress網頁設計超詳細攻略–結構化資料（Structureddata）在應用上稱為語意標記（Semanticmark），最主要的功用，就是使用特定格式的程式語言，將建立網頁的HTML中特定的資料標示出來，讓Google能夠透過這些以標記的資訊，在搜尋結果頁中為網站中不同種類的資料顯示不同樣式的呈現方式，相信對部份比較不熟程式語言的人而言，在定義上看起來有點難懂。

那麼用搬家的方式來比喻的話，我們預先在新房子（網站）的空間平面圖上（結構化資料），標示哪些地方是客廳、廚房、臥室（網站架構），並且將傢具（HTML元素）要放的位置也加入到其中，當搬家公司（Google搜尋引擎）看到這張以標注的平面圖（建立完成的結構化資料），就知道應該要把傢俱正確的擺放在哪些位置，讓新家更有效率的完成擺設（在搜尋結果中顯示語意標記的內容）。

在本次教學中，除了簡單解釋SearchConsole中結構化資料項目外，也會提供WordPress加入Schema的外掛教學，在後續也會有對結構化資料其他標記方式做說明，當然比較專業的知識，可能會需要花費您一些時間看完，希望能夠給想要學習 SearchConsole的朋友一些幫助。

接下來跟著鵠學苑的腳步，讓我們開始學習吧！ （小提醒：本篇教學是以GoogleSearchConsole結構化資料為主要說明，因此在解釋時只有針對Google單一搜尋引擎對結構化資料的定義，不同的搜尋引擎會對網站結構化資料有不一樣的識別方式，因此並不適用喔！） GoogleSearchConsole結構化資料說明網頁 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 SearchConsole結構化資料項目資料表說明 第一步：進入到SearchConsole資訊主頁，可以在搜尋結果呈現方式中找到結構化資料選項。

第二步：進入之後可以在下圖中標示的位置看到當前網站具有哪些類型的結構化資料，每一個網站因為所使用的佈景主題（Theme）與外掛都不一樣，因此在查看這一部分時，可能會發現已經有一些結構化資料在上面，但你卻不知道為何會有，這就有可能是網站在安裝主題後本身就具有結構化資料的語意標記，通常都不會是錯誤的項目，因此可以不用在意。

以下就目前圖表中筆者自行建立的結構化資料類型做簡單說明： BreadcrumbList：中文翻譯為麵包屑，取自童話故事中以麵包屑引導小鳥行走的寓意，較正式的名稱為網站路徑導航，在網頁上標示此頁面的上一階層頁面為何，實例可看鵠崙設計–範例展示，在頁面左上角的就是網站導航文字。

而加入此類型的結構化資料，將可以在搜尋結果網頁標題的下方也顯示網站路徑導航。

SiteNavigationElement：網頁連結元素，使用品牌關鍵字搜尋首頁時，將有機率顯示網站其它頁面連結，範例可看鵠學苑的搜尋結果。

Organization：企業網站組織，在語義標記元素中通常包含服務類型、品牌圖片、網站網址、聯絡方式等，可以與Google在地商家資料相結合，在搜尋結果中顯示知識圖譜，本文後續會講解到。

Brand：設定網站的品牌標誌，單一圖片即可。

Article：頁面、文章專用的結構化類型，可以在相關關鍵字的搜尋結果中以輪播的方式顯示內容。

BlogPosting：部落格文章結構化資料，可以在行動搜尋結果中顯示文章群組，或者在AMP類型的搜尋結果中顯示輪播（GoogleAMP網頁教學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的標記方式，如果熟悉WordPressphp規則或者可以將HTML元素在GoolgeTagManager中標記後並創建JavaScript導入網站，就可以先擷取Google結構化資料範例，並將 JSON-LD修改成自家網站的資料內容，就能完成結構化資料的建立。

第八步：下圖是Google關於結構化資料如何運作的說明，可以在中間底的程式碼位置看到，Google也是以 JSON-LD的格式作為範例。

WordPress結構化資料建立外掛–Schema簡易教學  第一步：無論在上一個小節能理解多少結構化資料的說明與應用，在此章節將運用WordPress具有外掛附加功能的優勢，直接安裝名稱為Schema的語意標記外掛，透過外掛選項的設定，就能直接建立基礎的網站結構化資料。

與一般外掛安裝相同，搜尋 Schema後依序立即安裝並啟用。

第二步：安裝完成後在側邊工具欄可以找到 Schema外掛的設定項目，點選Settings進入後在第一個頁籤General中首先要選擇自己的網站類型（SiteType），並在第二選項中設定品牌標誌（圖二）。

第三步：第二頁籤KnowiedgeGraph（知識圖譜），在此頁中有對於知識圖譜的說明，在此設定的資料會顯示在搜尋結果中右側中，以單獨區塊顯示品牌基本資料。

下圖是Google在地商家關於知識圖譜的說明，標示的位置就是在搜尋結果中可以顯示的樣式。

可以看實際案例，下圖就是搜尋鵠崙設計（品牌關鍵字）後會在右側顯示鵠崙設計的知識圖譜，要注意的是如果只在Schema外掛中設定Organizationname（品牌名稱）、websiteURL（網站網址）、Logo（品牌圖片），不一定會在側邊顯示知識圖譜，必須要結合Google在地商家的設定，才會顯示比較完整的資訊內容。

第四步：在Shema第二個設定Type中，可以設定文章及頁面的結構化資料，在此以Post為例。

進入後在ArticeType中選擇 BlogPosting，並記得儲存。

第五步：Schema外掛設定完成後，就可以到Google結構化資料測試工具中檢查網站語意標記狀態，如下圖所示輸入網址並執行測試。

第六步：在筆者的測試網站中可以看到剛剛標記的Brand及BlogPosting均有偵測到。

點擊進入後可以看到文章的詳細資訊以正確被標記，如果有錯誤會以紅字標示直接顯示在上面。

下圖是Brand項目進入後顯示的數值，沒有出現錯誤就表示完成。

第七步：下圖是第一小節有提到的運用GoogleTagManager導入結構化資料到網站中，之後有專門講解 GoogleTagManager的教學文章時會再詳細解釋。

結語： 結構化資料其實是非常專業的知識，對於程式語言本科出身或者從事相關工作的人來說並不是太難，但對於想要做好網站SEO的自有品牌站長或者網站行銷人員而言，無疑是相當艱難的一門學問，但就筆者的認知，結構化資料不只是Google作為相同類型網站的在搜尋結果中顯示樣式的區分，更是未來競爭自然搜尋結果排名的一項重大指標與趨勢。

Google會不斷的加入更具有特色的搜尋結果呈現樣式讓瀏覽者在使用Google搜尋時始終都會有耳目一新的搜尋體驗，而如何讓網站內容能顯示某特定結構化資料類型效果，就必須要依靠語意標記的建立，如果説網站發展與行銷規劃都只能依靠個人來操作，建議可以多學習結構化資料的相關知識，才能提高網站競爭力。

今天的教學到這裡告一段落了，不要忘記在右側訂閱鵠學苑電子報，確保收到最新WordPress教學文章，如果有網頁設計相關需求，或者想了解最新網站知識，也可以到 鵠崙設計 做線上免費諮詢喔！我們下次的教學見～ 架站相關教學文章 Talkwalker─尋找熱門話題，分析關鍵字的線上工具！ ScreenTray截圖工具–比作業系統內建截圖更有效率的截圖神器 VideoDownloaderPLUS免費Chrome擴充功能，下載網站影片超簡單！ Hotjar錄影模式(Recordings)介紹教學，紀錄網站訪客網頁使用軌跡 FontfaceNinja介紹–Chrome快速查看網頁字體與字型大小樣式 Bing網站管理員WebmasterTools驗證網站及sitemap提交流程教學 VISIWIG給你免費圖示以及30種免費背景讓你的網站更加豐富！ 網站架設知識推薦閱讀 無障礙網站介紹－規範說明、檢測工具與操作影片 部落格架站該如何選擇？Medium跟WordPress的優勢比較！ Elementor網頁編輯器突破300萬下載次數，最受歡迎的外掛！ GoogleConsole教學GoogleConsole結構化資料Google網站管理員WordPressSchemaWordPress結構化資料外掛 GoogleSearchConsole結構化資料教學–網站建立Schema標記 2019-01-06T23:25:16+08:00 2020-12-22T17:58:56+08:00 鵠學苑 上一頁上一篇EssentialGrid教學，建立特色風格WordPress文章網格列表 下一篇GoogleSearchConsole資料螢光筆–強化網頁搜尋結果相關性下一篇 鵠學苑 我們是由一群熱愛WordPress網站架設的同好所組成的團隊，希望可以將這套頂尖的CMS管理系統推廣給想要架站的朋友們，並且能夠在過程中互相交流心得，讓網站架設過程變得更有效率！ 訂閱電子報 立即訂閱鵠崙設計(鵠學苑)！我們將不定期發送架站教學文章、最新網站版型介紹以及網頁設計最優惠價格！ Leavethisfieldemptyifyou'rehuman: 熱門文章 ScreenTray截圖工具–比作業系統內建截圖更有效率的截圖神器 WooCommerce自訂結帳表單–CheckoutFieldEditor外掛教學 如何在WordPress中置入FB粉絲專頁–建立網站社交訊號 ContactForm7教學WordPress表單–WordPress架站必學外掛! 5個YITHWooCommerce系列外掛！讓你的網拍平台更有吸引力！ Bing網站管理員WebmasterTools驗證網站及sitemap提交流程教學 vidIQvisionforYoutube教學-自動分析Youtube影片的資訊 GoogleMapsJavaScriptAPI申請–網站啟用Google地圖教學 WooCommerce教學（一般設定）–商店地址、貨幣選項 GA自訂流量來源，讓FacebookInstantArticles流量單獨顯示 GoogleAds進階教學（三）：多媒體廣告-新客開發 Kallyas｜WordPress主題教學 CustomPostTypeUI客製化文章類型搭配Elementor建立文章版型 WPSuperCache設定教學–運用網站快取及預先載入優化網站速度 最新文章 FreeIcons可商用免費開源圖示下載網站，找到你理想的icon！ CodeSnippets幫助你更快速在WordPress網站安装GA跟蹤代碼！ ElementsKit好用的WordPress外掛！幫助你快速建立頁首頁尾！ NextGenGallery相片輪播功能！WordPress外掛建立相簿教學！ DOTOWN日本點陣圖素材網站，像素藝術風格圖示免費下載！ FontMeme免費英文字體網站，一起設計專屬你的logo！ 俐方體11號(Cubic11)開放原始碼，免費開源繁體中文點陣字型下載！ Gallerix俄羅斯線上博物館，17萬張高畫質名畫圖片免費下載！ FreeIcons可商用免費開源圖示下載網站，找到你理想的icon！ CodeSnippets幫助你更快速在WordPress網站安装GA跟蹤代碼！ ElementsKit好用的WordPress外掛！幫助你快速建立頁首頁尾！ NextGenGallery相片輪播功能！WordPress外掛建立相簿教學！ DOTOWN日本點陣圖素材網站，像素藝術風格圖示免費下載！ FontMeme免費英文字體網站，一起設計專屬你的logo！ 相關文章 Google分析入門教學（二）：三大核心指標&電子商務追蹤 9031Fonts免費可商用字體網站，讓你擁有六種特殊英文字體！ AVADA｜WordPress主題教學 Imgbot免費圖片工具–線上調整圖片大小、壓縮、裁切、加入浮水印 GoogleAnalytics教學–WordPress加入GA追蹤碼(主題與外掛) WooCommerce教學（電子郵件設定）–通知設定與進階選項 如何使用Elementor建立WooCommerce單一商品頁？圖文步驟教學 GoogleAds教學(一)新增廣告活動–廣告建立流程與廣告種類說明 Elementor教學小工具應用(三)－為網頁加入動態視覺效果 GoogleConsole教學–內部連結、外部連結項目解說及外掛推薦 Google分析入門教學（三）：創建GA帳號以及基本操作 WPSuperCache設定教學–運用網站快取及預先載入優化網站速度 專案管理軟體推薦–Todoist快速掌握多專案的進度、多人協作管理待辦事項 一頁式網站也能打造獨特的品牌魅力–日本網站Slowmuffi分享 標籤雲 標籤ElementorPRO教學 Elementorwidget Elementor小工具 Elementor教學 GA教學 GA追蹤碼 GoogleAds多媒體廣告 GoogleAds廣告活動 GoogleAds教學 GoogleAnalytics教學 GoogleConsole教學 GoogleGA GoogleSEO工具 Google分析 Google網站管理員 Google關鍵字廣告 hotjarfeedback Hotjar教學 Hotjar網站 Icon SEO SEO優化工具 SEO工具 SEO教學 WooCommerceWordPress WooCommerce代管 WooCommerce外掛 WooCommerce客製 WooCommerce客製化 WooCommerce教學 WooCommerce維護 WooCommerce設定 WooCommerce購物車 WordPresstheme推薦 Wordpress主題 WordPress主題推薦 WordPress介紹 WordPress外掛 WordPress外掛 WordPress教學 WordPress登入 Youtube 免費線上工具 架站資源 網站分析 ©2015-2022鵠學苑｜WordPress教學｜WooCommerce教學｜隱私權政策｜訂閱電子報｜網站地圖 WordPressxWoocommerce鵠崙設計 回到頂端