【SEO結構化標記】如何檢查網頁的SEO結構化標記呢？

前言

• 準備好vscode等搜尋功能強大的IDE（文字編輯器）
• 此篇介紹文會用到「正規表達式」
• SEO結構化標記只會出現在SSR網頁，或html等靜態生成的頁面中，無法從Client Side Rendering的網頁取得結構化標記程式碼
• 如為windows使用者，cmd可自行替換為ctrl鍵

重點

1. 開啟網頁並複製原始碼

• 在你要檢驗的網址前面加上view-source:

• 像是以下這樣（以dcard為例）

  view-source:https://www.dcard.tw/f

• 接著會出現一大串文字，將其「全選並複製」（cmd+A, cmd+C），貼到IDE

2. 查找「結構化標記」的片段

備註：此步驟可以選擇略過，只是在第三步的工具驗證時，會處理比較久，而且不容易debug，因此建議還是執行此步驟。

• 使用IDE的搜尋功能（用cmd+f呼叫搜尋功能），按下.*的按鈕，接著貼上這段「正規表達式」來搜尋

  <script type="app.+</script>

  

• 查找到我們要的「結構化標記」片段的程式碼

  

• 複製這段文字，呈現的樣子會像是以下這樣

  <script type="application/ld+json">{"@context":"https://schema.org","@type":"CollectionPage","name":"Dcard","url":"https://www.dcard.tw/f","description":"廣受年輕人喜愛的 Dcard 是台灣最大的匿名交流平台，舉凡時事話題、感情心情、吃喝玩樂、學習工作等，都有卡友陪你聊！"}</script><script type="application/ld+json">{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Dcard","item":"https://www.dcard.tw"},{"@type":"ListItem","position":2,"name":"全部","item":"https://www.dcard.tw/f"}]}</script><script type="application/ld+json">{"@context":"https://schema.org","@type":"Organization","name":"Dcard","url":"https://www.dcard.tw","logo":{"@type":"ImageObject","url":"https://www.dcard.tw/_next/static/media/93a7e0749e4edfb00cf4ad4a6c1eb6c6-512.png","width":"512","height":"512"}}</script>

3. 使用Google「複合式搜尋結果」工具驗證

• https://search.google.com/test/rich-results

• 剛剛複製的那一段<script …的文字，貼到輸入欄（下圖2的區塊），並點擊「測試代碼」

  

• 稍等一下，結果馬上出爐！

  

• 也可以「分享」測試結果給其他人查看呦

  https://search.google.com/test/rich-results/result?id=XtuNANpaZAp_GL5NcCZqXg

  

---

REF

• 複合式搜尋結果測試工具：https://search.google.com/test/rich-results
• vscode下載網址 https://code.visualstudio.com/