程式碼潔癖必看:Schema JSON-LD 深度實戰指南
厭倦了外掛提供的「罐頭」Schema 嗎?資深工程師揭示,JSON-LD 才是與 Google 進行精準溝通的唯一信仰。我們教您跳脫傳統 SEO 外掛的框架,利用 PHP 深入 WordPress 的 functions.php,為您的「自訂內容類型」量身打造自動化且乾淨的結構化資料,輕鬆爭取豐富摘要,強化 E-E-A-T 信號。別再讓 Google 瞎猜你的網站內容!立即行動,讓浪花科技為您的數位資產進行一場徹底的體質改造,實現真正的技術 SEO 優化。
Google 看不懂你的網站?別再瞎猜!工程師的 Schema 結構化資料終極手術指南
嗨,我是浪花科技的資深工程師 Eric。今天我們不聊那些花俏的前端特效,也不談複雜的後端架構,來聊一個常常被行銷人員掛在嘴邊,但多數開發者卻只「略懂」的 SEO 核心技術:Schema 結構化資料。很多網站主花了大錢做內容、買廣告,卻發現自家網站在 Google 搜尋結果頁 (SERP) 上,看起來就是比隔壁老王家樸實無華,點閱率自然也上不去。問題可能就出在,你從來沒好好跟 Google「自我介紹」。
身為工程師,我們最討厭的就是「猜測」和「模糊地帶」。我們喜歡精準、有邏輯的溝通。而 Schema,就是你跟 Google、Bing 這些搜尋引擎之間最精準的溝通語言。你不是在「暗示」Google 你的頁面是一篇食譜,而是直接遞上一張標示清楚的卡片說:「嘿,這是一篇食譜,作者是誰,要烤多久,卡路里多少。」今天,我就要帶你從工程師的視角,徹底解剖 Schema,教你如何用程式碼親手為你的 WordPress 網站動一場「結構化資料手術」,讓 Google 徹底愛上你的內容。
到底什麼是 Schema?為什麼工程師該親自下場?
簡單來說,Schema.org 是一套共享的詞彙庫(vocabulary),由 Google、Microsoft、Yahoo! 和 Yandex 這些搜尋引擎巨頭共同創立。它的目的,就是讓網站上的資訊能被機器(主要是搜尋引擎爬蟲)更輕易地理解。這聽起來有點抽象,我舉個例子:
當你在網頁上寫下「阿凡達,2009 年,詹姆斯·卡麥隆」,人類一看就知道這是一部 2009 年由詹姆斯·卡麥隆執導的電影。但對爬蟲來說,這只是一串無意義的文字。它不知道「阿凡達」是電影名稱,「詹姆斯·卡麥隆」是導演。
但如果我們用了 Schema,就可以像這樣標記:
@type: Moviename: 阿凡達datePublished: 2009director: James Cameron
你看,這就清楚多了!我們等於是幫爬蟲把重點畫好,告訴它每個資訊片段的「意義」。這帶來的好處非常直接:
- 爭取 Rich Results (豐富摘要):像是評論星級、食譜時間、活動日期、FAQ 下拉選單等,這些酷炫的搜尋結果都能大幅提升點閱率。
- 強化 E-E-A-T 信號:透過 `Author` 和 `Organization` 等 Schema,你可以清楚地告訴 Google 這篇文章的作者是誰、由哪個權威機構發布,直接幫你的專業度、權威性、可信度加分。
- 餵養知識圖譜 (Knowledge Graph):當 Google 真正理解你網站上的「實體」(Entities) 及其關係時,就更有可能將你的資訊納入右側的知識圖譜卡片中。
- 為語音搜尋鋪路:當使用者問「嘿 Siri,巧克力蛋糕要烤多久?」,語音助理會優先尋找有著清晰結構化資料的食譜網站來回答。
JSON-LD:工程師的唯一信仰
實作 Schema 有幾種格式,像是 Microdata、RDFa,但現在請你把他們忘掉。說真的,在 2024 年之後的專案裡,如果還有人提議要把 Schema 標籤一個個塞進 HTML `` 或 `
我們的唯一選擇,也是 Google 官方推薦的格式,就是 JSON-LD (JavaScript Object Notation for Linked Data)。為什麼?
- 乾淨分離:JSON-LD 通常放在 “ 或 “ 的一個 “ 標籤裡,完全不侵入你原本的 HTML 結構。這對我們這些有程式碼潔癖的工程師來說,簡直是福音。
- 易於生成與維護:因為它就是一個 JSON 物件,在後端用 PHP 動態生成簡直不要太輕鬆。你可以輕易地用 WordPress 的函式抓取資料,然後 `json_encode` 就搞定了。
- 可讀性高:巢狀的鍵值對結構,讓複雜的實體關係一目了然。
WordPress 實作:從外掛便利貼到程式碼手術刀
我知道,很多人會說:「裝個 Yoast SEO 或 Rank Math 不就好了?」沒錯,這些外掛確實提供了基本的 Schema 功能,對於標準的文章 (Article)、頁面 (WebPage) 來說,它們做得不錯。但這就像是便利貼,方便快速,卻解決不了根本問題。
外掛的極限在哪?
當你的網站有「自訂內容類型 (Custom Post Type)」時,外掛就開始力不從心了。例如,你可能有一個「課程」CPT,包含講師、開課日期、價格等自訂欄位。或是「團隊成員」CPT,包含職稱、分機、專業領域。這時候,通用型的 SEO 外掛產生的 Schema 很可能只是陽春的 `Article` 或 `WebPage`,完全無法體現你內容的獨特性。
親自動手:用 `functions.php` 注入你的專屬 Schema
這才是今天的主菜。我們要做的,就是針對特定的頁面類型,用程式碼動態產生精準的 JSON-LD。假設我們有個名為 `course` 的自訂文章類型,並且用 ACF (Advanced Custom Fields) 建立了一些欄位,如 `course_teacher` (講師)、`course_price` (價格)、`course_start_date` (開課日)。
我們可以在佈景主題的 `functions.php` 或是一個自訂外掛中,加入以下程式碼:
<?php
add_action('wp_head', 'roamer_add_course_schema');
function roamer_add_course_schema() {
// 只在 'course' 這個自訂文章類型的單一頁面執行
if (is_singular('course')) {
global $post;
// 獲取自訂欄位的值,記得加上第二個參數 true 來取得單一值
$teacher_name = get_post_meta($post->ID, 'course_teacher', true);
$course_price = get_post_meta($post->ID, 'course_price', true);
$start_date = get_post_meta($post->ID, 'course_start_date', true); // 假設儲存格式為 Y-m-d
// 建立 Schema 陣列
$schema = array(
'@context' => 'https://schema.org',
'@type' => 'Course', // 使用 Course 類型
'name' => get_the_title(),
'description' => get_the_excerpt(),
'provider' => array( // 課程提供者,可以是組織
'@type' => 'Organization',
'name' => get_bloginfo('name'),
'url' => home_url()
),
// 如果有講師資訊,才加入 offers 區塊
'offers' => array(
'@type' => 'Offer',
'price' => $course_price ? $course_price : '0',
'priceCurrency' => 'TWD',
'availability' => 'https://schema.org/InStock'
)
);
// 如果有講師資訊,才加入 provider 區塊
if (!empty($teacher_name)) {
$schema['provider']['name'] = $teacher_name;
}
// 如果有開課日期,才加入 startDate 欄位
if (!empty($start_date)) {
$schema['startDate'] = date('Y-m-d', strtotime($start_date));
}
// 將 PHP 陣列轉換為 JSON-LD 格式並輸出
echo '<script type="application/ld+json">' . json_encode($schema, JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES | JSON_PRETTY_PRINT) . '</script>';
}
}
?>
看看這段程式碼,我們做了什麼?
- 用 `add_action(‘wp_head’, …)` 把我們的函式掛載到網站的 “ 區域。
- 用 `is_singular(‘course’)` 條件判斷,確保這段程式碼只會在「課程」的內頁執行,避免污染其他頁面。
- 使用 `get_post_meta()` 和 `get_the_title()` 等 WordPress 標準函式來動態抓取頁面資料。這才是精髓!你的 Schema 會跟著你的內容自動更新。
- 建立一個 PHP 陣列 `$schema`,結構完全對應 Schema.org 的 `Course` 類型。我們甚至可以做一些判斷,例如有價格才顯示 `offers` 區塊。
- 最後,使用 `json_encode()` 把它轉換成 JSON 字串,並用 “ 包起來輸出。其中 `JSON_UNESCAPED_UNICODE` 參數可以確保中文字不會變成亂碼,非常重要。
這就是工程師的作法——精準、自動化、可擴展。你可以依此類推,為任何 CPT 打造專屬的 Schema,不管是 `Event`、`Recipe` 還是 `LocalBusiness`。
驗證!驗證!驗證!工程師的偏執
寫完程式碼就結束了?當然不。身為一個負責任的工程師,「沒有測試過的程式碼就只是個昂貴的祈禱」。你必須驗證你產生的 Schema 是否正確無誤。
這裡有兩個你必須加到書籤的工具:
- Google 的 Rich Results Test (豐富結果測試):這個工具會告訴你,你的頁面「是否符合」Google 豐富結果的資格。它比較嚴格,只會針對 Google 支援的類型進行驗證。
- Schema Markup Validator:這是 Schema.org 官方的驗證器,它會檢查你的語法是否符合規範,不管 Google 支不支援。通常我會先用這個確保語法正確,再用 Google 的工具確認資格。
一個常見的坑是,很多 SEO 外掛會自己產生一套 Schema。當你又手動加入另一套時,頁面上就會有「重複」的結構化資料。雖然 Google 說它會試圖理解,但這無疑增加了混淆的風險。最好的作法是,如果你決定手動控制某個頁面類型的 Schema,就去 SEO 外掛裡關掉該頁面的自動生成功能,確保來源單一。
結論:不只是為了 SEO,更是為了未來
從工程師的角度來看,實作 Schema 結構化資料,不僅僅是為了討好 Google、提升排名。它的核心價值在於「讓資訊變得機器可讀 (Machine-Readable)」。這是在為一個更智慧、更自動化的網路世界鋪路。
當我們不再滿足於外掛提供的「罐頭」方案,而是親手為網站的獨特內容量身打造精準的 Schema 時,我們不僅是在做 SEO,更是在實踐一種「語意網 (Semantic Web)」的理想。我們把網站從一個單純給人看的「數位傳單」,升級成一個能與各種 AI、智慧助理、搜尋引擎深度對話的「結構化數據庫」。
這件事,很酷,而且非常值得我們工程師投入時間去把它做好。
延伸閱讀
- 流量不是靠拜拜!資深工程師的 WordPress SEO 終極藍圖:從技術健檢到內容策略,打造永續成長引擎
- 流量進不來,不是你的內容差!資深工程師揭秘 WordPress 技術 SEO 三大支柱:速度、結構與程式碼
- functions.php 不是只能複製貼上!資深工程師解鎖 WordPress 主題的『大腦中樞』
如果你也認同這種「從根本解決問題」的理念,厭倦了不斷用外掛疊床架屋,希望為你的企業網站打造一個真正健壯、高效、且對搜尋引擎友善的數位基礎設施,那麼,你可能需要的不只是一個網頁設計師,而是一個懂技術、懂架構、懂 SEO 的技術夥伴。歡迎與浪花科技聯繫,讓我們聊聊如何為你的網站進行一場徹底的體質改造。
常見問題 (FAQ)
Q1: 什麼是 Schema 結構化資料?可以講得更白話一點嗎?
A1: 當然!您可以把您的網頁想像成一本書,裡面的文字是內容。而 Schema 結構化資料就像是這本書的「目錄」和「索引」。它不會改變書的內容,但它用一種機器(例如 Google 爬蟲)看得懂的標準格式,清楚地告訴它「第 5 頁是食譜」、「第 10 頁是作者介紹」。這樣一來,機器就能快速理解您網頁的重點,而不是只能逐字閱讀、自己猜測。
Q2: 為什麼工程師推薦使用 JSON-LD,而不是其他格式?
A2: 主要有兩個原因:第一是「乾淨」。JSON-LD 是放在一個獨立的 “ 區塊,不會跟您原本的 HTML 程式碼混在一起,這讓維護和除錯變得非常簡單。第二是「彈性」。因為它是一個獨立的區塊,我們可以用後端語言(如 PHP)非常方便地動態生成,根據不同頁面的內容,填入完全客製化的資料,這是寫死在 HTML 標籤裡的 Microdata 格式難以比擬的。
Q3: 如果我手動加入了 Schema,還需要 SEO 外掛(如 Yoast, Rank Math)嗎?
A3: 絕對需要!SEO 外掛的功能遠不止 Schema。它們還幫您處理了 sitemaps、meta 標籤、robots.txt、Open Graph(社群分享用的標籤)等等非常多繁瑣但重要的 SEO 基礎設定。我們手動加入 Schema 的目的,是為了在外掛無法處理的「特定內容類型」上做到更精準的優化。最佳實踐是:讓外掛處理好全站的基礎設定,然後在您需要客製化 Schema 的地方,關閉外掛的 Schema 功能,並用我們文章中教的方法手動介入。
Q4: 要如何檢查我寫的 Schema 是否正確?
A4: 有兩個必備的線上工具。首先是 Schema Markup Validator,這是官方的驗證器,它會幫您檢查語法有沒有錯誤。確認語法無誤後,再使用 Google 的 Rich Results Test (豐富結果測試),這個工具會模擬 Google 的角度,告訴您這個頁面有沒有資格顯示為「豐富結果」(例如帶有星級、FAQ 等特殊樣式)。兩個都通過才算是完美的設定。












