標籤: 結構化資料

如何看懂 JSON 格式：應用於 Schema.org 結構化資料

大家好！這堂課我們將學習如何理解 JSON 格式，以及它如何在網站架設和搜尋引擎最佳化 (SEO) 中發揮關鍵作用，特別是應用在 Schema.org 結構化資料上。 想像一下，你正在搜尋「台南美食」，如果搜尋結果只顯示單調的網頁連結，是不是有點可惜？有了結構化資料，搜尋引擎就能夠理解你的網站內容，例如餐廳名稱、地址、評價等等，讓搜尋結果呈現更豐富的資訊，例如直接顯示餐廳的地址、營業時間、甚至顧客評分，這就叫做「豐富結果」。沒有使用結構化資料的網站，就錯失了展現這些資訊的機會，讓你的網站顯得缺乏吸引力。而 JSON 正是傳遞這些結構化資料給搜尋引擎的關鍵格式。 什麼是 JSON JSON，全名是 JavaScript Object Notation，是一種輕量級的資料交換格式。它以文字形式儲存資料，非常容易閱讀和撰寫，而且被廣泛應用於網頁開發與資料傳輸。在 Schema.org 結構化資料中，我們通常使用 JSON-LD (JSON for Linking Data) 的格式，讓搜尋引擎更容易理解我們網站上的資訊。JSON 的基本結構包含物件、陣列和鍵值對。 JSON 基本語法

  • 物件：物件使用大括號 {} 包圍，包含多個鍵值對。每個鍵值對由鍵 (key) 和值 (value) 組成，鍵是字串，必須用雙引號括起來，例如 “name”，值則可以是字串、數字、布林值 (true 或 false)、另一個物件、陣列或 null。
  • 陣列：陣列使用中括號 [] 包圍，包含一系列有序的值。這些值可以是任何 JSON 允許的資料類型。
  • 鍵值對：鍵值對以「鍵：值」的格式呈現，鍵與值之間用冒號 : 分隔。例如： “name”: “台南美食餐廳”。
  • 範例：一個簡單的 JSON 物件：{"name": "台南音樂節", "date": "2025-06-01", "location": "台南市安平區"} 這個物件包含三個鍵值對，分別代表活動名稱、日期和地點。 閱讀 Schema.org 的 JSON-LD Schema.org 提供了一套標準化的語彙，讓網頁開發者可以使用結構化資料標記網頁內容。在 JSON-LD 中，我們會看到幾個重要的元素：
  • @context: 指定 Schema.org 的命名空間，讓搜尋引擎知道我們使用的語彙。
  • @type: 指定資料的類型，例如 Recipe（食譜）、Event（活動）、Product（產品）等等。
  • 屬性：描述資料的各個方面，例如 Recipe 的 name（名稱）、recipeIngredient（食材）、cookTime（烹飪時間）等等。 例如，一個簡單的 Recipe Schema 的 JSON-LD 可能長這樣： { "@context": "https://schema.org/", "@type": "Recipe", "name": "香濃巧克力蛋糕", "recipeIngredient": ["巧克力粉", "雞蛋", "麵粉"], "cookTime": "PT30M" } 實作 JSON 在網站中 在 WordPress 中添加 JSON-LD，你可以使用 Yoast SEO 等外掛程式，或手動將 JSON-LD 嵌入 header.php 檔案中。例如，在食譜頁面中加入 Recipe Schema 的 JSON-LD，讓 Google 搜尋結果能顯示食譜的烹飪時間、食材等資訊，吸引更多使用者點擊你的網站。 驗證與除錯 JSON 在加入 JSON-LD 後，務必使用線上工具驗證語法正確性與 Schema.org 的有效性。常用的工具包括 JSONLint (驗證 JSON 語法) 、Google Rich Results Test (測試結構化資料的呈現效果) 和 Schema Markup Validator (驗證 Schema.org 標記)。常見錯誤包括資料類型錯誤、缺少必要屬性等等。 課堂練習 請大家閱讀以下 Recipe Schema 的 JSON-LD 範例，標記出 @type 和三個屬性 name、recipeIngredient、cookTime。接著，請嘗試在你的 WordPress 網站中加入這個 JSON-LD，並使用 Google Rich Results Test 驗證結果。 
    {
"@context": "https://schema.org/",
"@type": "Recipe",
"name": "番茄肉醬義大利麵",
"recipeIngredient": ["義大利麵", "番茄醬", "絞肉", "洋蔥"],
"cookTime": "PT45M"
}

    結語 熟練 JSON 格式對於網頁開發和 SEO 非常重要。希望透過這堂課，你已經能理解 JSON 的基本語法和在 Schema.org 結構化資料中的應用。建議大家進一步學習更進階的 JSON 工具，例如 jq，或將 JSON 整合到 Google Tag Manager 中，以實現更精準的資料追蹤與分析。持續學習，你將在網頁開發領域中獲得更大的成就！

打造食譜網站的 Schema.org 結構化資料：詳細介紹與規劃

大家好！這堂課我們將學習如何使用 Schema.org 的結構化資料來提升你的食譜網站。你是否曾經想像過，你的食譜可以直接在 Google 搜尋結果中顯示烹飪時間、圖片和評分呢？這一切都可以透過 Schema.org 實現！ 想像一下，一個沒有使用 Schema 的食譜網站，搜尋者只能看到單調的標題和網址。而使用了 Schema 的網站，則可以呈現豐富的資訊，讓你的食譜更吸引人，更容易被搜尋引擎找到，進而提升網站流量和知名度。例如，一個沒有 Schema 的食譜可能無法顯示烹飪時間，讓使用者不知道需要準備多久的時間，而這將大大影響使用者體驗。 什麼是 Recipe Schema Schema.org 是一個協作計畫，提供了一套通用的語義標籤，讓網頁內容更容易被搜尋引擎理解。Recipe Schema 就是其中一種，專門用於標記食譜相關的資訊。它就像一個「說明書」，告訴搜尋引擎你的食譜內容是什麼，包含哪些食材、烹飪時間、步驟等等。常見的 Recipe Schema 屬性包括：

  • name：食譜名稱 (例如：巧克力熔岩蛋糕)
  • recipeIngredient：食譜食材 (例如：巧克力、奶油、雞蛋)
  • cookTime：烹飪時間 (例如：PT30M 代表 30 分鐘)
  • recipeInstructions：烹飪步驟 (例如：先將巧克力融化…)
  • image：食譜圖片網址 以下是一個 JSON-LD 範例，用來標記一個巧克力蛋糕食譜： 
    {
"@context": "https://schema.org",
"@type": "Recipe",
"name": "巧克力熔岩蛋糕",
"recipeIngredient": ["黑巧克力 100g", "奶油 50g", "雞蛋 2顆", "糖 50g", "麵粉 20g"],
"cookTime": "PT20M",
"recipeInstructions": "1. 將巧克力融化... 2. 加入奶油攪拌... 3. ...",
"image": "https://你的網站/巧克力蛋糕.jpg"
}

    學習使用 Recipe Schema，不僅能讓你的食譜在搜尋結果中更突出，也讓你更深入了解網頁語義化和結構化資料的重要性，這些知識在網站架設的各個方面都會派上用場。 規劃食譜網站 在開始添加 Schema 之前，你需要規劃好網站的結構和內容。

  • 設計網站結構：你的網站應該有一個首頁，列出所有食譜，每個食譜都有其獨立的詳細頁面。
  • 選擇 Schema 屬性：根據你的食譜內容，選擇適合的 Schema 屬性，確保資料的完整性和準確性。例如，你需要提供詳細的食材清單和烹飪步驟。
  • 資料一致性：確保所有時間格式都使用 ISO 8601 標準，例如 PT1H 表示 1 小時，PT30M 表示 30 分鐘。這有助於搜尋引擎正確理解你的資料。 在 WordPress 中實作 Recipe Schema WordPress 提供許多方便的插件來協助你添加 Schema.org 結構化資料。
  • 使用 Yoast SEO 或 Schema Pro 插件：這些插件可以自動生成 Schema 程式碼，你只需在編輯食譜頁面時填寫相關資訊即可。
  • 手動添加 JSON-LD 到主題檔案：如果你更熟悉程式碼，也可以手動將 JSON-LD 程式碼添加到你的 WordPress 主題檔案中。以蛋糕食譜為例，你需要標記每種食材的數量和烹飪步驟。 驗證與測試 完成 Schema 添加後，你需要驗證其正確性。
  • 使用 Google Rich Results Test：這個工具可以幫助你測試你的 Schema 程式碼是否正確，並找出可能的錯誤。
  • 使用 Schema Markup Validator：這個工具可以進一步驗證你的 Schema 程式碼是否符合 Schema.org 的標準。
  • 在 Google Search Console 檢查結果：提交你的網站到 Google Search Console，查看你的食譜是否正確顯示在豐富結果中。 課堂練習 現在，請你在自己的 WordPress 網站上為一個食譜頁面添加 Recipe Schema。記得使用 Google Search Console 提交頁面，並通過 Rich Results Test 驗證。請記錄你的測試結果，並與同學分享你的心得。 結語 學習使用 Recipe Schema 能讓你的食譜網站更具吸引力，提升搜尋引擎排名，並帶來更多流量。除了 Recipe Schema 外，你還可以進一步探索其他 Schema 類型，例如 NutritionInformation (營養資訊) 或使用 Google Tag Manager 來管理你的 Schema 資料。持續學習和應用這些知識，將有助於你打造一個成功的食譜網站！

打造部落格網站的 Schema.org 結構化資料：詳細介紹與規劃

大家好！今天我們要來學習如何使用 Schema.org 結構化資料來優化你的部落格網站。你可能聽過 SEO (搜尋引擎最佳化)，但你知道 Schema.org 可以讓你的部落格在搜尋結果中更醒目嗎？它能讓 Google 等搜尋引擎更了解你的網站內容，進而提升你的網站排名和流量！ 想像一下，一個關於台南美食的部落格文章，如果沒有使用 Schema，在 Google 搜尋結果中只會顯示單調的標題和網址，可能就錯失了許多點擊機會。而加入 Schema 後，Google 就能夠顯示文章的圖片、作者、發布日期，甚至評分，讓你的文章看起來更吸引人，更容易被使用者點擊！這正是 Schema.org 的威力！ 什麼是 Article Schema Schema.org 是一個合作開發的詞彙庫，提供了許多不同的 Schema 類型，讓你可以用結構化的資料來描述網站的內容。其中，「Article」Schema 特別適合部落格文章。Article Schema 又有不同的子類型，例如 BlogPosting (部落格文章) 和 NewsArticle (新聞報導)。 常見的 Article Schema 屬性包含：

  • headline：文章標題 (例如：台南必吃美食十選)
  • author：作者 (例如：小明的台南美食日記)
  • datePublished：發布日期 (例如：2024-10-27)
  • image：文章圖片 (例如：網址連結至圖片) 一個台南旅遊部落格文章的 JSON-LD 範例： 
    {
"@context": "https://schema.org",
"@type": "BlogPosting",
"headline": "台南安平老街深度遊記",
"image": "https://example.com/anping.jpg",
"datePublished": "2024-10-26",
"author": {
"@type": "Person",
"name": "小明"
},
"description": "探訪台南安平老街的歷史建築與特色小吃。"
}

    規劃部落格網站 在開始使用 Schema 之前，你需要先規劃你的網站結構。你的首頁可能顯示文章摘要，點擊摘要則連結到文章詳情頁。 選擇適合的 Schema 子類型非常重要，例如，旅遊文章適合使用 BlogPosting，而新聞報導則適合使用 NewsArticle。 確保所有文章的 Schema 資訊一致性，例如作者資訊要正確，日期要正確，避免混亂。 在 WordPress 中實作 Article Schema WordPress 提供許多方便的工具來實作 Schema。

  • 使用外掛：Yoast SEO 和 Schema Pro 都是相當普及的 WordPress 外掛，它們可以自動產生結構化資料，省去不少手動設定的麻煩。
  • 手動添加 JSON-LD：如果你比較熟悉程式碼，也可以直接將 JSON-LD 程式碼添加到你的 WordPress 主題檔案中。 例如，一個關於台南美食的旅遊文章，你可以使用以下方法標記標題、作者和圖片：
    1. 使用 Yoast SEO 等外掛，在編輯文章時填寫相關資訊。
    2. 手動加入 JSON-LD 程式碼到文章頁面底部： (請注意，這需要一定的程式能力) 將上述 JSON-LD 範例中的內容替換成你的文章資訊。 驗證與測試 完成 Schema 的設定後，務必進行驗證和測試。你可以使用 Google 的工具：
  • Google Rich Results Test：這個工具可以協助你檢測 Schema 的正確性，並找出潛在錯誤。
  • Schema Markup Validator：另一個驗證工具，可以提供更詳細的 Schema 驗證結果。 此外，你也可以在 Google Search Console 中檢查你的網站是否正確顯示豐富的搜尋結果。 課堂練習 現在，請你在你的 WordPress 網站上為一篇部落格文章添加 BlogPosting Schema，提交頁面至 Google Search Console 並使用 Rich Results Test 驗證，最後記錄你的測試結果。 結語 學習使用 Article Schema 可以讓你的部落格文章在搜尋結果中脫穎而出，吸引更多讀者！ 這只是一開始，之後你可以探索更多 Schema 類型，例如 BreadcrumbList (麵包屑導航) 來改善網站導覽，或者使用 Google Tag Manager 來管理你的 Schema。 別忘了，結構化資料對提升部落格網站的流量有很大的幫助，持續學習和應用，你一定可以打造一個成功的部落格網站！