本部落格已搬家
點此前往新部落格

新主機測試中...

Your posts match “ SEO schema.org microdata google yahoo baidu Bing HTML5 China ” tag:

用語意標籤與結構化資料 microdata,讓搜尋引擎更了解網頁的內容

搜尋引擎優化(SEO),從古到今一直是門黑魔法,到處流傳一些密技,但魔法兩個字,一橫,一豎,站著的才是對的。西元 2015年了都已經過一半了,有沒有一些新時代的黑魔法,可以讓搜尋引擎更了解網頁的內容呢? 有! 一個是 HTML 語意標籤規範與大綱化,另一個則是資料結構化。

架個網站就可以在家等著收錢,搜尋引擎隨便找都在第一頁的時代已經過去了,還得擊敗一些內容農場跟買廣告的,才有機會在搜尋引擎中被看到。身為一個近代的網頁前端人員,除了讓網頁在各種裝置、各種螢幕尺寸上都看起來正常,以及幫網頁系統打造更佳的使用體驗,還可以幫網頁做那些事呢? 就是讓搜尋引擎更了解網頁的內容。

為什麼要讓搜尋引擎更了解網頁的內容? 第一集是讓搜尋引擎比較看得懂網頁,第二集是「有機會」顯示比較誘人的內容,吸引人類來點擊,第三集是點擊的人數多了之後,品質分數提高了,進而「有機會」提升在特定關鍵字的排名,這樣就完美大結局了嗎? 不對,這些只是第一季而已。下一季還要演「如何留住訪客」。

一、Structured Data -頁面資料結構化
搜尋引擎已經很厲害,但是還不夠厲害,如果想精確找到 3000~5000 元的某東西,就不太容易,因為每個人寫的網頁都不一樣、搜尋引擎不知道網頁上的 $0.0 是價錢,還是表情符號? 於是有了結構化資料這種東西,把資料用特殊的格式標記起來,讓搜尋引擎更了解網站的內容。進而讓搜尋結果直接顯示更有用的資料(Rich Snippets, 複合式摘要)。

結構化資料不是工程師的癡心妄想,Google 已經有文件,而且 Google 跟 Bing 還有提供結構化資料測試工具。結構化資料的標記法有很多種,如 MicroData, MicroFormat,RDFa …等行內語法規格,以及 JSON LD…等外嵌資料規格。

本來我以為這只是洋人的東西,在台灣做網站,一輩子都用不上。但是上次看一個台灣大型活動類網站的工程師,也在講他們網站上使用了 Structured Data 後的神蹟,好像挺有趣的,不禁找幾個客戶的網站來嘗試一下,以下是實務應用心得。

先來看幾個搜尋引擎對知名網站的結構化資料展示成果


這是知識圖譜,如何知道自己夠不夠紅? 就像刺客聯盟的主角一樣,去 Google 搜尋自己的名字就好了。


漂亮的路徑連結(而不是一串醜網址)、評分、日期都是 microdata 的應用


酒類比價網


中國亞馬遜範例


活動類網站標記範例


活動類網站標記範例


評分、產品資訊、庫存量資訊


星星評分


地點類標記範例


電影類標記範例

(1).使用範例 - 使用 Micordata 規範來做標記
Micordata 規範由 Google, Microsoft, Yandex 和 Yahoo 共同制定,需要標記在網頁 HTML 行內。主要有三種屬性類型:

  • itemscope: 用來標記文章內容資料、產品內容資料、活動內容資料…的範圍。
  • itemtype: 設定這區塊所要表達的類別, 如 Person, Product, Event, Rating, breadcrumb...等等。
  • itemprop: 設定這個範圍所代表的屬性, 例如 name, url, title。

屬性總表可查閱 Schema.org ,有些人可能會 google 到一個 schema.org.cn,裡面的資料都是中文的,多有親和力,不過裡面的資料從 2011 年開始就沒更新了,有些屬性後來已經棄用了。最新的還是要查 Schema.org

使用步驟:

檢測工具可使用 Google Structured Data Testing Tool
Bing 標記驗證工具(要先將網站登錄 bing 站長工具)

步驟三:等待搜尋引擎收錄
可以在 Google 站長工具中的結構化資料區,看到索引的相關狀況。


從無...

到有

Google 站長工具又會提示一些 testing tool 沒測到的問題,如屬性遺漏、有設定數值卻沒出現…等等

步驟四:檢查 SERP 的顯示內容是否正常,如麵包屑順序錯誤、有標記的資料沒顯示之類的,如果有出來的話就可以準備跟客人邀功。

上述是 microdata 格式的標記法,但有人可能想到,有時候網頁 html 的排版根本不符資料標記的包法,或是在 html 裡面增加很多標記,讓檔案變得很大,那有別招嗎? 有!

(2).使用 JSON for linking data (JSON-LD) 規範來做標記
這種則是另外產生一份 JSON 清單放在網頁內,將資料與頁面結構抽離。相關的規範可查閱JSON-LD 公開說明書,但是要記得處理單引號、逗點等符號,以免造成網頁 JS 錯誤。還有資料分兩邊,維護時也要記得改兩個地方。

比如說辦活動請到柯市長,關於人的資訊可以這樣標記
< script type="application/ld+json" >
{
"@context": "http:// schema.org",
"@type": "Person",
"name": "柯文哲",
"title": "台北市長",
"url": "https://zh-tw.facebook.com/DoctorKoWJ"
}
< /script >

就這麼簡單嗎?
介紹技術,不能光講一些神蹟,然後講的輕鬆寫意。
身為執行者,也要講一下技術的缺點,
不然老闆要你明天就做出來,或是砸個五年五百塊下去的話怎麼辦?

經過實際使用與操作後,有以下九項的使用要點:

microdata 使用要點一: 屬性規則嚴謹,不能亂包,不然資料會抓錯層
< div itemscope itemtype="http://schema.org/Product">
< h2 itemprop="name">按摩棒< /h2>< /div>
這樣的包法,我們可以求得產品名稱叫: 按摩棒

< div itemscope itemtype="http://schema.org/Product">
< a href="http://tw.yahoo.com" itemprop="name">按摩棒< /a>< /div>
這樣的包法,產品名稱會變成: http://tw.yahoo.com

< div itemscope itemtype="http://schema.org/Product">
< a href="http://tw.yahoo.com" itemprop="url">< span itemprop="name">按摩棒< /span>< /a>< /div>
正確包法。

microdata 使用要點二: 有必填屬性,不是亂放就能用


看到有宣告活動類的,覺得不錯,拿網站的新聞頁程式來做標記,結果...

對活動類的標記而言,活動開始日期、地點都是必填的,沒有的話基本上就是無效屬性。但一般網站的新聞資料上架程式,只會有標題名稱、公告日期,哪來的活動開始日期、地點、費用輸入欄位?

microdata 使用要點三、屬性已經很多,但還不夠多,或是不知道怎麼標
許多網路商店都有一些神奇的銷售活動與定價方式,如登入後可享95折會員價,滿千送百再送優惠券、買越多越便宜...。有些賣法事實上 microdata 已經想到了,比如說電子零件類的賣法,買100顆以內,每顆1元,101~200顆,每顆0.9元,這個是可以標記的,而且每種電子零件還有不同的國際代號,但前提是你要知道怎麼標,還有搜尋引擎支不支援一些太細微的屬性。

上述是超出規範外的資料呈現方式可能無法標記的問題,另外因為搜尋引擎爬網站不是即時的,所以太即時的資料也無法標記,如明確的商品庫存數字、報名人數餘額、即時比賽分數等等。

microdata 使用要點四、後端程式要額外處理
有些網頁為了炫,或是一些其他的功能需求,必須透過人類操作行為觸發才會產生資料,這種網頁通常無法被 robots 索引,加 microdata 自然也沒用。雖然 Google 他們的 spider 可以像新型瀏覽器一樣轉譯及解讀您的網頁。(AJAX 檢索配置即將走入歷史),但是其他搜尋引擎呢?

前述範例有看到很多網站有評分星星,但這個是網站要提供線上評分功能,才能放置相關的 microdata 屬性,不然會視為偽造內容,可以被檢舉

還有工程師可能會開始肖想,直接把使用者輸入的資料帶入 microdata,但是其實許多屬性數值以國際標準或程式語法訂定,無法直接帶入一般人輸入的資料。如一個多國多語系網站,精準的活動日期時間標示法,必須使用 ISO 8601 標準:
< meta itemprop="startDate" content="“2015-01-01T11:00+08:00" >

另外還有地址標示法、營業時間與例外營業時間標示法......等各種資料的標記方法,都有眉角在裡面。基本上就是工程師與一般人常見的隔閡,一般人講兩句話,但是程式需要寫一大段,如 schema.org 官方範例 可見「我的店從早上9點開到下午2點,但是聖誕節時只開到早上 11 點,元旦時中午才開店」的標記範例。

五、假的複合式摘要?
有規則,那就可以造假,把自己的網頁變成 5 顆星 + 滿分嗎?


此為國外視為假複合式摘要的經典範例

Google 有云: 如果複合式摘要會突顯虛假或誘導性的資訊,造成負面的使用體驗,就可能被視為垃圾內容。舉例來說,如果某個複合式摘要以活動來促銷套裝旅遊行程,或者顯示了偽造的評論,就會被視為垃圾內容。
如果您發現了可能為垃圾內容的複合式摘要,可填寫Google: 回報複合式摘要中的垃圾內容表單。

六、搜尋引擎不給的,你不能要
網站流量太低的,網站少於 300 頁的,域名活不夠久的網站,通常是無法顯示複合式摘要的。

反觀有一些舊網站,完全沒有什麼優化,卻跑出精美的複合式摘要...


讓做SEO做得要死要活的工程師情何以堪...

七、大中華市場有自己的玩法 - 鬼島台灣
台灣的搜尋引擎,只有 Bing 跟 Google 才會顯示複合式摘要。可是瑞凡,沒有人在用 Bing!
台灣 Yahoo 則只會顯示自家收費服務的東西。

台灣人用 Yahoo 的多還是用 Google 的多呢? 我們來看一個流量分析服務的統計報告:


2010 年 ~ 2015 年台灣搜尋引擎使用情況 http://gs.statcounter.com/#search_engine-TW-daily-20100101-20150601

總使用人口,看起來是 Google 佔上風,所以大家等下就要去把 Yahoo 關鍵字廣告解約撤掉了嗎? 不對,其實還是要依據實際使用情況來判定。比如你的目標客戶群是不是都把 Yahoo 奇摩當首頁?
如果看 Google 分析報表,發現從 Yahoo 的搜尋來源真的很少,其實也有可能是你的網站在 Yahoo 不容易找到。 反之,發現訪客大部分都從 Yahoo 來,也有可能是你的網站用 Google 找不到...。

八、大中華市場有自己的玩法 - 中國大陸
講完了台灣,講講對岸,中國大陸地區的搜尋習慣跟台灣是不同的。那中國大陸的搜尋引擎,是否支援 microdata 之類的結構化資料標記內容?


2014 年 8 月中國地區搜尋引擎使用率 http://engine.data.cnzz.com/

這份資料雖然不夠新,但至少 SOSO 已經跟搜狗合併了。由此資料得知,中國最多人用的引擎是百度、好搜、搜狗,我們來研究一下這三大搜尋引擎的相關說明。


百度支援,但不多


好搜(360奇虎)則推出搜尋客製化服務,叫做 OneBox

搜狗(騰訊),現階段不支援,找不到相關文件,SERP也看不出有支援的跡象。

所以中國主要的搜尋引擎,對資料標準化屬性的支援度高不高呢?
高! 跟曾志偉一樣高!

九、牛津鞋不是雕花鞋,網站連結(Sitelink),不是複合式摘要


Google SERP - Sitelink 範例

有時候去 Google 搜尋一些品牌關鍵字,會顯示像這樣的東西,這也是「搜尋引擎不給的,你不能要」的功能。也不是資料標準化的相關規範可以控制的。

如果你家的網站有幸出現這種東西,但覺得有些連結不重要,不該出現在上面,可以到 Google 站長工具裡面去申請連結降級,約一~二週可見效。

台灣 Yahoo 也有這種東西,但卻是要收費的!


Yahoo 關鍵字廣告 sitelink 範例

台灣 Yahoo 就比較會做生意,只要花得起錢,就讓你達到同樣的效果,還可以自訂文字跟連結,這是 Yahoo 關鍵字廣告的功能之一。


二、HTML 語意標籤規範與大綱化

所謂語意標籤就是用 HTML 標籤來描述內容在此頁面中的角色。HTML5 另外定義了一些新的語意標籤,讓應用層面更廣(HTML5 標籤列表)。所以一般江湖中人說到 HTML5 的特點時,都會提到「HTML5 有助於 SEO...」之類的。

如果內容是有意義的,可以用語意標籤包。如果只是為了顯示樣式,用偽元素、 div 或其他非語意標籤來處理。提到網站語意化,就得提一下大綱模式 (Outliner) 檢測,大綱模式就是使用將頁面分出資料層級,「理論上」比一般圖片切版的網頁更容易讓搜尋引擎了解。

講到 SEO ,要先記得搜尋引擎是機器,它分不出網頁上的圖片編排有多高端大氣上檔次,它也無從得知 A 網頁上的文案跟 B 網頁上的文案誰比較棒,它只知道有人在搜尋引擎打上關鍵字搜尋,它就要把大家最喜歡點擊、內文最符合關鍵字的網頁給顯示出來。

以下介紹幾種語意標籤:

語意標籤 – 標題用的
< h1 >殭屍來了怎麼辦:< /h1 >
< h2 > 要準備的工具< /h2 >
< h3 > 繩結< /h3 >
< p >利用繩子打的結,不僅可以讓你攜帶許多物品,也可以讓你爬到樹上,甚至更可以用來捆綁殭屍,但是必須學習如何打各式各樣的結,可以從網路許多地方學起,最好能訓練在十秒內打好一個結,這樣遇到殭屍時才有足夠的時間反應。 < /p >
< h3 >油電混合車< /h3 >
< h3 >生火道具< /h3>
< h2 > 必學技能< /h2>
< h3 >學習不用指南針就可以找到方向< /h3 >
< h3 >急救方法< /h3>

語意標籤 - 內文用的
舉一些範例:

  • 表示強調: 八八風災,災民心痛呼喊為什麼要見總統變得那麼難?馬回應:「< em >我這不是來看你了嗎?< /em >」
  • 表示重點: 授旗世運代表時,< strong >將「運動員」說成「動物園」< /strong >。
  • 表示修正: 馬英九輔選致詞時要引導民眾說出「馬到成功」,問大家「 < DEL >馬倒了沒< /DEL > < ins >馬到了沒< /ins >」。
  • 表示小註解: 馬英九推崇吳志揚是好的父母官,竟然說他是「媽媽桑」。< small >「媽媽桑」一般指的是酒店的大班。< /small >
  • 表示引言: < blockquote >一位記者問總理:「請問總理先生,現在的中國人都窮吧?」總理肯定地說:「不是的!」全場嘩然,議論紛紛。總理看出了大家的疑惑,補充說了一句:「當官的不窮。」頓時掌聲雷動。總理的機智打動了在場的所有人,掌聲經久不息。 < /blockquote >

範例文案來自 520 至今"馬英九" 及 "國民黨官員" 說過的失言錄

article / section / aside ,皆為大綱元素,裡面必須要有標題。

< article < /article 定義文章內容或特定文句區塊,如:
< article>
< h1 主標< /h1>
< p 內文< /p>
< time 2015/1/1< /time>
< /article>

< section >< / section > 一般性的區塊,如:

< div class="title">
< h2 桌遊< /h2>
< section class="subtitle">
< h3 起源< /h3>
< h3 種類< /h3>
< /section>
< /div>

< aside >< /aside >文章的非主要內容區塊(如一些小註釋),或頁面中的非主要區塊(如側邊欄)。如:

< aside>
< h4 相關文章< /h4>
< p 分類清單< /p>
< /aside>

nav - 主要的導覽連結內容區塊
如主選單

< header>
< img id="logo" alt="公司名稱" />
< h1> 公司名稱< /h1>
< nav>
< ul>

< li> 連結1< /li> < li> 連結2< /li> < li> 連結3< /li> < li> 連結4< /li>
< /ul>
< /nav>
< /header>

麵包屑

< nav>
< ul class="breadcrumb">
< li> < a href="#"> 首頁< /a> < /li>
< li> < a href="#"> 分類< /a> < /li>
< li class="active"> 目前頁面< /li>
< /ul>
< /nav

換頁連結

< nav>
< ul class="pagination">
< li> < a href="#"> 1< /a> < /li>
< li> < a href="#"> 2< /a> < /li>
< li> < a href="#"> 3< /a> < /li>
< li> < a href="#"> 4< /a> < /li>
< li> < a href="#"> 5< /a> < /li>
< /ul>
< /nav>

其實拿 nav 來包換頁連結,這點一直很有爭議,因為 nav 通常是指「主要的導覽連結內容」,沒必要用在換頁連結上。但是 Bootstrap 3.x 用 nav 標籤來當換頁連結的範例,讓國內外各論壇上的異議者都噤聲了。

header/footer
< header >< /header >區塊開始的區域,無論整個網頁或是某個區塊一開始的地方。
< footer >< /footer >區塊結束的區域,無論整個網頁或是某個區塊結束的地方。

< header>

< img id="logo" alt="公司名稱" />
< h1 公司名稱< /h1>
< nav>
< ul>
< li> 連結1< /li> < li> 連結2< /li>
< /ul>
< /nav>
< /header>

< article>
< header>
< h1> 文章標題< /h1>
< time> 日期< /time>
< /header>
< /article>

一個網頁不只有上版塊跟頁尾會有 header/footer, 區塊的裡面還可以再有。所以請不要再把 css 樣式或 js 觸發條件直接下在header 上面了。

近年來 Yahoo 跟 Google 也常常發生搜尋品牌名稱時,搜尋引擎忽略刻意撰寫的精美 meta 描述,跑去抓 header 跟 footer 裡面的字的情況。如果抓得很好就沒事,但如果抓到一些糟糕的文字(如需安裝 flash player, 您的網頁瀏覽器太舊囉, copyright 2015 all right... ),客訴就接不完了。

語意標籤使用要點

  • 有人聽信 html5 語意標籤的各種神蹟,於是通通改用語意標籤排版,而不用 div 排,結果在 IE6 ~ IE8 這種跨時代的瀏覽器上面大跑版,請使用 html5shiv 之類的套件,讓語意標籤能在舊瀏覽器顯示正常。
  • 遇上不知道該用哪種語意標籤去排的網頁元件,可以上網搜尋。但通常會看到大家在筆戰。
  • 樣式名稱( class or id name )不要用語意標籤當名字,如 < section class="section1"> 之類的,日後如果語意標籤改了,接手的人就會覺得為啥明明是 article 或 figure,樣式名稱卻叫 section1 ?
  • 電腦程式語言通常是洋人的東西,如果你對華人文化與自己的祖國感到驕傲,「漢字標準格式」是一個集合了「語意樣式標準化」「文字設計」「高級排版功能」等三大概念的網頁排版 framework,一定很適合你。

結論
1.有些網站不用做也活得很好
其實上述那些只是給機器看的,網站的服務好、大家喜歡逛,才是給人看的。最常聽到的例子就是某大電商網站還在 table 切版,seo爛到炸,但 PChome 能讓人找東西的時候,是進去 PChome 裡面找,而不是在搜尋引擎或比價網找到再點進去,這就是厲害之處。

2.有些網站做了也沒用
有些商品貴、服務差、網站難用,就算有流量也沒銷量,神仙也難救。

3.能用錢解決的都不是問題
最常聽到網站在搜尋引擎找不到,或是都只能找到競爭對手的網站。只要錢花下去買關鍵字廣告,都不是問題。怕的是不肯投資,連一堆你聽過的牌子都還要買廣告,你的產品有比他們好? 肯投資之後,要怕的是競爭對手的銀彈太多,有些關鍵字太熱門,點擊成本比產品還貴,

4.免費的最貴
上述東西是免費的,規範文件不用錢就可以看,請搜尋引擎來索引也不用錢,只是規範會更新,搜尋引擎的規則也會更新,但是網站的原始碼通常沒事不會去更新,與其花時間去做這些有的沒有的優化,還不如跟客人推關鍵字廣告才是真的,效果快,賺得多。珍惜生命,遠離程式碼。

5.照妖鏡
上述有一些技術可以調整網頁,進而讓 SERP 中的網頁顯示星星、評分、價錢之類的技巧,但是這也是一個照妖鏡。例如網頁內容只有一兩顆星,或是顯示的價錢一看就比別人貴,那肯定沒有人會點進去,搞不好點擊率比一般沒有複合式摘要的網頁還差,不可不慎。


這篇文章有幫助到您嗎? 歡迎 😀打賞贊助