在操作SEO的過程當中,從檢索到最後出現在搜尋結果上,都需要仰賴搜尋引擎的運作,不過只讀得懂程式語言的搜尋引擎,真的能夠了解我們在網站中所想要表達的內容嗎?目前這還是一件困難的任務,需要花費許多的資源才能夠做到,這時候就需要「結構化資料」的協助了,結構化資料就像是幫網站寫上註釋一樣,讓搜尋引擎可以更快速的理解到重要資訊,同時也會有許多額外的好處喔!
文章太長但時間不夠,沒關係可以跳著看
結構化資料是什麼?
結構化資料是一種協助搜尋引擎理解網站內容的系統,以標準化的格式,針對網站所提供的訊息、內容特性進行分類。我們可以將結構化標記想像成統一格式的表格,如果是活動類型的網頁,可以依序填上活動名稱、時間、地點、優惠內容…等;文章類型的網頁,也可以填上文章名稱、作者、發佈時間…等,依照不同類型的網站就會有許多不同的資訊分類可以選擇。透過結構化資料的協助,搜尋引擎就可以理解各種頁面中所傳達的涵義與信息,在資訊的收集上也能夠更加的快速、精確。
新增結構化資料有什麼好處?
雖然加上了結構化資料可以讓搜尋引擎理解網頁中的內容,但是如果只因為這個原因,值得特地花費時間與精力去新增結構化資料嗎?看完了結構化資料的介紹後,或許有許多人會產生這樣的疑問,但其實結構化資料的好處並不只有這樣喔!
讓搜尋引擎更有效率:
在SEO的操作上,借助於結構化資料的幫助,能讓搜尋引擎在檢索整體網站上更有效率,像是常用的麵包屑導覽列設置,就會仰賴結構化資料來建立,有了這樣小小的改變,就能讓搜尋引擎理解到目前在網站中的所在位置、快速地透過麵包屑穿梭在網站中,避免搜尋引擎在你的網站內迷路。
延伸閱讀:SEO基本功!麵包屑(Breadcrumbs)讓搜尋引擎愛上你
搜尋結果更加豐富:
搜尋引擎透過結構化資料的協助,搜集了這麼多的網頁資訊,受惠的當然不只有搜尋引擎。透過結構化資料的幫助,搜尋引擎可以在搜尋結果中提供更多樣化的資訊給使用者,在搜尋的過程中得到更豐富的訊息、更精確的結果。
例如電商網站就可以為自己的產品新增 「Product」屬性的結構化資料,加上有關於商品的名稱、價格、評分…等資訊。搜尋引擎在接收到這些訊息之後,就可以在使用者搜尋相關商品時,以「複合式摘要」的方式,提供更加詳細的資訊在搜尋結果上,使用者也能夠藉由這些資訊,更快速地挑選自己有興趣的商品。
(圖片參考)
結構化資料除了在「複合式摘要」上出現之外,也能夠以也能夠以其他形式出現在搜尋結果頁上,像是公司行號或是實體店面就可以加入 「Local Business」屬性的結構化資料,提供提供位置、電話、營業時間…等。當使用者在搜尋的時候,搜尋引擎就可以依照服務內容或是使用者的位置,在Google Knowledge Graph(知識圖譜)上推薦你的公司、商店,同時也能夠提供該公司的基本資訊給使用者。
(圖片參考)
延伸閱讀:認識Google的搜尋結果【SERP】,16種元素全解
結構化資料常見類型
Breadcrumb
顯示該網頁在整個網站階層結構中的位址,可提供搜尋引擎與使用者正確的導覽。
Product
提供關於產品的訊息,包括價格、評分、供應狀況…。
Local Business
在Google Knowledge Graph(知識圖譜)上,顯示商家的詳細訊息,包括地址、營業時間、評分、路線…等。
Q&A Page
網頁內容中包含問答格式即可使用 Q&A Page,可顯示出問題與答案在搜尋結果中。
(圖片參考)
Corporate contact 、Logo、Social Profile
在Google Knowledge Graph(知識圖譜)上,顯示品牌相關的Logo、聯絡方式、社群網站資訊。
(圖片參考)
❗️重點提醒
使用結構化資料可以讓搜尋引擎判讀到所需資訊,即使結構化資料已經正確的標記網頁中的內容,但還是不能夠保證以上呈現方式會出現在搜尋結果上,Google 也有對於此狀況的原因,提出幾點說明。
- Google 演算法會依照許多的因素,包括搜尋歷史紀錄、所在位置、所使用的裝置,來給予 Google 所認定最適合使用者體驗的結果。
- 結構化資料的內容與頁面內容不符,或是可能具有誤導性。
- 結構化數據所標記的內容,對使用者採隱藏內容的方式。
- 該頁面不符合結構化資料指南、特定類型的指南、網站管理員指南
認識Schema.org
提到了結構化資料絕對要知道 Schema.org,Schema.org 是由Google、Bing、Yandex 和 Yahoo 四個大型搜尋引擎共同制定的一套結構化標記架構,目的是為了創建一套可以適用於各個大型搜尋引擎的結構化資料系統,Schema.org 彙整了描述網頁資料常用的詞彙,將這些資料整理成統一的格式,讓往後推行及實際運用時可以降低阻礙。
而 Schema.org 的創建,同時也有利於網站管理者、搜尋引擎與使用者三方。
- 網站管理者:Schema.org 提供了網站管理者統一的格式,不用額外去學習多種不同的規則。
- 搜尋引擎:Schema.org 所制定的結構化資料項目,都是對搜尋引擎有價值的項目,就能夠確保所接收到的結構化資料都是搜尋引擎可運用的,避免無效的資料影響效率。
- 使用者:當結構化資料更加普及時,使用者也就能透過搜尋結果得到更多所需的資訊。
建立結構化資料的方式
從瞭解結構化資料是什麼,再到結構化資料的優點,種種結構化資料的好處都讓你想要為自己網站建立結構化資料了吧!依照 Schema.org 規則中,建立結構化資料的方式可以分成三種方式,分別是「JSON-LD」、「Microdata」、「RDFa」,除了這三種語法之外,另外也有不需要程式語言的結構化資料建立方式喔!
JSON-LD(Google推薦使用)
JSON-LD 是 Javascript 格式的程式碼,也是Google官方推薦使用的方式,JSON-LD 在不必更動原本的 HTML 內容,在撰寫上會獨立成一段程式碼,讓撰寫與維護上更加的便利。可以將 JSON-LD 想像成一張「便條紙」,在課本(網頁)上加註解時,不直接寫在課文(HTML)旁,而是將筆記寫成一張便條紙,直接貼在空白處即可。
<script type="application/ld+json"> { "@context": "http://schema.org", "@type": "Event", "location": { "@type": "Place", "address": { "@type": "PostalAddress", "addressLocality": "Denver", "addressRegion": "CO", "postalCode": "80209", "streetAddress": "7 S. Broadway" }, "name": "The Hi-Dive" }, "name": "Typhoon with Radiation City", "offers": { "@type": "Offer", "price": "13.00", "priceCurrency": "USD", "url": "http://www.ticketfly.com/purchase/309433" }, "startDate": "2022-09-14T21:30" } </script>
Microdata
Microdata 對於不熟悉程式語言的使用者來說較好入門,撰寫的方式就是在原有的 HTML上,依照 schema.org 所規範的標籤類型,依序將相符的屬性填在 HTML 後。Microdata 就可以想像成「筆記」,在課本(網頁)上加註解時,直接在課文(HTML)旁加上筆記。
Microdata 雖然可以在原有的 HTML 上直接加註,不用像 JSON-LD 要額外撰寫一段程式碼,但這樣的形式所產生的缺點,就是不像 JSON-LD 可以在同一個地方進行,造成往後在維護網站的作業上會較難執行。
<div class="event-wrapper" itemscope itemtype="http://schema.org/Event"> <div class="event-date" itemprop="startDate" content="2022-09-14T21:30">Sat Sep 14</div> <div class="event-title" itemprop="name">Typhoon with Radiation City</div> <div class="event-venue" itemprop="location" itemscope itemtype="http://schema.org/Place"> <span itemprop="name">The Hi-Dive</span> <div class="address" itemprop="address" itemscope itemtype="http://schema.org/PostalAddress"> <span itemprop="streetAddress">7 S. Broadway</span><br> <span itemprop="addressLocality">Denver</span>, <span itemprop="addressRegion">CO</span> <span itemprop="postalCode">80209</span> </div> </div> <div class="event-time">9:30 PM</div> <span itemprop="offers" itemscope itemtype="http://schema.org/Offer"> <div class="event-price" itemprop="price" content="13.00">$13.00</div> <span itemprop="priceCurrency" content="USD" /> <a itemprop="url" href="http://www.ticketfly.com/purchase/309433">Tickets</a> </span> </div>
RDFa
第三種 RDFa 誕生的年代最早,目前也已經很少使用了,RDFa 可以將網頁中所需的屬性,添加在可供讀取的後設資料中,這些在後設資料中的屬性就可以被運用在XML檔案中。 RDFa 同樣可以直接寫在原本的程式碼當中,不過也就與 Microdata 有相同的缺點。
<div vocab="http://schema.org/" class="event-wrapper" typeof="Event"> <div class="event-date" property="startDate" content="2022-09-14T21:30">Sat Sep 14</div> <div class="event-title" property="name">Typhoon with Radiation City</div> <div class="event-venue" property="location" typeof="Place"> <span property="name">The Hi-Dive</span> <div class="address" property="address" typeof="PostalAddress"> <span property="streetAddress">7 S. Broadway</span><br> <span property="addressLocality">Denver</span>, <span property="addressRegion">CO</span> <span property="postalCode">80209</span> </div> </div> <div class="event-time">9:30 PM</div> <span property="offers" typeof="Offer"> <div class="event-price"> <meta property="priceCurrency" content="USD" />$ <meta property="price" content="13.00" />13.00 </div> <a property="url" href="http://www.ticketfly.com/purchase/309433">Tickets</a> </span> </div>
資料螢光筆、結構化資料標記協助工具
如果想要新增結構化資料,但是上述的3種程式碼都讓你看得霧煞煞,別擔心!還有另一種貼心的方式可以讓你輕鬆的新增結構化資料,就是使用「資料螢光筆」,資料螢光筆是 Google 為了讓結構化資料能夠更輕鬆、便利的新增,而創造出來的免費工具,就算不懂程式碼也能新增結構化資料。
運用資料螢光筆能夠在不改變網站原始碼的狀況下,讓 Google 理解你網站中結構化資料的模式,只需要進入 Google Search Console 中(如果網站沒有使用Search Console,也可使用結構化資料標記協助工具),就可以使用資料螢光筆對網站中的內容直接進行標記,完全不需要學會其他的程式語言就能夠完成,而且還能夠一次標記所有相同版型的網頁。不過資料螢光筆所支援的結構化資料有限,有許多的結構化資料還是要依靠上述的三種程式碼來新增。
結構化資料測試工具
依照了前述的方式辛苦的建立結構化資料後,若是因為一點點小錯誤而導致結構化資料無法運作,就真的是功虧一簣了。為了確保每個結構化資料都能夠正確無誤,讓搜尋引擎可以順利的判讀,Google 就有一個工具可以來解決這個問題,藉由結構化資料測試工具的幫助,我們可以直接輸入網頁網址或是含有標記的 HTML 程式碼,就可以即時檢測到目前的結構化資料問題,並顯示出現問題的地方與其他建議;透過使用結構化資料測試工具,可以快速的檢測出結構化資料的問題,在除錯與維護上都是一大助力。
結語
結構化資料是搜尋引擎目前非常重要的助力,在搜尋引擎可以快速的自動判讀網頁內容之前,結構化資料這樣的溝通方式是簡單且有效率的解決方案,讓我們可以表達出更詳細的內容,為搜尋引擎、網站擁有者與使用者創造更大的效益。