網站排名更靠前 網站結構化標記 WordPress SEO

最近因為舊客戶委託我幫他的網站（非 WordPress）做資料結構化標記，如果是 WordPress 網站，可以安裝 SEO 外掛並加以設定後就能有基本的結構化標記，再補充一些外掛無法自動設定到的部分加強即可。

但因為客戶網站非 WordPress，因此全部的結構化程式都必須手動來加入，結構化標記資料非常多，但目前真正有用處的只有受 Google 青睞的約二十種類別，而客戶網站的屬性適合加入哪一些呢？如何正確標示並加入程式？

本篇文章會一面告知你認識結構化程式，一面告知你實作、測試的結果，以及結構化的 JSON-LD 程式該如何寫？如果用 WordPress 網站如何實踐結構化語意標記？

先明白什麼是結構化程式標記，對網站的好處和優勢？

瞧瞧網頁結構化資料標記後在 Google 搜尋的特色版面

Google 搜尋會盡力瞭解網頁內容。您可以在網頁上使用結構化資料，將網頁內容相關的明確線索提供給 Google，進而協助我們在搜尋結果中以更豐富的功能顯示網站。 – Google 結構化標記說明文件

LOGO/企業/組織

相信大家都不陌生，在搜尋結果頁面會出現你所查詢的組織資訊，除了公司基本資料、LOGO之外，還可以加入社群網站等⋯⋯相關網址的連結。

Restaurant 當地商家

這大家應該不陌生，要注意的是這是給有店面的在地商家所使用的結構化，所以辦公室上班的組織企業請不要使用喔！

FAQ 常見問題

目前結構化標記程式中被 Google 重用的其中一項，不但版面明顯，加上使用範圍廣泛，任何類型網站都能輕鬆加入 FAQ 常見問題，是廣受現在有結構化標記概念的站長們的最愛之一呢！我多篇重要的部落格文章也都有使用喔！

Product 產品 / 服務

電商網站最重要的結構化標記語法之一！可以讓搜尋的人一眼看到你商品的售價、狀況、以及有「顯眼黃色星星」的綜合的評價，除了排名有機會更高之外，更有機會促進搜尋點擊率。

Article 文章

左圖是一般有設定文章結構話就有機會出現的顯示方式（在手機上），右邊則限定只有網站同時採用 AMP 技術，才有可能出現的輪轉方式！

除了 Article 之外，經營部落格的人也可以採用 BlogPosting，時效性強的新聞類型文章則應該採用 NewsArticle。

採用 NewsArticle 結構化標記的新聞常常會在搜尋結果出現在最上方輪轉，大家應該都看過不陌生！於點擊曝光都有非常高的優勢，但有注意到下面的時間嗎？所謂「新聞」就是最新的資訊！如果你不是新聞類型網站，你的文章就算私自標註為新聞，先不論 Google 會不會有發現後的懲罰，光是時效性過了，就沒有特別的曝光版面了。

Breadcrumb 導覽標記

很重要的結構化語法！會在搜尋結果清楚標示你該頁面的分類所屬！讓搜尋者與爬蟲程式都能更了解主題！

JobPosting 徵人啟事

很多公司會在自己網頁上刊登徵才訊息。如果能為資訊加上 JobPosting 結構化標記的話，就有機會能在 Google 上同步曝光。

雖然現在裡面大部分職缺都來自 104 等人力銀行（因為這些人力銀行都有設定結構化標記啊！），你可能會想說我的職缺有機會曝光嗎？但因為 Google 依據的是關鍵字以及位置，只要位置離求職者近的話，還是有機會曝光在眾多職缺前面！總之值得一試！

How-To 操作說明

How-To 結構化標記感覺是個強大的標記語法，有著豐富的版面位置，但因為標記上比較麻煩。觀察目前用的人比較少，但應用得當的話就能得到豐富的複合式版面搜尋版面！

操作說明的目的是讓使用者能夠按照一系列步驟成功完成某件事，內文可穿插影片、圖片和文字輔助說明。例如教人「如何打領帶」或「如何為廚房背牆貼上磁磚」。如果您的操作說明需要依照順序完成每一個步驟，使用 HowTo 結構化資料對您的內容就有加分效果。如果網頁主要用於描述操作說明，就相當適合採用 HowTo 結構化資料。 – Google 結構化 How-To 說明

結構化標記程式產生器

不會程式可以搞定結構語法嗎？可以！只要你有足夠的概念知道你需結構化哪些項目，就能使用線上的「結構化語法產生器」來產生該項目的程式！

就算是工程師，結構化屬性那麼多，有時還會不小心寫錯，也是可以先用線上的工具產生後，再來自己做細部的調整修改。

這邊要推薦兩個：

web code tools

傳送門

這個不只是 JSON-LD，就連 CSS 等其他網頁常用的程式都可以線上產生！不過線上產生器那麼多，為什麼我推薦這個？最主要原因其實是因為「配色」，深色系的網站、加上支援高亮的程式語法，直接讓我把其他產生器都直接關掉，只留這個！

Google 結構化資料標記協助工具

傳送門

Google 官方推出的結構化標記工具！直接讓你輸入網址，帶你到該頁面去做標記！只要將你網頁上的資料一一點選後，選擇相對應的項目，就能產生 JSON-LD 語法，且會在每一個項目提醒你哪些欄位是「必要」的！

結構化標記注意事項

以下根據 Google 官方說明，擷取部分我認為比較重要的：

• 請勿為網頁讀者看不到的內容加上標記。
• 請勿為不相關或容易誤導使用者的內容加上標記，例如造假評論或與網頁主題無關的內容。
• 提供最新資訊。如果具有時效性的內容已過時，就不會顯示為複合式搜尋結果。
• 根據您的複合式搜尋結果類型，指定所有的必要屬性。缺少必要屬性的項目不會顯示在複合式搜尋結果中。
• 如果您有多個網頁會顯示相同內容，則不只是標準網頁，建議您在所有重複網頁上都放置相同的結構化資料。
• 使用結構化資料會「啟用」相關功能，但不「保證」該功能可正常顯示。Google 演算法會自行制定搜尋結果，提供使用者最佳的搜尋體驗。

其中要注意的就是，結構化資料不能隨意輸入、或甚至為了宣傳、廣告等目的欺騙機器人。像是該頁明明不存在的資料，卻標記在結構化程式之中！

而當 Google 發現這些行為的時候，它會有專人介入處理，並可能會將你的網站標注為垃圾內容、或是停用你的網站之後的所有複合版面展示功能。

想知道自己網站有沒有被 Google 採專人介入處理，可以到 Google Console 的左邊選單中，可以看到此選項，點入就能看到有無被標記。

而最後一點，更是要提醒一下大家！並不是你做了結構化標記就一定會呈現該版面，Google 演算法會自行決定如何呈現。就我目前觀察以及我自己網站的結果，排在第一頁的頁面特別容易被採用複合版面。而競爭力較低排到第二頁以後的頁面則傾向不會啟用結構化版面的展示功能。

WordPress 使用者如何使用結構化標記程式

安裝與設定 SEO 外掛程式

對於 WordPress 使用者只要裝設相對應的外掛、並且加以設定就能達到結構化資料的目的。

首先至少安裝一款 SEO 外掛，如 Yoast SEO、RankMath 等⋯⋯，它們會幫助你的網站標記結構化資料，重要的 Breadcrumb 導覽項目、Article 文章、作者、圖片等資訊都會自動幫你標記。

不過有些部分要記得進入外掛設定他們才知道要如何標記，像是：

• • 提供你組織/個人的基本資料
  • 提供你的社群網站網址（IG、FB、Youtube 等）

請點入你的 SEO 外掛設定頁面，確認你有設定這些資料。也可以確認一下其他項目是否有正確打開，像是 Breadcrumb 麵包屑標記，預設應該是打開的。不過亦有提供關閉的選項，主要原因可能是有些 Breadcrumb 外掛已經自帶結構化標記，避免衝突而設置的開關。

Yoast SEO 特別注意

另外 Yoast SEO 預設會以 slug 來標記 Breadcrumb，如果 slug 是以英文來設定、實際類別名稱是中文的人，可以把它設定用「類別名稱標記」這樣在搜尋上的分類會更加清楚。

WordPress SEO 外掛無法自動產生，需半手動完成

那就是文章內容、頁面內容的部分就需要你配合才能正確結構化了，像是 FAQ 的新增，不要自己使用標題和文字來組成。因為這樣你會錯過將他們結構化的機會。

正確在文章內寫 FAQ 常見問題的做法：使用 SEO 外掛提供的 FAQ 模塊來新增常見問題的部分，這樣才能將這個「搜尋引擎上強而有力的結構化資料」正確新增到你的網頁之中！

如果 WordPress 外掛已經加了結構化語法，我又自己補充會影響嗎？

目前實測，Google 讀取結構化程式是會等整個網站讀取完才進行判定，因此可以東加一塊、西加一塊除了管理上比較困難之外，對於結構化程式是沒有問題的。

如果不放心可以將頁面或是程式碼放入結構化程式測試頁面之中測試：測試結構化資料

Google 推薦的結構化程式 JSON-LD 寫法示範

結構化標記支援三種格式，分別是：JSON-LD、微資料(micro-data)、RDFa。這邊示範 Google 官方建議使用的 JSON-LD 該怎麼寫？

單一項目 JSON-LD 結構化程式寫法：

假如我用產生器產生了一個結構化語法如下，只需整段複製貼入程式中即可發揮效用：
Organization 組織結構話語法 JSON-LD 示範：

<script type="application/ld+json">
{
  "@context": "http://schema.org/",
  "@type": "Organization",
  "name": "造九頑五",
  "logo": "https://make9.tw/wp-content/uploads/logo.png",
  "url": "https://make9.tw",
  "address": {
    "@type": "PostalAddress",
    "addressCountry": "United States"
  }
}
</script>

Product 產品/服務：結構化程式 JSON-LD 示範：

<script type="application/ld+json">
{
  "@context": "http://schema.org/",
  "@type": "Product",
  "name": "WordPress 架站服務",
  "image": "https://make9.tw/wp-content/uploads/about-structured-data.jpg",
  "description": "WordPress架站、套版、客製化官方網站、一頁式行銷網站製作",
  "brand": {
    "@type": "Brand",
    "name": "造九頑五工作室"
  },
  "offers": {
    "@type": "Offer",
    "priceCurrency": "TWD",
    "price": "50000",
    "availability": "https://schema.org/InStock",
    "itemCondition": "https://schema.org/NewCondition"
  }
}
</script>

多項目 JSON-LD 結構化程式合併寫法：

但假如產生了多個結構化語意，要一段一段貼嗎？這樣不就會讓程式很長很混亂？那我該怎麼將 JSON-LD 整合成一段程式碼呢？
將上述「組織 Organization」、「產品 Product」結構語法合而為一示範：

<script type="application/ld+json">
{
  "@context" : "http://schema.org",
  "@graph": [
  {
    "@type": "Organization",
    "name": "造九頑五",
    "logo": "https://make9.tw/wp-content/uploads/logo.png",
    "url": "https://make9.tw",
    "address": {
      "@type": "PostalAddress",
      "addressCountry": "United States"
    }
  },
  {
    "@type": "Product",
    "name": "WordPress 架站服務",
    "image": "https://make9.tw/wp-content/uploads/about-structured-data.jpg",
    "description": "WordPress架站、套版、客製化官方網站、一頁式行銷網站製作",
    "brand": {
      "@type": "Brand",
      "name": "造九頑五工作室"
    },
    "offers": {
      "@type": "Offer",
      "priceCurrency": "TWD",
      "price": "50000",
      "availability": "https://schema.org/InStock",
      "itemCondition": "https://schema.org/NewCondition"
    }
  }
  ]
}
</script>

搜尋最頂端的精選資訊呢？跟結構化資料之間的關係

我後來搜尋了一些關鍵字，想了解會出現在精選搜尋的網頁設定了哪些「結構化語法」。結果竟大大出乎我意料之外！上精選的這些根本就沒特別去設定這些格式的結構化資料！

什麼意思呢？像是

不要誤會，不是這個網站沒做結構化標記，而是上精選的這些資料，根本沒特別標記。我重複查了許多不同關鍵字、觀察精選資訊得到的結論是：「搜尋最上方的精選版面跟結構化標記無關」。

那精選版面是怎麼怎麼來的？

推測是 Google 判定內容品質高、且與使用者搜尋的關鍵字高度相關的文章就有機會被設為精選。

沒做結構化標記？那 Google  怎麼知道抓哪些資料？準確的抓取資料？

別忘了在結構化資料出現前，Google 早就在版面上嘗試用各種不同的標注方式，來獎勵高品質網站的可見度了！加上 html5 也有語意、然後文章撰寫也最好依循著標題、內文等正規模式撰寫，就能提高 Google 對你網站的掌握度！更有機會把你的資料拿來做特殊應用。

舉例：

像是這兩個所特別呈現的資料都沒做結構化標記，但 Google AI 自有它的功力可以去判斷。像這兩個一個是抓出文章中相關的標題、另一個是抓出文章中有用到的影片。

Google 對於新網站的蜜月期

另外我還觀察到一個特別的狀況是：這些上精選頂頭的網站，很大的比例是權重較低的新網站，也許也印證了「聽說 Google 會給新網站比較高的曝光機會」也就是所謂的新網站蜜月期的說法。

但前提還是品質分數要達到一定水準，因此經營部落格還是以「內容為王」，除了基本的 SEO 要做之外，好好經營你的內容才是最重要的呢！

結論：還在進化中的結構化標記，已是兵家必爭之地

結構化標記程式是一個還在進化中、改變中的應用方式。Google 也一直陸續新增或修改結構化標記在搜尋結果中所呈現的樣式。也許就是因此造就各大廠對其態度和實踐方式都不太一致，似乎還沒有一個真正正規的做法，大家還在摸索。

但其中有幾個效果特別明顯、易用的結構化，大家也別放過這個先行者的紅利，可以多加利用。如「導覽標記 Breadcrumb」、「常見問題 FAQ」、電商則一定要做「Product 產品加上 Offer 售價的標記，可以的話產品最好做 Rating 的評價功能」，部落格網站我實際測試觀察的結果其實還是「內容為王」、只要基本結構化有做不要網站技術明顯落於人後即可，部落格必做的則為「Article 文章、或是 BlogPosting 標記」。