如何藉助HTML5微數據優化網頁?

人們提到 HTML5 都會順帶一句支持 RDFa,微數據,微格式,使得搜索引擎能更好地了解網頁內容和結構。在谷歌、百度上找了下,國內介紹微數據(Microdata)的文章屈指可數,大型網站案例只發現了大眾點評。

於是自己修改了1本書的網頁代碼,使之符合微數據標準,驗證了下效果如圖所示

網址下面的1行就是微數據在谷歌搜索結果中的富摘要信息。

雖然效果是達到了,但是網頁代碼被改得較為冗餘。

現在的網頁結構是這樣的

head 容器里加入傳統的 RDFa rel=author G+ 作者信息

body 標籤里加 itemtype=WebPage 網頁

第1個 div 是 itemprop=breadcrumb 麵包屑導航

第2個 div 是 itemtype=Book 書籍

itemprop=name 書名

itemprop=image 封面

itemprop=isbn 國際通用標準書號

itemprop=author 作者

itemprop=publisher 出版社

itemprop=datePublished 出版日期

itemprop=bookEdition 版次

itemprop=bookFormat 裝幀

itemprop=numberOfPages 頁數

itemprop=inLanguage 使用文字

第3個 div 是 itemprop=aggregateRating 評分匯總(引用自 MG12 的文章)

itemprop=ratingValue 評分值

itemprop=reviewCount 書評條數

第4個 div 是 itemtype=Review 書評

itemprop=name 書評標題

itemprop=author 書評作者

itemprop=datePublished 發布日期

itemprop=reviewRating 書評打分

itemprop=reviewBody 書評內容

第5個div 是 itemtype=Offer 報價

itemprop=price 售價

itemprop=priceCurrency 售價貨幣單元

itemprop=availability 有無庫存

問題

1. itemprop=name 與 h1,title 相同,都是告訴搜索引擎這個頁面的名字。如果不加3者中的任一1項,不符合站內優化準則。但是全加上,又有堆砌關鍵詞嫌疑,需要如何取捨?

2. 微數據辭彙表裡找不到「書籍-目錄」這項,是否用原始的 li 標籤標識書的目錄?

3. 單純的書評頁面里若不用 itemprop=aggregateRating,只用 itemtype=Review 里的 itemprop=reviewRating 驗證後不顯示評分星數,是否一定要在書評里添加評分匯總?

參考資料

在谷歌工作過的 Mark Pilgrim 對於微數據的詳細介紹 Microdata - Dive Into HTML5

谷歌結構化數據測試工具 Google Structured Data Testing Tool


目前google, yahoo, bing, baidu, yandex都已經支持豐富網頁摘要和結構化數據。

關於LZ問題:

1、 itemprop=name 與 h1,title 相同,是否會導致關鍵詞堆棧

沒有任何問題。只有 itemprop=name 與 h1是在頁面上顯示,title只在搜索結果中展現。搜索引擎對關鍵詞密度只統計頁面出現次數。再說了, itemprop=name 與 h1隻定義一個,要達到堆棧標準應該是&<圍城&>,&<圍城&>,&<圍城&>,&<圍城&>,&<圍城&>,&<圍城&>或者&<圍城&>,錢鍾書&<圍城&>,購買&<圍城&>,&<圍城&>好看嗎,&<圍城&>怎麼樣,哪裡有&<圍城&>賣等。這樣無意義的語句或內容。

2、書籍目錄問題,以及書評頁面里若不用 itemprop=aggregateRating,只用 itemtype=Review 里的 itemprop=reviewRating 驗證後不顯示評分星數,是否一定要在書評里添加評分匯總?

書籍目錄以及評分問題,請查看 http://schema.org/Book (新功能)網頁下面有代碼格式,請自行篩選,並在測試工具里調試。

——————————————————————————————————————————————————————————————————————————————————————

關於豐富網頁摘要信息(微數據)和結構化數據的一些個人看法:

1、網站技術走到今天已經非常成熟,雖然搜索引擎技術也一直在進步,但對於數據抓取解讀只能使用文字編碼進行,因此圖片、視頻、音頻數據只能透過文字定義來識別。隨著互聯網數據量爆發增長,簡單的文本搜索結果展示已經無法滿足用戶需求。因為信息泛濫導致搜索結果同質化,且用戶根本很難透過TITLE+DESCRIPTION來判斷網頁內容是否為自身想要的內容,結果必然會導致用戶搜索體驗下降。豐富網頁摘要信息(微數據)和結構化數據可以很好的改善以上問題。雖然GOOGLE表示使用微數據展現的搜索結果,並不會對排名起作用,但可能會增加網站點擊與流量。那麼搜索結果點擊率與流量又是搜索結果排名非常重要的指標,也就是說網站搜索展現結果改善雖然不會直接影響搜索排名,但是如果頁面點擊率與網站流量上升肯定對SEO是起正效益的。

PS:自然搜索結果點擊率在數據工具里是沒有的,但我相信在演算法中,搜索引擎是會對自然搜索結果中的前幾頁結果做點擊率統計的。因此豐富網頁摘要信息(微數據)+結構化數據是以後SEOer必須掌握的技能。

2、豐富網頁摘要信息(微數據)和結構化數據需要跨部門配合才可以完成。包括:前端、後端、產品、內容生產、市場等部門一起合作。因為微數據在搜索結果中實現,除了在代碼中添加之外,還需要考慮內容產生是自身還是用戶。所以需要更改網站用戶界面、後台界面。當界面改變後還會涉及用戶體驗問題。國內外很多大網站豐富網頁摘要信息(微數據)和結構化數據做的都不是很好,除很多網站都是很早前開發的,沒有考慮這概念之外,還有部分是使用RDFa,微格式(RDFa,微格式這兩種方式用擴展性和兼容性問題,微數據是目前GOOGLE、YAHOO、BING搞的一個新標準。RDFa,微格式目前同樣支持。詳細參見:https://support.google.com/webmasters/answer/1211158?hl=zh-Hansref_topic=4600154)

還有一個原因是手機端的流行,所有人都認為移動是未來的戰場和唯一,大公司都把資源和重心向移動傾斜,對WEB頁面的重視程度下降,或者沒有動力去改善。當然SEO在絕大多數公司都是逼格很低的工種,對於有錢的公司來說SEO的流量對比PPC流量來說幾乎可以抹掉。於是PPC變成一項高深的技術活,SEO變成一項發外鏈找資源的活,而且很多公司都把PPC都等同於SEM。我個人的觀點是PPC最重要的是數據分析能力,SEO則更需要掌握前端/後端/產品能力,如何把內容、用戶瀏覽體驗、搜索結果表現結合在一起去改進網站質量。

費話了這麼多說個案例,高逼格網站:豆瓣

X戰警:逆轉未來 在GOOGLEBINGBAIDU的搜索結果

GOOGLE

BING

BAIDU

X戰警 這新片子在BING中微數據的信息最佳,GOOGLE其次,百度根本就沒有微數據體現。說明那啥,BAIDU的爬蟲抓取能力有點LOW!

BING使用的是頁面中的這段代碼:

GOOGLE使用的是頁面中的這段代碼:

PS:百度未來展現結果也會使用該代碼

從搜索結果和代碼使用來看,微軟已經針對影片性質的關鍵詞做出改搜索展現結果做了很大改變。GOOGLE只是在TITLE下方增加一欄微數據(使用英文關鍵詞搜索時,GOOGLE已經在右側將影片詳細信息羅列)。只能說GOOGLE目前對中國WEB搜索質量改善並不關注和在意,ANDROID才是重點。

PS:MB我家大范爺呢?

百度同時也對影片搜索結果做改進,只是將搜索結果鏈接在自家產品上。

目前各大公司基本上使用的都是RDFa/微格式,所以GOOGLE/YAHOO/BING統一標準,開始建立微數據格式(百度是否支持,未知)。因此微數據在未來WEB、搜索展現、數據分析上是有很大想像空間的。

另外還有一家案例:大眾點評

GOOGLE

BAIDU

BING

代碼部分:

BING的搜索展現結果,依然微數據信息展現最佳,GOOGLE/BAIDU均使用單店的數據信息,原因就是點評沒有文本鏈接形式的商戶總頁面,而是通過搜索框搜索進入,然後對搜索結果頁面做了偽靜態處理。因此GOOGLE/BAIDU只能根據頁面質量判斷抓取,相對BING會深入一點,抓取到總頁面,將內容展現結果處理的更完美。說明啥,BING水平高啊,得點贊!(相對於點評的做法,阿里的做法則更符合搜索引擎要求,阿里會將商家和產品兩大類分開,如:http://alibaba.com/supplier/***和http://alibaba.com/products/***,會了增加自然搜索結果表現還會根據產品增加一個http://alibaba.com/catalog/***。內容同樣都是用戶生產與添加,但是透過設計/前端/後端三者將頁面生成不同排羅組合,即避開內容重複率過高,又大幅增加頁面收錄量。相信在ROBOTS.TXT文件里,阿里應該是會有搜索結果所產生的頁面剔除的。所以我認為阿里的SEO應該是國內做的最牛逼的,在所有搜索引擎的排名表現結果都很理想,確實很科學,除非有人為干預。SO阿里的SEO去點評,點評現在應該就是團購第一了有木有。哈哈)

3、微數據對網站本身就是很好的數據分類和信息規劃,如果做的好其本身不就是大數據的基礎嗎?豐富網頁摘要信息(微數據)和結構化數據規劃和實施是非常有必要的,GOOGLE既然做了微數據統一標準,未來肯定會對GOOGLE ANALYTICS做改進,增加數據統計與分析的維度和指標。不就是大家更期待的更接近和了解用戶嗎?

關於SEO的一些個人看法:

知名的搜索引擎都發出一個強烈的信號,即以內容和用戶瀏覽體驗為搜索表現核心。同時流量入口正在改變,智能手機與社交網站崛起,降低了搜索引擎所佔網站流量份額,即流量入口正在改變。SEO思維應該從Search Engine Optimization轉變為Website Performance Optimization(我自己想的名稱,以下簡稱WPO),也就是不再單一以搜索引擎排名與流量為標準,而是以頁面質量與用戶瀏覽體驗為標準。事實上GOOGLE從始至終提倡的都是WPO,也就是GOOGLE說的,如果沒有搜索引擎你如何去針對你的用戶去營銷。當然目前外鏈仍然是網站獲得排名結果前靠最直接有效的方法,因為搜索質量的改進需要很長時間。使用WPO的好處還有如果未來人們不再使用搜索引擎獲取信息,那麼擁有較好頁面質量與用戶瀏覽體驗度的網站依然會受到用戶的青睞。

——————————————————————————————————————————————————————————————————————————————————————

寫了這麼多,也不知道能不能讓LZ滿意。各位爺,不滿意咱再改進還不行嘛!

有時間再上來補


正在學習,查到一個IBM的中文文檔

通過 RDFa 1.1 Lite 使您的 HTML 頁面更加聰明

分享出來給大家參考。


學習了,謝謝大神


推薦閱讀:

Web 平台是否會在移動平台上最終超過應用平台?為什麼?
移動端HTML5如何開發?跟PC端有什麼區別?
你如何理解 HTML5 的 section?會在什麼場景使用?為什麼這些場景使用 section 而不是 div?
如何系統學習Web全棧開發?

TAG:前端開發 | 搜索引擎優化SEO | HTML5 |