大家好！這堂課我們要學習 API 和 JSON 格式，它們是現代網頁開發和搜尋引擎最佳化的重要基石。想像一下，一個網站永遠只顯示相同的內容，那是不是很無聊呢？天氣預報、新聞資訊、商品庫存等等，都需要不斷更新。這就是 API 的重要性所在！API 就像是一個網站的「資料供應商」，讓網站可以動態地取得並顯示最新的資訊。而 JSON 則是用來傳輸這些資訊的「包裝盒」，它輕巧、易讀，讓不同程式之間的溝通更順暢。此外，我們還會學習如何利用 API 回應資料與 Schema.org 結構化資料結合，提升網站的 SEO 表現。 什麼是 API API，全名是 Application Programming Interface，中文翻譯為應用程式介面。你可以把它想像成兩個應用程式之間的橋樑，讓它們可以互相溝通和交換資料。一個應用程式會透過 API 請求資料，另一個應用程式則會回應請求的資料。例如，一個天氣預報網站會使用 OpenWeather API 請求天氣資料，然後將這些資料顯示在網站上。如果沒有 API，這個網站就必須自己撰寫程式來取得天氣資料，不僅費時費力，而且資料可能不完整或不準確。 JSON 在 API 中的角色 JSON，全名是 JavaScript Object Notation，是一種輕量級的資料交換格式。由於它易於閱讀和解析，而且可以被多種程式語言支援，因此成為 API 最常用的資料格式。JSON 使用簡單的文字格式，可以方便地表示物件和陣列，大大降低了資料處理的複雜度。例如，一個天氣 API 的回應可能會長這樣：{ “city”: “台南”, “temp”: 28 }，這表示台南的溫度是 28 度。 理解 JSON 格式 JSON 的結構很簡單，主要包含物件和陣列兩種基本元素：
- 物件：使用大括號 {} 包圍，包含一組鍵值對。鍵是用雙引號括起來的字串，值可以是字串、數字、布林值（true 或 false）、物件、陣列或 null。例如：{ “name”: “小明”, “age”: 20, “isStudent”: true }
- 陣列：使用中括號 [] 包圍，包含一個有序的值列表。例如：[“蘋果”, “香蕉”, “橘子”]
- 鍵值對：鍵必須是雙引號字串，值則要符合 JSON 的資料類型。例如：”city”: “台北” 一個更複雜的 API 回應範例： { “event”: { “name”: “台南音樂節”, “date”: “2025-06-01” } } API 與 Schema.org 的結合 為了讓搜尋引擎更好地理解網站的內容，我們可以使用 Schema.org 結構化資料。Schema.org 提供了一套標準化的語彙，可以描述網頁上的各種內容，例如產品、文章、事件等等。我們可以將 API 回應的 JSON 資料轉換成 Schema.org 的 JSON-LD 格式，然後將其嵌入到網頁中。例如，上面「台南音樂節」的 JSON 資料，可以轉換成 MusicEvent 的 Schema.org JSON-LD，然後嵌入 WordPress 網站，提升 SEO 效果。 實作與測試 API 和 JSON 以下是一些實作步驟：
- 使用公開 API：例如使用 OpenWeather API 獲取天氣資料，你可以透過瀏覽器直接輸入 API網址，或者使用 Postman 等工具來測試 API。
- 在 WordPress 中使用外掛或手動程式碼：WordPress 提供 WP REST API 外掛或可以手動加入 JSON-LD 程式碼。
- 驗證 JSON 和 Schema.org 有效性：使用 JSONLint 驗證 JSON 格式是否正確，使用 Google Rich Results Test 檢測 Schema.org 結構化資料是否正確嵌入並被搜尋引擎理解。 課堂練習 請使用一個免費的天氣 API (例如 OpenWeatherMap API) 獲取 JSON 資料，解析其結構，標記出物件和陣列，然後將資料轉換成 Recipe Schema 的 JSON-LD 格式，嵌入 WordPress 網站，最後使用 Google Rich Results Test 驗證其有效性。 結語 學習 API 和 JSON 是成為優秀網頁開發者的重要步驟。透過 API，我們可以輕鬆地整合各種服務，打造更動態、更豐富的網站。而 JSON 則是傳輸資料的最佳選擇，讓資料交換更有效率。希望透過這堂課的學習，你們可以對 API 和 JSON 有更深入的理解，並將它們應用在自己的網頁開發專案中。接下來，你們可以進一步學習 REST API 設計，或是使用 Python 等程式語言來處理 JSON 資料。加油！
