GTM 課程:使用 Google Tag Manager 建立 Schema.org 結構化資料於特定路徑頁面

大家好!這堂課將帶領各位學習如何使用 Google Tag Manager (GTM) 來提升網站的搜尋引擎優化 (SEO)。GTM 是一個強大的標籤管理工具,它可以幫助我們更有效率地管理網站上的各種標籤,例如 Google Analytics、廣告追蹤像素等等。更重要的是,它能簡化 Schema.org 結構化資料的部署,讓我們的網站更容易被搜尋引擎理解,進而提升在搜尋結果中的排名和呈現。 想像一下,一個台南活動網站(例如:一個使用 WordPress 建立的台南活動網站,沒有使用 Schema),它的活動資訊可能很難在 Google 搜尋結果中以豐富的格式呈現。使用者可能只能看到單調的標題和網址連結,錯失了許多吸引點擊的機會。而 Schema.org 結構化資料,像是 BreadcrumbList(麵包屑導航),就能讓 Google 理解網站的內容架構,進而顯示更豐富、更吸引人的搜尋結果,提升點擊率。這堂課將教你如何利用 GTM,輕鬆地在網站上部署 Schema.org 結構化資料。 課程目標: 本課程旨在讓各位學生能獨立使用 GTM 在特定頁面路徑(例如 /events/*)部署 BreadcrumbList Schema,進而提升網站 SEO 和用戶導航體驗。透過實作練習,讓各位能將理論應用於實際操作,並建立紮實的 GTM 和 Schema.org 應用能力。 課程結構與進度 (共 4 週,每週 2-3 小時): 第一週:GTM 入門與設置

  • 課程目標:了解 GTM 的基本概念,並完成 GTM 帳戶的註冊和容器的建立,以及在 WordPress 網站上安裝 GTM。
  • 內容:
  • 註冊 Google Tag Manager 帳戶並創建容器。
  • 在 WordPress 網站 (https://seo.tainanoutlook.com 此網址僅為範例,實際操作可能需要取得網站權限) 嵌入 GTM 程式碼 (透過外掛或主題)。
  • 介紹 GTM 介面:標籤、觸發器、變數,並說明三者之間的關係。
  • 實作練習:安裝 GTM,設置一個簡單的頁面檢視標籤並使用預覽模式驗證其運作情況。
  • 為什麼學習這個:理解 GTM 的基本架構是後續學習的基礎,能讓你快速上手並建立信心。 第二週:觸發器與路徑設定
  • 課程目標:學會設定觸發器,只在特定頁面路徑觸發指定的標籤,精準控制 Schema 的部署位置。
  • 內容:
  • 學習觸發器類型(頁面檢視、點擊、表單提交)。
  • 配置頁面路徑觸發器(例如 URL 包含 /events/)。
  • 使用內建變數(例如 Page URL、Page Path)過濾特定頁面。
  • 實作練習:創建一個觸發器,僅在 /events/* 路徑觸發標籤,並使用預覽模式驗證觸發行為。
  • 為什麼學習這個:精準的觸發器設定能確保 Schema 只在目標頁面生效,避免不必要的資源浪費和錯誤訊息。 第三週:Schema.org JSON-LD 與 BreadcrumbList
  • 課程目標:學習 Schema.org 的基本概念以及如何使用 JSON-LD 語法建立 BreadcrumbList Schema,並在 GTM 中動態生成麵包屑。
  • 內容:
  • 介紹 Schema.org 和 JSON-LD(@context、@type)。
  • 設計 BreadcrumbList Schema (範例:{ “@context”: “https://schema.org“, “@type”: “BreadcrumbList”, “itemListElement”: […] })。理解各個參數的意義。
  • 在 GTM 中創建 JSON-LD 標籤,動態生成麵包屑(使用變數如 Page Path)。學習如何使用 GTM 的變數功能來提取頁面資訊,並應用於 Schema 的生成。
  • 實作練習:為 /events/* 頁面部署 BreadcrumbList Schema,並檢查網站原始碼確認 Schema 是否已正確導入。
  • 為什麼學習這個:學習 Schema.org 和 JSON-LD 是提升 SEO 的關鍵步驟,BreadcrumbList 能改善使用者體驗,並提升網站的搜尋結果呈現。 第四週:驗證與最終項目
  • 課程目標:學會使用工具驗證 Schema 的正確性,並完成最終專案,獨立為網站部署 Schema。
  • 內容:
  • 使用 Google Rich Results Test 和 Schema Markup Validator 驗證 Schema。
  • 除錯常見問題(例如 JSON 語法錯誤、觸發器未生效)。
  • 最終項目:學生為 WordPress 網站的多個路徑(例如 /events/、/blog/)部署 BreadcrumbList Schema,驗證豐富結果並提交報告。報告需包含部署過程、遇到的問題及解決方案,以及驗證結果截圖。
  • 為什麼學習這個:學習如何驗證和除錯是確保 Schema 正確運作的關鍵,最終項目能讓各位將所學知識整合運用。 學習資源與工具:
  • GTM 官方文件 (support.google.com/tagmanager)
  • Schema.org 官方網站 (schema.org)
  • 免費工具:Google Rich Results Test、Schema Markup Validator、GTM 預覽模式 課堂練習與評估: 每個階段的實作練習都會有明確的評估標準,例如標籤是否正確觸發、Schema 是否有效等等。最終項目將評估學生獨立部署 Schema 的能力,以及報告的完整性。 為什麼學 GTM 與 Schema: 學習 GTM 能簡化網站標籤的管理,提高效率。學習 Schema.org 則能讓搜尋引擎更好地理解網站內容,提升網站 SEO,帶來更高的搜尋排名和點擊率。將 GTM 與 Schema 結合應用於 WordPress 網站,能有效提升網站的整體效能和使用者體驗。 結語: 完成本課程後,你將能獨立使用 GTM 部署 Schema,提升網站 SEO。鼓勵你繼續探索其他 Schema 類型,例如 Event、Article,以更精準地描述網站內容,進而提升網站的搜尋引擎排名及使用者體驗。 下一步建議:
  • 使用 GTM 管理其他標籤(例如 GA4、UTM 追蹤)。
  • 學習 JavaScript 增強 GTM 自訂功能。
  • 參加 GTM 社群 (例如 Measure Slack)。 相信你將在網站開發和 SEO 的領域裡獲得更豐碩的成果!

n8n 課程:第六週 – 最終項目與獨立應用

第六週的目標是讓各位同學獨立完成一個完整的 n8n 工作流程,展現你們在這個課程中所學到的自動化能力!我們將模擬一個真實世界的應用場景,例如:台南活動的自動化。透過這個最終項目,你們將能將所學知識融會貫通,並建立一個有實際應用價值的自動化系統。 最終項目要求:台南活動自動化工作流程設計 這個最終項目要求你們設計一個 n8n 工作流程,自動化台南活動資訊的收集、轉換和發布。想像一下,你是一個台南觀光網站的開發者,需要自動更新網站上的活動資訊。這個工作流程將包含以下步驟:

  • 從公開 API 或表單獲取台南活動資訊:許多活動平台提供公開的 API 或表單,可以讓您程式化地取得活動資訊。例如,您可以使用 Google Calendar API 獲取活動資訊,或是尋找其他提供台南活動資訊的公開 API 或表單。 請自行搜尋並選擇一個您覺得適合的資料來源。
  • 轉為 Event Schema JSON-LD:為了讓搜尋引擎更容易理解活動資訊,我們需要將取得的資料轉換成 Event Schema JSON-LD 格式。這是一種結構化資料格式,可以讓 Google 等搜尋引擎更準確地顯示您的活動資訊在搜尋結果中。 我們會在課堂上提供範例 JSON-LD 結構以及轉換的技巧。
  • 發布到 WordPress(包含 JSON-LD):將轉換後的 JSON-LD 資料發布到 WordPress 網站。這需要您在 WordPress 網站設定好接收資料的 API 或方法。 我們會提供一些 WordPress plugin 選項,讓資料發布更為便捷。
  • 發送 Slack 通知(新活動已發布):當新的活動資訊成功發布到 WordPress 後,發送 Slack 通知給相關人員,讓他們知道新的活動資訊已經更新。 實作步驟:循序漸進的指導 以下是一些更詳細的實作步驟,幫助你一步步完成這個最終項目:
  • 配置 Trigger(Webhook 或 Schedule):首先,您需要設定一個 Trigger 節點。您可以使用 Webhook 等待外部事件觸發,或者使用 Schedule 節點,設定一個固定的時間間隔自動執行工作流程。選擇哪一種 Trigger 取決於您選擇的資料來源更新頻率。 Webhook 通常用於即時更新,而 Schedule 則適合定期更新。
  • 使用 HTTP Request 獲取資料:使用 HTTP Request 節點向您所選的 API 或表單發送請求,取得台南活動資訊。您需要根據 API 文件設定正確的請求參數,例如 API key 和請求方法 (GET, POST 等)。
  • 使用 Set 節點生成 JSON-LD:使用 Set 節點將取得的資料轉換成 Event Schema JSON-LD 格式。 這個步驟需要您理解 JSON-LD 的結構,並使用 Set 節點的轉換功能將資料重新整理成符合規格的格式。
  • 使用 HTTP Request 發布到 WordPress:使用另一個 HTTP Request 節點將 JSON-LD 資料發布到 WordPress。您需要先設定好 WordPress 的 API 端點,並設定正確的請求參數。
  • 配置 Slack 節點發送通知:最後,使用 Slack 節點設定發送通知。您需要在 Slack 上創建一個應用程式並取得相關的 API token,才能讓 n8n 與 Slack 進行整合。 驗證與除錯:確保工作流程運作正常 完成工作流程後,務必仔細驗證其正確性。您可以使用以下工具:
  • JSONLint:驗證 JSON-LD 資料的格式是否正確。
  • Rich Results Test:測試您的 WordPress 文章是否正確顯示 Event Schema JSON-LD 資料,以及在 Google 搜尋結果中的呈現方式。
  • n8n 日誌:n8n 的日誌功能記錄了工作流程執行的詳細資訊,您可以透過檢查日誌來找出錯誤原因。「日誌」指的是 n8n 系統記錄的工作流程執行過程,包含所有節點的輸入輸出資訊,方便除錯。 課堂練習:展現您的自動化實力 請各位同學獨立完成這個最終項目,並將完成的工作流程截圖以及 WordPress 文章 URL 提交。我們將在課堂上分享各位同學的成果,並互相學習。 結語:邁向自動化專家的道路 恭喜各位同學完成本課程!希望透過這個課程,你們能體會到自動化的魅力和實用性。 鼓勵大家加入 n8n 社群 (community.n8n.io),持續學習和探索更多 n8n 的應用,例如 CI/CD 等進階應用。 學會獨立建置自動化系統,將會是你在未來職場上非常有競爭力的技能! 祝各位在自動化的道路上持續精進!

n8n 課程:第五週 – 進階功能與 AI 整合

這週我們將學習 n8n 的進階功能,並探索如何將 AI 整合到你的自動化工作流程中!學習這些內容能大幅提升你建置自動化系統的能力,例如,你可以利用 AI 自動生成台南活動網站的吸引人標題,進而提升網站內容質量和使用者體驗。 這週的目標是讓你更深入了解 n8n 的強大功能,並將其與當今最熱門的 AI 技術結合。 進階功能介紹 自訂節點:創造你的專屬工具 n8n 允許你創建自訂節點,用 JavaScript 撰寫程式碼來擴展 n8n 的功能。 這代表你可以打造符合你專屬需求的節點,讓你的自動化流程更有效率。 例如,你可以建立一個自訂節點來處理特定格式的資料,或者與你公司內部的系統整合。 我們會學習一個簡單的 JavaScript 節點範例,教你如何建立一個節點來處理文字資料。

  • 實作步驟:我們將逐步學習如何建立一個簡單的 JavaScript 節點,例如將文字轉換成大寫。 這包含撰寫 JavaScript 程式碼,打包成 n8n 節點,並在工作流程中使用它。
  • 範例:建立一個將輸入文字轉換成大寫的 JavaScript 節點。
  • 為什麼有用:學習自訂節點讓你更彈性地應付各種自動化任務,突破現有節點的限制。 錯誤處理:預防意外發生 在建置自動化流程時,錯誤處理至關重要。 一個小小的錯誤就可能讓整個流程中斷。 n8n 提供了 Try/Catch 節點,讓你優雅地處理錯誤,避免流程崩潰。 我們將學習如何使用 Try/Catch 節點來捕捉並處理可能的錯誤。
  • 實作步驟:我們將示範如何使用 Try/Catch 節點來處理網路請求錯誤,例如 API 回應失敗的情況。
  • 範例:建立一個工作流程,使用 Try/Catch 節點來處理從外部 API 獲取資料時可能發生的錯誤。
  • 為什麼有用:學習錯誤處理可以確保你的自動化流程穩定運行,即使遇到意外情況也能繼續運作。 環境變數:安全管理你的 API 金鑰 在與外部服務整合時,例如使用 OpenAI 或其他 API,你通常需要使用 API 金鑰。 直接將 API 金鑰寫入你的工作流程中是不安全的。 n8n 提供環境變數的功能,讓你安全地儲存和管理這些敏感資訊。
  • 實作步驟:我們將學習如何在 n8n 中設定環境變數,並在你的工作流程中使用這些變數。
  • 範例:設定一個環境變數來儲存你的 OpenAI API 金鑰,並在使用 OpenAI 節點時引用這個變數。
  • 為什麼有用:環境變數確保你的 API 金鑰不會被公開,提升你的系統安全性。 AI 整合:讓你的自動化更聰明 這部分我們將學習如何將 AI 整合到你的 n8n 工作流程中,我們會以 OpenAI 和 Grok 為例,示範如何利用 AI 提升你的自動化效率。 AI 模型可以自動產生內容,分析資料,甚至做決策。
  • 配置 AI 節點:你需要註冊 OpenAI 或 Grok 帳號並取得 API 金鑰,然後在 n8n 中配置對應的節點。
  • 自動生成內容:學習如何使用 AI 節點自動生成文字內容,例如活動描述總結、文章標題等等。 我們將學習如何撰寫有效的提示 (prompt) 來獲得最佳的 AI 產出。
  • 實作步驟:我們將逐步示範如何使用 OpenAI 或 Grok 的節點來生成文字內容。
  • 範例:使用 OpenAI 節點根據活動資料自動生成活動摘要。
  • 為什麼有用:AI 可以自動化許多繁瑣的任務,例如內容創作,大幅提升你的生產力。 實作工作流程:AI 賦能你的台南活動網站 現在我們將把學到的知識整合起來,建立一個完整的工作流程:
  • 使用第 3 週的台南活動資料。
  • 使用 AI 節點 (例如 OpenAI 或 Grok) 生成吸引人的活動標題。
  • 將生成的標題與活動資料一起發布到你的 WordPress 網站。 課堂練習 請你建立一個工作流程,使用 AI 生成活動標題,並將其發布到你的 WordPress 網站。 請分享你的工作流程和成果! 結語 恭喜你完成了第五週的課程!希望你對 n8n 的進階功能和 AI 整合有了更深入的理解。 鼓勵你進一步探索 n8n 的 LangChain 整合,這將讓你更輕鬆地使用各種大型語言模型。 下週我們將進行最終專案的設計和實作,請準備好展現你的自動化成果! AI 自動化擁有巨大的潛力,希望透過這門課程,你也能感受到 AI 技術為你帶來的便利與效率。

n8n 課程:第四週 – Schema.org 與 JSON-LD 應用

各位同學大家好!歡迎來到 n8n 課程的第四週!這週我們將把前面學習到的 API 應用和工作流程設計技巧,結合 SEO 優化,讓你們的網站內容更容易被搜尋引擎找到!我們的目標是將從 API 取得的資料(例如,台南的各項活動資訊),轉換成符合 Schema.org 規範的 JSON-LD 格式,並將其嵌入 WordPress 網站,讓這些活動資訊能顯示在 Google 的豐富結果中,大幅提升網站的能見度。想像一下,台南的活動資訊直接出現在 Google 搜尋結果頁面,是不是很吸引人呢? Schema.org 與 JSON-LD 簡介 Schema.org 是一個合作組織,制定了一套結構化資料的標準,讓搜尋引擎更容易理解網頁內容。 透過 Schema.org,我們可以告訴搜尋引擎這個網頁是關於什麼,例如:這是個產品頁面、文章、活動等等。而 JSON-LD (JavaScript Object Notation for Linked Data) 是一種輕量級的資料交換格式,非常適合用來傳送 Schema.org 的結構化資料。 JSON-LD 使用特定的語法,例如 “@context” 和 “@type”,來描述資料的結構和類型。 “@context” 指定 Schema.org 的命名空間,”@type” 則指定資料的類型,例如 “Event”、”Product”、”Article” 等等。 學會使用 Schema.org 和 JSON-LD,能讓你的網站更容易被搜尋引擎理解,提升 SEO 排名。 創建 Event Schema 我們以「台南音樂節」為例,來看看 Event Schema 如何編寫: { “@context”: “https://schema.org“, “@type”: “Event”, “name”: “台南音樂節”, “startDate”: “2024-03-08T19:00”, “endDate”: “2024-03-09T22:00”, “location”: { “@type”: “Place”, “name”: “台南市立體育場” } } 這個例子中,我們定義了活動的名稱、開始和結束時間,以及活動地點。 你可以根據實際情況添加更多屬性,例如描述、票價等等,讓資料更完整豐富。 實作工作流程 接下來,我們將實際操作一個工作流程,把從 Google Forms 取得的活動資料轉換成 Event Schema JSON-LD,並嵌入 WordPress。

  • 步驟一:使用第三週建立好的 Google Forms 活動資料擷取工作流程。 請確保你已經可以從 Google Forms 取得活動的相關資訊,例如活動名稱、時間、地點等。
  • 步驟二:新增一個「Set」節點,這個節點用來將取得的資料轉換成 JSON-LD 格式。在「Set」節點中,你需要手動輸入或使用 Javascript 表達式,將資料轉換成符合 Event Schema 的 JSON-LD 格式。 記得參考上面的範例,將資料對應到正確的屬性。
  • 步驟三:新增一個「HTTP Request」節點,用來將生成的 JSON-LD 嵌入 WordPress。 你需要設定 HTTP Request 節點的請求方法為 POST,URL 指向 WordPress 的 API 端點,用於更新文章的 meta 資料。 你需要研究 WordPress 的 REST API,了解如何更新文章的 meta 資料。 你需要在 WordPress 中建立一個自訂欄位,用來存放 JSON-LD 資料。
  • 步驟四:測試並調整工作流程,確保資料能正確地傳送到 WordPress 並更新文章的 meta 資料。 驗證 JSON-LD 完成後,請使用 Google Rich Results Test (https://search.google.com/test/rich-results) 工具來驗證你的 JSON-LD 是否有效,以及是否會在 Google 搜尋結果中顯示豐富結果。此外,你也可以使用 JSONLint (https://jsonlint.com/) 工具檢查 JSON-LD 格式的正確性。 「豐富結果」指的是在 Google 搜尋結果中,除了普通的文字連結外,還會額外顯示圖片、星級評分、活動日期時間等資訊,更能吸引使用者點擊。 課堂練習 現在,請大家將第三週的活動資料,利用今天學習到的方法轉換成 Event Schema JSON-LD,並嵌入到你的 WordPress 網站中。 完成後,請使用 Google Rich Results Test 驗證你的成果。 結語 恭喜你完成本週的課程!我們學習了如何利用 Schema.org 和 JSON-LD 來提升網站的 SEO。 除了 Event Schema 外,還有許多其他的 Schema 類型,例如 Article、Product 等,你可以進一步探索。 下週我們將學習 n8n 更進階的功能,敬請期待! 請記住,SEO 是個長期的投資,持續優化你的網站,將能帶來持續的流量和效益。 希望大家都能在 SEO 的道路上越走越順利!

n8n 課程:第三週 – WordPress REST API 串接

本週我們將學習如何使用 n8n 連接到 WordPress 的 REST API,並自動化網站內容的發布。想像一下,你的台南活動網站可以自動將使用者透過 Google 表單提交的活動資訊,直接發布成新的文章,是不是非常方便又有效率呢?這將大幅提升網站的維護效率,讓你可以專注於其他更重要的任務! WordPress REST API 簡介 REST API,全名為 Representational State Transfer Application Programming Interface,是一種架構風格,讓不同的應用程式可以透過網路互相溝通。WordPress 也提供了 REST API,讓我們可以透過程式碼來操作 WordPress 的資料,例如新增、修改、刪除文章、頁面等等。WordPress 的 REST API 主要位於 /wp-json/ 這個端點底下,例如 /wp/v2/posts 就是用來管理文章的 API 端點。 我們可以透過這個端點來取得文章列表,或是新增、更新、刪除單篇文章。 了解 REST API,就能夠讓你的網站與其他服務無縫整合,擴展網站的功能。 配置 n8n 連接到 WordPress 現在我們來學習如何使用 n8n 連接到你的 WordPress 網站。 首先,你需要知道你的 WordPress 網站的 REST API 位置,通常是 https://你的網站網址/wp-json/ 。 我們會主要使用 n8n 的 HTTP Request 節點。

  • 設定 HTTP Request 節點:打開 n8n 工作流程編輯器,新增一個 HTTP Request 節點。 在「請求方法」欄位選擇「POST」,因為我們要新增文章到 WordPress。 在「URL」欄位輸入你的 WordPress 文章新增 API 端點,例如 https://seo.tainanoutlook.com/wp-json/wp/v2/posts (請將 seo.tainanoutlook.com 替換成你的 WordPress 網站網址)。
  • 使用基本認證:要讓 n8n 能夠存取你的 WordPress 資料,你需要提供認證。 在 HTTP Request 節點的「認證」設定中,選擇「基本認證」。 你必須先在你的 WordPress 後台建立一個新的使用者帳號,並記下其使用者名稱和密碼。 將這些資訊填入 n8n 的認證設定中,這樣 n8n 就能夠以這個使用者帳號的身份存取你的 WordPress 網站。 「認證」簡單來說,就是確認你的 n8n 有權限操作你的 WordPress 網站。
  • 測試獲取文章:在設定好認證之後,你可以先測試一下能不能成功取得文章列表。 將 HTTP Request 節點的「請求方法」改成「GET」,URL 保持不變,然後執行工作流程。 如果成功,你應該會在節點的輸出中看到你的 WordPress 文章列表的 JSON 資料。 這一步驟能幫助你確認 n8n 是否成功連接到 WordPress。 實作工作流程:自動發布活動資訊 接下來,我們來建立一個完整的自動化工作流程,讓 Google 表單提交的資料自動發布到 WordPress。
  • 使用 Google Forms Trigger:新增一個 Google Forms Trigger 節點。這個節點會監聽你的 Google 表單是否有新的提交。你需要先在 Google Cloud Platform 上設定好 Google Forms 的 API 權限,並取得相關的認證資訊。
  • 提取表單資料:在 Google Forms Trigger 節點的下方,新增一個「Set」節點。這個節點用來整理 Google 表單提交的資料,例如活動名稱、日期、地點等等。 你需要根據你的 Google 表單欄位名稱,將資料轉換成 WordPress 文章需要的格式,例如將活動名稱設定為 title,日期設定為 date。 這需要你理解 JSON 資料結構。
  • 使用 HTTP Request 節點發布到 WordPress:最後,將整理好的資料傳遞到 HTTP Request 節點。 你需要在 HTTP Request 節點的「主體」欄位中設定要發布的 JSON 資料,例如:
    {
    "title": "{{活動名稱}}",
    "content": "{{活動說明}}",
    "date": "{{活動日期}}"
    }

    課堂練習 現在,請你親自嘗試建立一個工作流程,從你的 Google 表單獲取活動資料,並將其發布到你的 WordPress 網站。 完成後,請檢查你的 WordPress 網站,確認新文章是否已成功發布。 這個練習能讓你熟練掌握 n8n 和 WordPress REST API 的整合。 結語 恭喜你完成了本週的課程! 希望你能夠透過本週的學習,了解如何使用 n8n 來自動化 WordPress 的內容發布。 你可以嘗試使用其他 WordPress REST API 端點,例如 /wp/v2/categories 來管理分類,進一步擴展你的自動化功能。 下週我們將學習如何使用 Schema.org 豐富你的網站內容,提升 SEO 效果。 透過 n8n 和 WordPress REST API 的結合,你將可以輕鬆管理你的網站內容,並提升網站效率! 請務必多加練習,熟能生巧!

n8n 課程:第二週 – 基礎工作流程與 API 整合

大家好!歡迎來到 n8n 課程的第二週!這週我們將學習 n8n 的核心節點,學習如何處理 JSON 資料,以及如何連接公開的 API。這些技能是日後建構網站自動化流程,例如自動更新 WordPress 網站內容或其他任務的基石。我們會以實用的例子,例如獲取台南的天氣資料,來加深您的理解。 核心節點介紹 這週我們會著重在三個非常重要的 n8n 節點:HTTP Request 節點、IF 節點和 Set 節點。

  • HTTP Request 節點:這個節點是我們與外部世界溝通的橋樑。它允許我們發送 HTTP 請求,例如 GET、POST 等,到不同的 API 端點(API Endpoint,簡單來說就是 API 的網址)。我們可以透過它向 API 請求資料,並接收 API 回應的資料。
  • IF 節點:這個節點讓我們能根據條件來控制工作流程的執行方向。例如,我們可以設定一個條件,如果台南的天氣是晴天,就執行 A 動作;如果下雨,就執行 B 動作。
  • Set 節點:這個節點讓我們能對資料進行轉換和修改。例如,我們從 API 取得的資料可能是一個複雜的 JSON 物件,我們可以用 Set 節點來提取我們需要的特定欄位,方便後續處理。 理解 JSON 資料 JSON (JavaScript Object Notation) 是一種輕量級的資料交換格式,廣泛應用於網路應用程式中。它使用鍵值對 (key-value pair) 來儲存資料,可以包含物件 (object)、陣列 (array) 等資料結構。 舉例來說,一個 API 回應的 JSON 資料可能長這樣: { “city”: “台南”, “temp”: 28, “description”: “晴天” } 這個 JSON 資料包含三個鍵值對:city、temp 和 description,分別代表城市名稱、溫度和天氣描述。我們需要學習如何從這些 JSON 資料中提取我們需要的資訊。 連接到公開 API – 以 OpenWeather API 為例 我們將使用 OpenWeather API 作為範例,來學習如何連接公開的 API。OpenWeather API 提供全球各地的天氣資料。
  • 註冊並獲取 API 金鑰:首先,您需要到 OpenWeatherMap 網站註冊一個帳號,並取得您的 API 金鑰。這個金鑰是您訪問 API 的憑證。
  • 配置 HTTP Request 節點:在 n8n 中,設定一個 HTTP Request 節點,使用 GET 請求方法,並在 URL 欄位填入以下網址: GET https://api.openweathermap.org/data/2.5/weather?q=Tainan&appid=您的金鑰 請記得將「您的金鑰」替換成您剛取得的 API 金鑰。
  • 提取 JSON 資料:接收 API 回應的 JSON 資料後,我們可以使用 Set 節點提取我們需要的欄位,例如溫度(temp)和天氣描述(description)。 實作工作流程:獲取台南天氣並儲存到 Google Sheets 現在我們來建立一個實際的工作流程:
  • 使用 Schedule Trigger 節點設定每天執行一次。
  • 使用 HTTP Request 節點獲取台南的天氣資料。
  • 使用 Set 節點提取溫度和天氣描述。
  • 使用 Google Sheets 節點將資料儲存到您的 Google Sheets 表格中。 課堂練習 請嘗試建立一個工作流程,自動獲取台南的天氣資料,並將城市、溫度和天氣描述儲存到您的 Google Sheets 中。完成後,請分享您的工作流程和執行結果。 結語 恭喜您完成了第二週的課程!我們學習了 n8n 的核心節點,學會如何處理 JSON 資料,以及如何連接公開的 API。 API 技能非常實用,您可以嘗試連接其他公開 API,例如 Google Calendar API,來進一步練習。下週我們將開始學習如何將 n8n 與 WordPress 整合,敬請期待! 希望各位都能夠熟練運用這些技巧,在網站自動化領域有所斬獲!

n8n 課程:第一週 – 入門與安裝

大家好!歡迎來到 n8n 自動化課程的第一週!這門課將帶領各位學習如何運用 n8n 這個強大的工具,來簡化網站管理、優化 SEO 以及打造自動化工作流程。 n8n 是一個開源、基於節點的自動化工具,它就像樂高積木一樣,讓你用各種不同的「節點」組合出你想要的自動化流程。想像一下,如果要每天更新台南的活動資訊到你的網站,以前可能需要手動複製貼上,非常費時費力。但有了 n8n,你可以設定一個自動化的流程,定期抓取活動資訊並自動更新到網站,是不是很方便? 第一週的目標是讓大家成功安裝 n8n,熟悉它的介面,並且建立一個簡單的工作流程。我們將學習如何使用 Docker 安裝 n8n,以及如何在 n8n 的介面上建立、執行和測試工作流程。 什麼是 n8n n8n 是一個功能強大的工作流程自動化工具,它擁有超過 400 個以上的整合節點,可以連接到各種不同的應用程式和服務,例如電子郵件、雲端儲存、社群媒體等等。它採用視覺化的節點設計,讓你以圖形化的方式設計自動化工作流程,即使沒有程式設計經驗也能輕鬆上手。更棒的是,n8n 是完全免費且開源的,你可以自由下載和使用,這省下了不少成本。n8n 與 WordPress 和 SEO 的關聯性很高,你可以利用它自動化內容發布、監控網站關鍵字排名等等,進而提升網站的 SEO 效果。 安裝 n8n 以下提供兩種安裝 n8n 的方法:

  • 使用 Docker 安裝 (推薦給有 Linux 基礎的同學):
  • 確保你的電腦已經安裝 Docker 和 Docker Compose。
  • 打開你的終端機 (Terminal),輸入以下指令: docker run --name n8n -p 5678:5678 n8n
  • 安裝完成後,在你的瀏覽器輸入 http://localhost:5678 即可訪問 n8n。
  • 使用 n8n Cloud 試用:
  • 訪問 n8n Cloud 的官方網站 (https://cloud.n8n.io/),免費註冊一個帳號即可開始使用。 驗證安裝 不論你選擇哪種安裝方式,都請嘗試在瀏覽器訪問 http://localhost:5678 (或 n8n Cloud 的網址)。如果看到 n8n 的歡迎頁面,就代表你已經成功安裝 n8n 了! n8n 介面導覽 n8n 使用節點式設計,每個節點代表一個特定的動作或功能。一個工作流程是由一系列的節點組成,資料會從一個節點傳遞到下一個節點,最終完成整個自動化流程。
  • 節點 (Nodes): 執行特定任務的單元,例如接收資料、處理資料、發送資料等等。
  • 觸發器 (Trigger Nodes): 啟動工作流程的節點,例如定時觸發、收到新的電子郵件等等。 觸發器就像是一個開關,啟動整個自動化流程。
  • 動作 (Action Nodes): 執行特定動作的節點,例如發送電子郵件、更新資料庫等等。動作節點是執行具體任務的地方。
  • 工作流程畫布 (Workflow Canvas): 用於設計和組織節點的視覺化介面。 第一個工作流程 我們來建立一個簡單的工作流程,每小時發送一封電子郵件提醒你「台南活動更新檢查」。
  • 新增工作流程:點擊「Create a workflow」。
  • 新增 Schedule Trigger 節點:搜尋並拖曳「Schedule」節點到畫布上。設定每小時執行一次。
  • 新增 Email 節點:搜尋並拖曳「Email」節點到畫布上。填寫你的電子郵件帳號密碼,以及收件人、主旨和郵件內容(例如:「台南活動更新檢查」)。
  • 連接節點:將 Schedule 節點連接到 Email 節點。
  • 執行工作流程:點擊「Execute workflow」執行你的工作流程。 課堂練習 請各位同學自行安裝 n8n,並建立一個定時觸發的電子郵件工作流程,例如每 30 分鐘發送一封提醒郵件。完成後請截圖分享你的成果! 結語 恭喜你完成了第一週的課程!希望你已經對 n8n 有初步的認識,並成功安裝並使用 n8n。 建議大家多瀏覽 n8n 的官方文件 (docs.n8n.io),裡面有更詳細的說明和教學。 下週我們將學習如何整合 API,進一步擴展 n8n 的功能。記住,熟練掌握 n8n 的介面是未來進行更複雜自動化的基礎! 加油!

n8n 課程規劃:學會獨立使用工作流程自動化工具

各位同學大家好!這堂課將帶領大家學習 n8n,一個強大的開源、基於節點的工作流程自動化工具。想像一下,一個 WordPress 網站需要即時更新台南最新的活動資訊,例如音樂節的詳情、時間地點等等。如果沒有自動化工具,你必須手動一個個輸入這些資料,耗時又費力,更可能因為人為疏忽而延誤更新。n8n 正是解決這類問題的利器,它能幫助你自動化重複性任務,提升效率,並將網站的功能與 SEO 效益最大化。透過 n8n,你可以輕鬆地將 WordPress、API 和 Schema.org 整合在一起,讓你的網站更聰明、更有效率。 課程目標 本課程旨在讓各位同學學會獨立使用 n8n 設計自動化工作流程,並將其應用於 WordPress 網站和 SEO 優化。課程結束後,你將能夠獨立完成一個完整的台南活動自動化項目,從資料擷取到網站更新,完全自動化! 課程結構與進度 (6 週,每週 2-3 小時) 第一週:n8n 入門與安裝

  • 課程目標:了解 n8n 的基本概念和介面,並完成安裝及簡單的工作流程。
  • 內容:什麼是 n8n?n8n 的核心概念:節點、工作流程、觸發器、動作。n8n 的安裝方式 (Docker 或 n8n Cloud 免費試用)。
  • 實作練習:創建一個簡單的工作流程,例如:設定一個定時觸發器,每小時發送一封電子郵件通知自己「記得喝水!」。
  • 為什麼重要:學習 n8n 的基本操作,為後續更複雜的工作流程打下基礎。 第二週:基礎工作流程與整合
  • 課程目標:學習核心節點的使用,並將 n8n 與外部 API 整合。
  • 內容:核心節點介紹 (HTTP 請求、條件邏輯、數據轉換)。如何使用 HTTP 請求節點連接公開 API,並處理 JSON 資料。以 OpenWeather API 為例,學習如何取得台南的天氣資訊。
  • 實作練習:構建一個工作流程,從 OpenWeather API 獲取台南的天氣資料 (溫度、濕度等),並將資料儲存到 Google Sheets。
  • 為什麼重要:學習處理 API 資料和數據轉換是自動化流程中非常重要的環節。 第三週:WordPress REST API 串接
  • 課程目標:學會使用 n8n 連接 WordPress REST API,並自動發布文章或頁面。
  • 內容:WordPress REST API 介紹 (/wp-json/ 端點,例如 /wp/v2/posts)。使用 n8n 的 HTTP 請求節點與 WordPress API 互動,包含發布文章、更新文章等操作。
  • 實作練習:創建一個工作流程,從外部來源 (例如 Google 表單) 獲取台南活動資料 (名稱、時間、地點等),並自動將這些資料發布成 WordPress 文章。
  • 為什麼重要:學習將 n8n 與 WordPress 整合,實現網站內容的自動更新。 第四週:Schema.org 與 JSON-LD 應用
  • 課程目標:將資料轉換為 Schema.org JSON-LD 格式,並嵌入到 WordPress 頁面以提升 SEO。
  • 內容:Schema.org 的基本概念以及 Event 或 Article Schema 的使用。將 API 資料轉換為 Schema.org JSON-LD 格式。如何將 JSON-LD 嵌入到 WordPress 文章或頁面中。
  • 實作練習:將第三週建立的活動資料轉換成 Event Schema JSON-LD,嵌入到 WordPress 文章中,並使用 Google Rich Results Test 驗證 Schema 的正確性。
  • 為什麼重要:學習如何使用 Schema.org 提升網站的 SEO 效能,讓搜尋引擎更好地理解網站內容。 第五週:進階功能與 AI 整合
  • 課程目標:學習 n8n 的進階功能,例如自訂節點和錯誤處理,以及如何整合 AI 功能。
  • 內容:n8n 的自訂節點,錯誤處理機制。介紹如何使用 AI 節點 (例如 OpenAI 或 Grok) 處理文本資料。
  • 實作練習:構建一個工作流程,使用 AI 模型 (例如 OpenAI 的 GPT-3) 自動根據活動描述生成 WordPress 文章的標題。
  • 為什麼重要:學習如何擴展 n8n 的功能,以及如何利用 AI 技術提升自動化流程的效率。 第六週:最終項目與獨立應用
  • 課程目標:學生獨立完成一個完整的台南活動自動化項目,並展示其成果。
  • 內容:學生獨立設計一個工作流程,從公開 API 或表單獲取台南活動資訊,將資料轉換為 Event Schema,自動發布到 WordPress,並發送 Slack 通知。
  • 實作練習:完成最終項目,並使用 JSONLint 和 Google Rich Results Test 驗證成果。
  • 為什麼重要:驗證學生對 n8n 的掌握程度,並培養獨立解決問題的能力。學生將分享成果並互相討論優化方法。 學習資源與工具
  • n8n 官方文件 (docs.n8n.io)
  • n8n 社群論壇 (community.n8n.io)
  • 免費工具:Postman, JSONLint, Google Rich Results Test
  • 公開 API:OpenWeather, Google Sheets 課堂練習與評估 每個階段都將包含實作練習,評估標準包括工作流程是否成功運行、JSON 資料是否正確有效,最終項目將評估學生獨立完成自動化任務的能力。 為什麼學 n8n? n8n 是一個免費開源的工具,能大幅提升你的工作效率,節省開發成本。它支援 400 多種整合,並擁有活躍的社群,能幫助你快速解決問題。n8n 與 WordPress 和 SEO 的結合,能讓你的網站更具競爭力。 結語 完成本課程後,你將能夠獨立使用 n8n 自動化網站任務,並提升你的網頁開發和 SEO 技能。 鼓勵大家繼續探索 n8n 的進階應用,例如自訂節點或 CI/CD 整合。 下一步建議:
  • 參加 n8n 社群分享你的工作流程。
  • 學習 Python 或 JavaScript 增強自訂自動化能力。
  • 探索 n8n 的 AI 功能 (例如 LangChain 整合)。

認識 RESTful API:以 WordPress 串接為例

這堂課我們將學習 RESTful API,一個在現代網頁開發中非常重要的技術。它能讓你的網站變得更動態、更強大,同時也能提升你的網站搜尋引擎最佳化 (SEO) 效果。想像一下,一個沒有使用 API 的 WordPress 網站,要即時顯示最新的文章,需要不斷刷新整個頁面,不僅使用者體驗不好,對伺服器也造成負擔。而 RESTful API 則能解決這個問題,讓我們可以只更新需要的部分內容,提供更流暢的使用體驗。 什麼是 RESTful API? RESTful API,全名為 Representational State Transfer 應用程式介面,是一種軟體架構風格,它定義了一套規則,讓不同的軟體系統可以透過網路互相溝通和交換資料。簡單來說,它就像一個餐廳的菜單,你(客戶端)點餐(發送請求),餐廳(伺服器)根據你的點餐準備好你的餐點(回傳資料)。 RESTful API 的核心原則: – 客戶端-伺服器:前端和後端是分開的,前端負責顯示資料,後端負責處理資料。這樣設計讓開發和維護更方便。 – 無狀態:每次請求都是獨立的,伺服器不需要記憶之前的請求。這使得系統更穩定、更易於擴展。 – 可快取:可以快取資料,減少伺服器負擔,提高網頁載入速度。 – 分層系統:允許中間層(例如代理伺服器)存在,提高安全性及效能。 – 統一介面:使用標準的 HTTP 方法(GET、POST、PUT、DELETE)來操作資料。GET 用來取得資料,POST 用來新增資料,PUT 用來更新資料,DELETE 用來刪除資料。例如,使用 GET 方法向 WordPress 請求文章列表 /wp-json/wp/v2/posts。 – 簡單範例:想像你想要取得一篇特定的文章,你可以使用 GET 方法,並在網址後面加上文章 ID,例如:https://你的網站網址/wp-json/wp/v2/posts/123,伺服器就會回傳這篇文章的資料。 JSON 與 RESTful API JSON (JavaScript Object Notation) 是一種輕量級的資料交換格式,因為它易於閱讀和解析,所以被廣泛用於 RESTful API 中。一個 WordPress REST API 回應的 JSON 範例如下: { “id”: 1, “title”: { “rendered”: “台南旅遊指南” } } 這個 JSON 物件代表一篇文章,包含文章 ID (id) 和標題 (title)。 WordPress REST API 簡介 WordPress 內建了一個強大的 REST API,它的端點位於 /wp-json/。透過這個 API,你可以輕鬆地取得 WordPress 的文章、頁面、類別、標籤,甚至用戶資訊。例如,你可以透過 https://seo.tainanoutlook.com/wp-json/wp/v2/posts 取得所有文章的資料。 實作 WordPress REST API 串接 接下來,我們學習如何串接 WordPress REST API: – 使用瀏覽器或 Postman 測試 WordPress REST API 端點:直接在瀏覽器網址列輸入 /wp-json/wp/v2/posts 或使用 Postman 這個工具來測試,你就能看到 WordPress 回傳的 JSON 資料。 – 在 WordPress 主題中嵌入 JavaScript:使用 fetch API,從 /wp-json/wp/v2/posts 獲取文章資料,並將資料顯示在你的 WordPress 網站上。 – 將 API 回應的資料轉為 Schema.org JSON-LD:將取得的文章資料轉換成 Schema.org 的結構化資料 (例如 Article Schema),讓搜尋引擎更容易理解你的網站內容,提升 SEO 排名。 – 使用 WordPress 外掛:一些外掛,例如 WP REST API Controller,可以協助你自訂 API 端點或增強功能。 驗證與除錯 使用 Postman, JSONLint (驗證 JSON 格式是否正確), Google Rich Results Test (驗證結構化資料是否有效) 等工具來檢查 API 回應和 JSON-LD 的有效性。常見錯誤例如 401 未授權 (通常是因為 API 金鑰設定錯誤),或 JSON 語法錯誤。 課堂練習 請嘗試使用 WordPress REST API 獲取最新的五篇文章的 JSON 資料,解析其結構 (找出 id 和 title),然後將資料轉為 Article Schema 的 JSON-LD,嵌入 WordPress 頁面,最後使用 Google Rich Results Test 驗證你的結構化資料。 結語 學習 RESTful API 和 JSON 是現代網頁開發的必備技能,它能讓你的網站更加強大且具有動態性。 希望透過今天的學習,你對 RESTful API 有了初步的認識,並能應用在你的 WordPress 網站中。接下來,你可以嘗試學習使用 Python 等程式語言串接 API,或是開發你自己的 WordPress 自訂 API 端點,進一步提升你的網頁開發能力。

什麼是 API?搞懂 API 與 JSON 格式

大家好!這堂課我們要學習 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 資料。加油!

如何看懂 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 和三個屬性 namerecipeIngredientcookTime。接著,請嘗試在你的 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 資料。持續學習和應用這些知識,將有助於你打造一個成功的食譜網站!

優惠推廣

優惠推廣
不再顯示

確定今天不再顯示提示