【奇寶小教室】跟著工程師學結構化資料！-輪轉介面(Carousels)

歡迎再度來到奇寶小教室，讓我們繼續跟奇寶工程師瞭解結構化資料吧！今天要跟大家分享，究竟要如何運用結構化資料標記，讓我們網站更有機會在行動裝置的搜尋結果中出現輪轉介面("Carousels")？

透過輪轉介面，將能呈現各為豐富、吸引人的搜尋結果，使網站更容易獲得使用者的點擊，帶入更多的流量！

紅框處就是我們輪轉介面在搜尋引擎上的呈現，藉此讓使用者在搜尋結果頁，就能看到網站內豐富的內容(如：吸引人的圖片與資訊)，提高使用者進入網站瀏覽詳細資訊的機會。

當使用者點擊後，可以直接到達相對應的內容細節頁面。(如：特定的雞肉料理食譜)。

輪轉介面(Carousels)何時會出現？

根據Google官方的說法，輪轉介面通常只出現於行動裝置，而且僅適用於特定內容類型(食譜、課程、文章)。

該如何進行結構化資料標記？

想要獲得輪轉介面，我們必須用清單格式呈現結構化資料，Google官方提到有兩種清單的呈現格式，以下將各別的介紹：

1. 摘要彙整頁面+多個詳細資料頁面

舉例來說：當你網站上有一個雞肉料理食譜彙整頁(清單)，頁面上也有連結可以到達各個雞肉料理食譜的介紹細節頁。

在標記上，你就可以參考以下Google提供的範例：

↑ 在彙整頁標記食譜的清單資訊，如連結到那些食譜細節頁面？

簡單來說，我們必須在彙整頁註記，內容細節頁的對應網址(“url”)。並註記position(位置順序)的屬性。

在細節頁上，我們則需要標記相對應類別的結構化資料，例如這個頁面是食譜頁面，則我們必須標記食譜(Recipe)的結構化資料，如下圖：

↑ 針對內容細節頁，標記相對應類別的結構化資料。

同理，若是文章頁面，則需要標記我們曾經談到過的：文章(Article)結構化資料
當針對彙整和細節頁都標記完後，就可以提升我們呈現輪轉介面的機會囉！

2. 單一頁面同時包含各項目詳細資料

舉例來說：當你的網站上，有一個頁面，它有條列彙整食譜的清單，同時又有顯示各個雞肉料理食譜的詳細資料。

在標記上，你就可以參考以下Google提供的範例：

↑ 在單一頁面中，標記項目清單時，一併註記頁面上食譜資訊的細節，像是作者、圖片、料理名稱、烹調時間等等......

這個呈現方式，與前面分成彙整頁和細節頁的標記方式，剛好相反。我們需要將兩者的資訊結合在同一個頁面中標記。

以我們雞肉料理食譜的例子來說，標記項目清單的同時，就會一併註記頁面上的食譜資訊的細節。

當我們將該單一頁面中的所有項目都標記完成後，就可以提升我們呈現輪轉介面的機會囉！

最後有幾點注意事項，須提醒大家：

1. 所有清單中的項目須為相同類型，換句話說：若是在整理文章(Article)的清單中，不能出現食譜(Recipe)清單類型的項目。

2. 結構化資料需與呈現給使用者的資訊相似。

3. 以清單格式呈現的項目將會按照(Position)屬性的順序來顯示

4. 如前所述：清單格式目前支援以下的內容類型：食譜、課程、文章

5. 將標記程式碼添加完成後，記得用測試工具，確認是否無誤。

另外以工程師日常操作經驗來看，因為一開始就會為客戶網站中的細節頁，進行相對應的結構化資料標記，所以通常如果後續要再操作輪轉介面的優化，只要針對彙整頁再做清單上的標記優化即可。

此外能呈現輪轉介面的網站內容，目前雖然只侷限於食譜、課程與文章，但其實Google仍有可能不斷擴充支援的內容類型，所以這邊工程師會建議，若網站上的資料，有相對應的結構化資料，可以盡量都進行標記，增加我們網站整體獲得加強搜尋結果的機會。

結論

相信經過這次的分享，大家對於輪轉介面(Carousels)已經有更多的瞭解。

簡單來說，我們會需要透過標記，讓Google知道頁面上有幾個項目，個別項目又對應到那些細部內容，才能增加我們網站出現輪轉介面的機會。

最終，我們透過輪轉介面，將能呈現各為豐富、吸引人的搜尋結果，使網站更容易獲得使用者的點擊，帶入更多的流量！

更多輪轉結構化資料可以標記的標籤請參考

Google Search Developers

-- 奇寶小教室的其他課程：

【奇寶小教室】跟著工程師學結構化資料！-什麼是結構化資料？

【奇寶小教室】跟著工程師學結構化資料！-文章結構化資料

【奇寶小教室】跟著工程師學結構化資料！-麵包屑結構化資料

【奇寶小教室】跟著工程師學結構化資料！-產品結構化資料

【奇寶小教室】跟著工程師學結構化資料！-在地商家結構化資料

【奇寶小教室】跟著工程師學結構化資料！-站內搜尋框

【奇寶小教室】跟著工程師學結構化資料！-事件結構化資料

【奇寶小教室】跟著工程師學結構化資料！-影片結構化資料

-- 推薦閱讀

結構化資料標記，讓google更懂網站的心！

參考資料：工程師操作經驗分享、Google Developers、Schema.org

圖片來源：Google

本文作者：Sydney
責任編輯：Zoey