利用 JavaScript 產生結構化資料
新型網站會使用 JavaScript 顯示許多動態內容,本指南將說明相關最佳做法和實作策略,協助您瞭解在網站上利用 JavaScript 產生結構化資料時須留意哪些事項。如果您是第一次使用結構化資料,請參閱這篇文章,進一步瞭解結構化資料的運作方式。
利用 JavaScript 產生結構化資料的方法有很多種,最常見的方法如下:
使用 Google 代碼管理工具動態產生 JSON-LD
Google 代碼管理工具平台可讓您完全不必編輯程式碼,直接管理網站上的代碼。如要透過 Google 代碼管理工具產生結構化資料,請按照下列步驟操作:
- 在您的網站上設定及安裝 Google 代碼管理工具。
- 在容器中新增自訂 HTML 標記。
- 將所需的結構化資料區塊貼到代碼內容中。
- 前往容器管理選單的「安裝 Google 代碼管理工具」部分,按照其中的說明安裝容器。
- 如要在網站上新增代碼,請透過 Google 代碼管理工具介面發布您的容器。
- 測試實作成果。
在 Google 代碼管理工具中使用變數
Google 代碼管理工具 (GTM) 支援變數,能夠將網頁上的資訊當做結構化資料使用。因此,請使用變數從網頁擷取結構化資料,不要直接複製 GTM 中的資訊。如果複製 GTM 中的資訊,網頁內容就更有可能與透過 GTM 插入的結構化資料不符。
舉例來說,如要動態產生食譜 JSON-LD 區塊,並以網頁標題做為食譜名稱,則可以建立下列這個名為 recipe_name
的自訂變數:
function() { return document.title; }
接著,您就能在自訂 HTML 標記中使用 {{recipe_name}}
。
建議您建立變數,藉此收集網頁上的所有必要資訊。
以下是自訂 HTML 標記內容的範例:
<script type="application/ld+json"> { "@context": "https://schema.org/", "@type": "Recipe", "name": "{{recipe_name}}", "image": [ "{{recipe_image}}" ], "author": { "@type": "Person", "name": "{{recipe_author}}" } } </script>
利用自訂 JavaScript 產生結構化資料
另一種產生結構化資料的常見方法是使用自訂 JavaScript,您可以透過這種方式產生所有結構化資料,或者為伺服器端轉譯的結構化資料增添更多資訊。無論您採取哪種做法,Google 搜尋在轉譯網頁時皆可解讀及處理 DOM 中提供的結構化資料。如要進一步瞭解 Google 搜尋如何處理 JavaScript,請參閱 JavaScript 基礎知識指南。
以下是 JavaScript 產生的結構化資料範例:
- 找出想採用的結構化資料類型。
- 編輯網站的 HTML,按照以下範例加入 JavaScript 程式碼片段。詳細做法請參閱 CMS 或主機供應商的說明文件,或者諮詢您的開發人員。
fetch('https://api.example.com/recipes/123') .then(response => response.text()) .then(structuredDataText => { const script = document.createElement('script'); script.setAttribute('type', 'application/ld+json'); script.textContent = structuredDataText; document.head.appendChild(script); });
- 在複合式搜尋結果測試中檢測實作成果。
採用伺服器端轉譯作業
採用伺服器端轉譯作業時,您也可以在轉譯後的輸出結果中加入所需結構化資料。請參閱您的架構說明文件,瞭解如何針對您想使用的結構化資料類型產生 JSON-LD。
測試實作成果
為確保 Google 搜尋能夠檢索您的結構化資料並將其編入索引,請務必測試實作成果:
- 開啟複合式搜尋結果測試。
- 輸入您要測試的網址。
- 按一下「測試網址」。
成功:如果您已確實完成所有操作,而且這項工具支援您的結構化資料類型,那麼系統就會顯示「網頁適合顯示複合式搜尋結果」訊息。
如果複合式搜尋結果測試不支援您要測試的結構化資料類型,請查看轉譯後的 HTML。 只要轉譯後的 HTML 含有結構化資料,Google 搜尋就能處理該資料。再試一次:如果系統顯示錯誤或警告,最有可能的原因是語法有誤或缺少屬性。 請參閱相關結構化資料類型的說明文件,並確認您已添加所有屬性。如果問題持續發生,請務必一併參閱這份指南,瞭解如何修正會影響搜尋體驗的 JavaScript 問題。