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

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

在網站上安裝 Google Tag Manager
在 Container 中新增自訂HTML 標記
將所需的 Structured Data 區塊貼到程式碼內容中
前往容器管理選單的「安裝 Google Tag Manager」，按照其中的說明安裝
發佈容器
用 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);
});

Marketing / SEO - Structured Data Part2

Comments

SEO

Marketing / SEO - Structured Data Part1

More from this blog

如何開始入門軟體工程領域 - 名詞解釋（長期更新）

我的 MacBook Pro (Apple Silicon) 設定

ChatGPT 下的發展預想

一些覺得有用的工具蒐藏

LeetCode Solution, Medium, 607. Sales Person

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

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

利用 JavaScript 產生 Structured Data

Command Palette

Comments

SEO

Marketing / SEO - Structured Data Part1

More from this blog

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

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

利用 JavaScript 產生 Structured Data