利用 JavaScript 產生結構化資料

新型網站會使用 JavaScript 顯示許多動態內容，本指南將說明相關最佳做法和實作策略，協助您瞭解在網站上利用 JavaScript 產生結構化資料時須留意哪些事項。如果您是第一次使用結構化資料，請參閱這篇文章，進一步瞭解結構化資料的運作方式。

利用 JavaScript 產生結構化資料的方法有很多種，最常見的方法如下：

使用 Google 代碼管理工具動態產生 JSON-LD

Google 代碼管理工具平台可讓您完全不必編輯程式碼，直接管理網站上的代碼。如要透過 Google 代碼管理工具產生結構化資料，請按照下列步驟操作：

  1. 在您的網站上設定及安裝 Google 代碼管理工具。
  2. 在容器中新增自訂 HTML 標記。
  3. 將所需的結構化資料區塊貼到代碼內容中。
  4. 前往容器管理選單的「安裝 Google 代碼管理工具」部分，按照其中的說明安裝容器。
  5. 如要在網站上新增代碼，請透過 Google 代碼管理工具介面發布您的容器。
  6. 測試實作成果。

在 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 產生的結構化資料範例：

  1. 找出想採用的結構化資料類型。
  2. 編輯網站的 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);
});
  3. 在複合式搜尋結果測試中檢測實作成果。

採用伺服器端轉譯作業

採用伺服器端轉譯作業時，您也可以在轉譯後的輸出結果中加入所需結構化資料。請參閱您的架構說明文件，瞭解如何針對您想使用的結構化資料類型產生 JSON-LD。

測試實作成果

為確保 Google 搜尋能夠檢索您的結構化資料並將其編入索引，請務必測試實作成果：

  1. 開啟複合式搜尋結果測試。
  2. 輸入您要測試的網址。
  3. 按一下「測試網址」。

    成功：如果您已確實完成所有操作，而且這項工具支援您的結構化資料類型，那麼系統就會顯示「網頁適合顯示複合式搜尋結果」訊息。
    如果複合式搜尋結果測試不支援您要測試的結構化資料類型，請查看轉譯後的 HTML。 只要轉譯後的 HTML 含有結構化資料，Google 搜尋就能處理該資料。

    再試一次：如果系統顯示錯誤或警告，最有可能的原因是語法有誤或缺少屬性。 請參閱相關結構化資料類型的說明文件，並確認您已添加所有屬性。如果問題持續發生，請務必一併參閱這份指南，瞭解如何修正會影響搜尋體驗的 JavaScript 問題。