Not a programmer 不工程的攻城獅

Marketing / SEO - Structured Data Part2

利用 JavaScript 產生結構化資料

攻城獅's photo
攻城獅

常見的 JavaScript 動態生成 Structured Data 的方式有兩種：

  1. Google 代碼管理工具
  2. 自訂 JavaScript

使用 Google Tag Manager 動態產生 JSON-LD

Google Tag Manager 可以不必編輯程式碼就能直接管理網站上的程式碼，其操作的步驟：

  1. 在網站上安裝 Google Tag Manager
  2. 在 Container 中新增自訂HTML 標記
  3. 將所需的 Structured Data 區塊貼到程式碼內容中
  4. 前往容器管理選單的「安裝 Google Tag Manager」，按照其中的說明安裝
  5. 發佈容器
  6. 用 Rich Results Test 測試

在 Google 代碼管理工具中使用變數

範例：想要以網站的標題作為食譜的名稱，則可以建立一個，則可以建立一個變數，命名為 recipe_name。並使用以下 function 來賦值

function() { return document.title; }

並在自訂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 產生 Structured Data

這個方式會是更適合大多數使用者的場景，可以更加的客製化。以下是單純的 JavaScript 範例：

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);
});
SEO