Skip to main content

Command Palette

Search for a command to run...

Marketing / SEO - Structured Data Part2

利用 JavaScript 產生結構化資料

Published

常見的 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);
});

More from this blog

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

現在應該開始有很多人想要踏入軟體工程的領域,但在進入這個領域之前,覺得先了解一些名詞,可以在入門時更有方向也更知道要用什麼關鍵字去找尋有用的資訊。這篇文章就是想要幫助想要入門的人理解一些軟體工程裡的專有名詞。 作業系統 這一區塊主要解釋跟作業系統層面相關的名詞 英文中文解釋 Operation system 簡稱 OS | 作業系統 | 就是電腦的作業系統,是三大作業系統分別是:Linux、Windows、macOS | | Linux | | 自由和開放原始碼的 UNI...

May 10, 2023

我的 MacBook Pro (Apple Silicon) 設定

現在開始因為 ChatGPT 的出現,各種 AI 助手的功能都跑出來了。想想自己用了許久的環境設定也應該要來重新審視和建立新的開發環境了,僅此紀錄我個人的環境配置步驟和設定。 環境前置步驟 還原 MacBook Pro 至全新環境 macOS(全部資料刪除) 設定好初始設定後,登入 Apple ID 進入 App Store 確定 macOS 版本和預設 APP 都更新到最新 macOS 版本 到系統設定調整所有設定至個人習慣的設定 三指拖移 觸控板手勢開啟 防火牆開啟 輸入法設定...

Apr 25, 2023

ChatGPT 下的發展預想

從 ChatGPT 問世到現在,有許許多多的文章和討論出來。先從最早的 Google 要完蛋了,到後來的工作要被取代了,工程師失業了。 我就比較沒有想要馬上出來評論一下,我喜歡讓子彈飛一會兒。跟討論一下我自己比較在意的討論點。 Google 為什麼慢了? 結論:因為他需要更小心 很多人說 Google 怎麼被微軟搶先了一步。剛開始 Bing 說要加上 AI 的時候大家都在說 Google 怎麼慢了。我就馬上跑去看 OpenAI 的網站,靠北呀啊就 Azure 贊助的。那當然在正式上線 ChatG...

Mar 23, 2023

不工程的攻城獅

223 posts

I am not a programmer because I am not good at programming. But I do programming. Love to learn new things. An animal lover and a dancer. My oshi is 潤羽るしあ.