諮詢熱線:02-2369-8858
SEO

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

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

最後更新:2019/05/21 作者:Sydney
【奇寶小教室】跟著工程師學結構化資料!-輪轉介面(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 DevelopersSchema.org

圖片來源:Google

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

 
 
 
熱門文章

行銷STP 品牌市場定位:報紙廣告實戰演練

先了解自己,才能走進對的道路,成長茁壯,發揚光大。   你了解自己的產品服務嗎? 在艱難的行銷道路上,是否開始迷失方向? 好的定位讓您上天堂,沒有明確定位將會讓你如同陷入泥淖,越陷越深離目標越來越遠。   今日來分享奇寶績效師日常....

在你的FB粉絲專頁新增Instagram頁籤!

不知道你有沒有注意過,有些粉絲專頁上會有Instagram的應用程式。 如果你也是常使用Instagram分享圖片做行銷的廠商,可以一起看看鳩竟要如何連結這兩種社群平台喔!   首先,請用粉絲專頁管理員的身分登入FB(請確保是以個人的身分) 接著請在搜尋....

FB社群經營第一步,專頁設定看這邊!

經營FB專頁一直是大家很關心、想學習的題目,上次Doris也貼心的為大家整理了小編Check List! 但在開始PO文與粉絲們互動前,有哪些是你不可錯過的設定呢?   封面照和大頭照 這應該算是基本中的基本,讓訪客對你的品牌會產品建立第一印象 封面照:828x315....

描述標籤(Meta Description)的SEO優化

什麼是Meta Description? Meta Description,或者稱作描述標籤,是html代碼中用以簡短描述網頁內容的一個標籤,其格式如下: 你在描述標籤中所撰寫的內容,並不會呈現在網頁上被使用者看到,只有在原始碼和搜尋結果中,才能看到當中的文字。 這些內容,會出現....

延伸閱讀

描述標籤(Meta Description)的SEO優化

什麼是Meta Description? Meta Description,或者稱作描述標籤,是html代碼中用以簡短描述網頁內容的一個標籤,其格式如下: 你在描述標籤中所撰寫的內容,並不會呈現在網頁上被使用者看到,只有在原始碼和搜尋結果中,才能看到當中的文字。 這些內容,會出現....

Google我的商家驗證教學,幫助你完成商家曝....

搜尋公司相關產品或是公司名稱的時候,如果能夠跳出畫面右方紅框的資訊,對於商家絕對是大大加分! 想要做到這件事,首先,你必須先去Google驗證商家。 如果今天已經新增商家或是搜尋到要驗證的商家後,Google提供下列幾種驗證方式- 索取附有驗證碼的明....

結構化資料標記,讓google更懂網站的心!

結構化資料標記,讓Google更懂網站的心!   你有沒有在搜尋資料的時候,在結果頁上看到有些網頁呈現出來的資訊就是比其他人還要豐富?能夠展示公司網站中重要頁面、最近的活動、發文、或是在地商家的評等。 而在網頁的html程式碼中做結構化資料標記,....

SEO搜尋引擎優化,新手入門必讀,基礎觀念完....

你可能聽過SEO,但你知道它到底是什麼嗎?透過SEO,在調整網站體質的同時,又可以讓你的網站曝光變高,有更多機會接觸到意圖較明確的目標客群這篇文章,適合剛接觸或完全不懂SEO的朋友,內容會詳細解釋SEO的基礎觀念,以及奇寶網路推薦給初學者的入門優化方向。 ....

Copyright © KPN SEO 2015. All Rights Reserved / 台北市大安區羅斯福路三段301號8樓 02-23698858 service@kpnweb.com

線上客服