許多SEO優化案例都在告訴我們,很大部分的細節須仰賴網路工程師,微數據Microdata的利用也是一樣!
什麼是微數據?
SEO優化另一個方式,也是網頁內部 SEO優化不可或缺的步驟。HTML5教學指的網頁中的 「HTML 標籤」告訴瀏覽器如
Google Chrome 如何顯示標籤中的信息。
如網頁中的 「<h1>Java</h1>」告訴瀏覽器,關鍵字 「Java」 必須以 「標題1」 的格式顯示
但是這個 「Java」可能意味者:一種程式語言、一種咖啡、一種島嶼等類別。
而 「HTML 標籤」 不會告訴搜尋引擎這個 「Java」 是意味著上述哪一種意思。
這時候,HTML5教學就必須在原本的 HTML 碼當中添加「Microdata (微數據)」 , 來宣告其類別, 就可以幫助搜尋引擎更精準識別網頁內容的具體意義。
在這個「Java」的例子中,微數據的角色就很像告訴搜尋引擎:
「嘿,這個網頁的 Java 是關於咖啡的內容喔!」或是「這個網頁的 Java 是指程式語言喔!」
如網頁中的 「<h1>Java</h1>」告訴瀏覽器,關鍵字 「Java」 必須以 「標題1」 的格式顯示
但是這個 「Java」可能意味者:一種程式語言、一種咖啡、一種島嶼等類別。
而 「HTML 標籤」 不會告訴搜尋引擎這個 「Java」 是意味著上述哪一種意思。
這時候,HTML5教學就必須在原本的 HTML 碼當中添加「Microdata (微數據)」 , 來宣告其類別, 就可以幫助搜尋引擎更精準識別網頁內容的具體意義。
在這個「Java」的例子中,微數據的角色就很像告訴搜尋引擎:
「嘿,這個網頁的 Java 是關於咖啡的內容喔!」或是「這個網頁的 Java 是指程式語言喔!」
微數據的例子
倘若今天,你有一個介紹即將上映的電影「艾莉塔:戰鬥天使」 的網站,其中包含了類型、導演以及一個通向預告片頁面的鏈接,您的
HTML 代碼可能看起來像這樣:
<div><h1>艾莉塔:戰鬥天使</h1>
<span>導演:詹姆士·卡麥隆 (生於1954年8月16日)</span>
<span>導演:詹姆士·卡麥隆 (生於1954年8月16日)</span>
<span>類型:賽博叛客動作片</span>
<a
href="..//movies/Alita-Battle-Angel-trailer.html">電影預告片</a>
</div>
這個 HTML 代碼若加了Microdata
微數據來宣告其資料類型,就可以讓搜尋引擎更容易辨識其類型。
<div itemscope
itemtype="https://schema.org/Movie">
<!--宣告要使用 schema.org 的 movie(電影)類來呈現資料-->
<!--宣告要使用 schema.org 的 movie(電影)類來呈現資料-->
<h1 itemprop="name">艾莉塔:戰鬥天使</h1>
<!--宣告在movie(上一行指定)的類型下,該類型的項目"name"(片名)是什麼-->
<!--宣告在movie(上一行指定)的類型下,該類型的項目"name"(片名)是什麼-->
<div itemprop="director" itemscope
itemtype="http://schema.org/Person">
<!--宣告要使用 schema.org 的 person(人物)類來呈現資料,並選擇 director 項目-->
<!--宣告要使用 schema.org 的 person(人物)類來呈現資料,並選擇 director 項目-->
導演:<span
itemprop="name">詹姆士·卡麥隆</span>
(生於<span
itemprop="birthDate">1954年8月16日)</span></div>
類型:<span
itemprop="genre">賽博叛客動作片</span>
<a href="../movies/Alita-Battle-Angel-trailer.html"
itemprop="trailer">電影預告片
</a>
</div>
微數據的語法
微數據主要用到這幾個屬性來標注信息:itemscope、itemtype、itemprop。
itemscope 與 itemtype 連用,用來宣告要使用哪個 Schema 類型 (如電影、人物、書本等等), 如以下語法即電影類型的微數據:
itemscope 與 itemtype 連用,用來宣告要使用哪個 Schema 類型 (如電影、人物、書本等等), 如以下語法即電影類型的微數據:
<div itemscope
itemtype="http://schema.org/Movie"></div>
有了指定的
Schema 類型後,就用
itemprop 宣告:在這個類型下的屬性是什麼。
繼剛剛的例子 (指定的 Schema 類型為 「電影」) 後, 以下例子為宣告屬性 (itemprop) 為"name"(片名) 的內容是「艾莉塔:戰鬥天使」
繼剛剛的例子 (指定的 Schema 類型為 「電影」) 後, 以下例子為宣告屬性 (itemprop) 為"name"(片名) 的內容是「艾莉塔:戰鬥天使」
<span itemprop="name">艾莉塔:戰鬥天使</span>
<time itemprop="startDate"
datetime="2019-03-02T19:00-08:00" > 2019年03月02日晚上7點
</time>
微數據可以嵌套,如:
<div itemscope
itemtype="https://schema.org/Movie" >
<h1 itemprop="name" >艾莉塔:戰鬥天使</h1>
<div itemprop="director" itemscope
itemtype="http://schema.org/Person">
導演:<span
itemprop="name">詹姆士·卡麥隆</span>
(生於<span
itemprop="birthDate">1954年8月16日)</span>
</div>
類型:<span
itemprop="genre">賽博叛客動作片</span>
<a href =
"../movies/avatar-theatrical-trailer.html" itemprop =
"trailer" >電影預告片
</a>
</div>
部分元素使用
URL 屬性值作為微數據的內容:
<a href="" >
<area href="" >
<audio src="" >
<embed src="" >
<iframe src="" >
<img src="" >
<link href="" >
<object data="" >
<source src="" >
<video src="" >
相反,某些元素的URL屬性不作為微數據內容:
<base href="" >
<script src="" >
<input src="" >
推薦閱讀:
- 網路行銷課程秘訣: 擄獲使用者的芳心
- SEO優化技能讓你年終獎金加碼過好年!
- 身為SEO的你,網路行銷課程必教的長尾關鍵字會了嗎?
- 學習網路行銷課程讓你到世界各地就業,盡情發揮創意!
- 想當社群小編?先提升你的網路行銷實戰力!
- 想要網路行銷之前,UI課程是必修課之一!
- SEO優化小撇步:想吸引人們目光,加上微數據就對了!