使用網頁元件和 JSON-LD 建立語意網站

Ewa Gasperowicz

隨著網頁元件Polymer 支援資料庫越來越受歡迎,自訂元素正是建構 UI 功能的好方法。自訂元素的預設封裝方式特別適合用於建立獨立小工具。

雖然有些小工具是獨立的,但其中很多小工具仰賴外部資料向使用者呈現內容,例如天氣小工具目前的天氣預報,或是地圖小工具的公司地址。

在 Polymer 中,自訂元素是宣告式元素,也就是說,自訂元素匯入專案後,就能輕鬆在 HTML 中加入及設定這些元素 (例如傳送資料,並透過屬性將元素填入小工具)。

最好能夠避免重複而確保資料一致性,例如重複使用相同的資料程式碼片段來填入不同的小工具,同時讓搜尋引擎和其他消費者瞭解我們網頁內容。為此,我們針對資料使用 schema.org 標準和 JSON-LD 格式即可。

使用結構化資料填入元件

一般來說,JSON 是將資料插入特定小工具的方便方法。隨著 JSON-LD 日益普及,我們得以重複使用相同的資料結構,讓搜尋引擎、搜尋引擎和其他消費者瞭解網頁內容的精確意義。

我們結合網頁元件與 JSON-LD,為應用程式打造定義明確的架構:

  • schema.org 和 JSON-LD 代表資料層,其中 schema.org 提供資料詞彙,而 JSON-LD 會命名資料的格式和傳輸。
  • 自訂元素代表展示層,可設定以及與資料本身分隔。

範例

讓我們以以下範例為例,這個網頁列出幾個 Google 辦公室位置:https://github.com/googlearchive/structured-data-web-components/tree/master/demo

其中包含兩個小工具:每個辦公室都有一個圖釘的地圖,以及一份列出位置清單的下拉式選單。這兩個小工具向使用者呈現的資料必須相同,搜尋引擎也能夠讀取到網頁。

網頁元件和 JSON-LD 示範網頁

在本示範中,我們使用 LocalBusiness 實體來表示資料的意義,即部分 Google 辦公室的地理位置。

如要查看 Google 如何解讀這個網頁並建立索引,最佳做法是使用全新改良的結構化資料測試工具。在「擷取網址」部分提交示範網址,然後按一下「擷取並驗證」。右側部分會顯示從網頁擷取的剖析資料,以及可能發生的任何錯誤。這個簡單的方式可讓您檢查 JSON-LD 標記是否正確無誤,而且 Google 能夠處理。

結構化資料測試工具 UI。

如要進一步瞭解這項工具及其導入的改良成果,請參閱網站管理員中心的網誌文章

將元件連結至結構化資料來源

示範版的程式碼以及用於建構示範的網頁元件的程式碼位於 GitHub。並看看 combined-demo.html 網頁的原始碼

第一步是使用 JSON-LD 指令碼在網頁中嵌入資料:

<script type="application/ld+json">
{...}
</script>

如此一來,我們就能確保其他支援 schema.org 標準和 JSON-LD 格式 (例如搜尋引擎) 的使用者輕鬆存取資料。

第二步會使用兩個網頁元件來顯示資料:

  • address-dropdown-jsonld - 此元素會建立下拉式選單,內含「jsonld」屬性中傳送的所有地點。
  • google-map-jsonld - 此元素會建立一個 Google 地圖,內含「jsonld」屬性中傳遞的每個位置,每個位置都有圖釘。

為此,我們會使用 HTML 匯入功能將代碼匯入我們的網頁。

<link rel="import" href="bower_components/google-map-jsonld/google-map-jsonld.html">
<link rel="import" href="bower_components/address-dropdown-jsonld/address-dropdown-jsonld.html">

匯入完成後,我們便可在網頁中使用這些這些檔案:

<address-dropdown-jsonld jsonld=""></address-dropdown-jsonld>
<google-map-jsonld jsonld=""></google-map-jsonld>

最後,我們會將 JSON-LD 資料和元素連結在一起。我們會在支援聚合物的回呼中完成這項作業 (這是在元件準備就緒時觸發的事件)。由於元素可透過屬性設定,因此只要將 JSON-LD 資料指派給元件的適當屬性即可:

document.addEventListener('polymer-ready', function() {
    var jsonld = JSON.parse(
        document.querySelector(
            'script[type="application/ld+json"]').innerText);
    document.querySelector('google-map-jsonld').jsonld = jsonld['@graph'];
    document.querySelector('address-dropdown-jsonld').jsonld = jsonld['@graph'];
    });

JSON-LD:JSON 強勢的支撐

您或許已經發現,這個方式與使用舊版 JSON 傳送資料的方式非常類似。不過,JSON-LD 還有幾項優點,這些優點是直接衍生自其 schema.org 相容性:

  • 這項資料採用 schema.org 標準明確呈現。此為非重要優勢,因為這種做法可確保您能為任何啟用 JSON-LD 的網路元件提供有意義且一致的輸入內容。
  • 搜尋引擎可有效使用這些資料,進而提升網頁索引成效,並可能在搜尋結果中顯示複合式搜尋結果。
  • 如果以這種方式編寫網頁元件,就不需要學習或為元件所需的資料建構新的結構 (和說明文件),因為 schema.org 已為您執行繁瑣的作業和共識建構工作。也能讓您輕鬆建立相容元件的整個生態系統。

總而言之,JSON-LD 和 schema.org 結合各項網頁元件技術,有助於建構可重複使用、封裝一串使用者介面,不僅開發人員和搜尋引擎都能輕鬆使用。

建立自己的元件

您可以試用 GitHub 中的範例,或參閱 Polymer 的指南,瞭解如何建立可重複使用的元件,開始撰寫您自己的元件。請查看 developers.google.com 的結構化資料說明文件,瞭解您可以使用 JSON-LD 標記的各種實體。

歡迎前往 @polymer 向我們喊話,展現你建構的自訂元素!