實現 JSON-LD 結構化數據的指南

已發表: 2021-07-19

在您的網站上使用架構標記來啟用豐富的片段並增加您在 SERP 中的存在並不是一種新策略。 然而,我們通常發現我們的新客戶之前可能沒有實施它,或者由於缺乏時間或資源而努力實施。

但實施內聯微數據的麻煩已經成為過去。 Google 不僅支持,而且建議您使用 JSON-LD(JavaScript Object Notation for Linked Data) 實現 JSON-LD 結構化數據 對於您的結構化數據,這是一個巨大的進步。 這意味著谷歌現在不必對內聯微數據進行硬編碼,而是會抓取 JavaScript 來訪問您的結構化數據。

這很棒,因為 JSON-LD 更容易使用,如果您願意,也更容易讀寫。 更重要的是,現在實現結構化數據的方法比以往任何時候都多。

“但是,如果我不知道如何編寫 JavaScript 怎麼辦?”

好消息不止於此。 這篇文章將帶您了解實現結構化數據的一些最簡單方法,並列出一些非常有用的資源,可用於學習 JSON-LD。

Google 的數據標註工具

首先,您可以選擇使用 Google Search Console 的 Highlighter 工具,該工具使您無需查看一行代碼即可實現結構化數據。

您可以為一系列數據添加架構,包括文章、事件、產品和本地業務信息。 然後該工具將為您提供頁面預覽,以便您可以直接突出顯示特定內容,並為您添加標記:

Google 熒光筆工具 - 添加架構

這是向您的網站添加結構化數據的最簡單快捷的方法。 那麼為什麼要費心去做呢?

好吧,問題是谷歌的數據熒光筆只對谷歌說話。 因此,雖然這是一個很好的起點,但您不應就此止步。

我們看到 Google 使用結構化數據的方式不斷發展。 最近有一個關於移動端 Rich Cards 的公告:

谷歌在移動設備上添加豐富的卡片

不僅限於谷歌——社交媒體巨頭已經找到了利用這些數據的方法。 例如,Pinterest 允許 Rich Pins 提取有關產品、食譜、地點等的數據。

使用 Schema 標記可以做很多很酷的事情,而 Google 的熒光筆工具也做不到。 例如,為什麼不嘗試將您的社交媒體資料添加到 ASOS 如下所示的知識面板中:

ASOS 社交資料架構標記

也許您想添加一個像 BuzzFeed 下面的附加鏈接搜索欄,以允許人們從 SERP 中搜索您的網站(這太元了):

BuzzFeed 附加鏈接搜索框架構標記

出於上述所有原因,我們強烈建議您使用 Google 的數據熒光筆工具作為短期解決方案,同時確保您在網頁上對架構標記進行編碼,作為未來證明的解決方案。 這將使您完全擁有和管理結構化數據。 它也可能使您在 Bing 和其他較小的搜索引擎中受益。

添加架構標記的簡單方法

如果您的網站在 WordPress 上,您可以使用插件,例如 Raven 的 Schema Creator。 這個方便的工具將指導您完成整個過程,並為您創建的每個架構創建一個短代碼,允許您在之後進行編輯:

Raven Schema Creator 表單

如果您不使用 WordPress,但仍想對 JSON-LD 結構化數據進行手動編碼,或者只是想了解有關該主題的更多信息,那麼這就是 Google 標籤管理器的用武之地!

使用 Google Tag Manager 推送結構化數據

支持 JSON-LD 的搜索引擎令人興奮的一點是,它會在 HTML 中的任何地方被提取,即使它是由像 Google 標籤管理器這樣的標籤管理系統動態插入的。

掌握 JSON-LD

在開始之前,您需要花一些時間熟悉 JSON-LD。 幸運的是,您可以在網上找到很多有用的資源,但是如果您仍然沒有信心,那麼您需要諮詢具有使用 JSON-LD 經驗的開發人員或營銷專家。

以下是一些可以幫助您入門的鏈接:

  • Schema.org 上的文檔,按類型列出。
  • JSON Playground,一個很好的使用您在上面鏈接中找到的信息的好地方,並提供一些有用的示例來幫助您入門。
  • 由開發人員 James Flynn 開發的 JSON-LD 生成器,非常易於使用並為您完成繁重的工作。
  • 來自搜索引擎新聞的真實世界結構化數據指南,包含豐富的片段示例。

分步指南

現在讓我們看一個簡單易懂的示例,該示例使用標籤管理器推送 JSON-LS 結構化數據以幫助您入門。 注意:如果您尚未使用 GTM 來部署和管理營銷和分析標籤,請閱讀此簡單的設置和安裝指南。

第一步——添加標籤

首先,添加一個新標籤:
添加新標籤 - 谷歌標籤管理器

第二步 - 命名你的標籤

給你的標籤命名一些有意義的東西。 在這個例子中,我將專注於添加組織架構標記:
JSON 組織架構標記

第三步 - 選擇自定義 HTML 標籤

由於我們使用我們自己的 JSON-LD 標記,您需要選擇自定義 HTML 標籤選項並按繼續:

選擇自定義 HTML 標籤

第四步——輸入你的 JSON-LD 標記

現在您需要在 HTML 框中輸入您的標記。 在這個例子中,我使用了 JSON-LD 格式的組織在這裡找到。

第五步 - 選擇何時觸發代碼

對於這個特定的設置,我想在所有頁面上選擇火,因為它是一個“組織”標記,因此是站點範圍的。 為此,我可以在保存標籤之前簡單地選擇“所有頁面”。 我的實現就完成了:
在所有頁面上觸發

如果您想添加特定於特定頁面或頁面組的架構,您可以使用“某些頁面”選項來指定特定頁面:

選擇一些頁面谷歌標籤管理器觸發器
如果您要為您的聯繫頁面添加本地商戶信息,或者您有多個要標記的商戶位置,則可能需要這樣做。

提示:如果要指定一組頁面,可以使用頁面 URL 'contains' 操作或 RegEx(正則表達式)操作。

另一個提示:您可以將結構化數據(代碼)組合到單個自定義 HTML 標籤或標籤邏輯組中,以減少容器中的標籤數量。

第六步——測試

雖然您可以使用 Google Tag Manager 的預覽和調試模式來測試您的代碼是否被觸發,但您還需要確保檢查它是否在 Tag Manager 平台之外工作:

在 GTM 中預覽、調試和發布

Google 和 Bing 都有方便的工具來測試您的結構化數據並確保一切正常。 請記住首先在跟踪代碼管理器中發布您的容器版本。

  • 谷歌的結構化數據測試工具
  • Bing 的標記驗證器

測試您的結構化數據

確保在測試您的實現時使用這些免費工具,無論您使用的是插件、標籤管理器還是硬編碼您的架構。 谷歌最近對其工具進行了一些改進,改進了突出顯示、搜索和替換以及自動完成等功能。

此方法可讓您將 JSON-LD 片段插入到一個或多個頁面中而不會出現問題。 但是,如果您想獲得更多技術並使用跟踪代碼管理器來動態生成您的代碼段,例如使用 {{page URL}},它將不起作用。 Chris Goddard 最近在 Moz 博客上寫了一篇很棒的文章,其中包括對此的解決方法。

結論

過去幾年的最新發展使得在您的網站上實施架構標記變得更加容易。 Google 自己的 Data Highlighter 工具是一種快速添加 Schema 以讓 Google 受益的簡單方法,但建議您計劃通過使用插件、Google Tag Manager 或手動對您的 Schema 進行編碼。

實現 JSON-LD 結構化數據現在是最廣泛接受和推薦的格式化模式標記的方法。 雖然它不能保證您的搜索結果會顯示豐富的摘要或豐富的卡片,但只要正確實施,這不應阻止您向搜索引擎提供盡可能最好的數據。

如果您需要幫助在您的網站上實施結構化數據,請與我們聯繫。


如果您需要幫助,請隨時與我們聯繫。