運用 Web Component 和 JSON-LD 輕鬆建構網站

2015年5月22日星期五

原文： Easier website development with Web Components and JSON-LD
作者： Posted by Ewa Gasperowicz , Developer Programs Engineer, Mano Marks , Developer Advocate, Pierre Far , Webmaster Trends Analyst


J SON-LD 是以 JSON 為基礎的資料格式，這種資料格式可用來實作 結構化資料 ，向 Google 和其他搜尋引擎描述您網站上的內容。舉例來說，如果您有一份有關活動、餐館、人物或其他內容的清單，那麼您可以透過結構化格式在自己的網頁上加入這項資料，只要以 JSON-LD 程式碼片段形式將 schema.org 詞彙嵌入網頁中即可。結構化資料有助於 Google 理解您的網頁內容，進而在某些搜尋功能 (例如 知識圖譜中的活動 和 複合式摘要 ) 中突顯您的內容。

Web Component 是仍處於初期發展階段的一組技術元件，作用是定義可重複使用的自訂使用者介面小工具及其行為模式。任何網頁開發人員都可以自行建立 Web Component。如要建立 Web Component，請先找到一個明確的使用者介面，然後為這部分的介面定義 範本 ，並 匯入網頁中 ，之後就能在網頁上使用這個 Web Component。 Custom Element 可用來定義 Web Component 的行為模式。由於您已將使用者介面部分的顯示和邏輯關係統合到 Web Component 中，所以可以輕鬆將這部分內容與他人共用、重複應用到其他網頁上或提供給其他開發人員，進而達到簡化網頁開發作業的目的。

JSON-LD 和 Web Component 的搭配相當契合。Custom Element 可做為展示層，而 JSON-LD 可做為資料層，供 Custom Element 和搜尋引擎取用。也就是說，您可以建立任何 schema.org類型的 Custom Element，例如 schema.org/Event 和
schema.org/LocalBusiness 。

就實際上的架構而言，您的結構化資料會儲存在資料庫中 (例如您的連鎖商店所在位置的資訊)。這項資料會以 JSON-LD 程式碼片段的形式嵌入網頁內，讓 Custom Element 可以調用該資料來提供給訪客查看，而 Googlebot 也可以擷取這項資料來建立 Google 搜尋索引。
如要進一步瞭解 Custom Element，並開始使用這個介面，請參閱下列資源：
＊我們在 webcomponents.org 發佈的最新文章和附帶的程式碼範例。
＊ JSON-LD 網站 和 W3C 規格
＊ Web Component 維基 和 Web Component 社群 (位於 webcomponents.org )