利用 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 問題。