SEO優化之語意標記闖四關,第二關:Microdata

SEO優化之語意標記闖四關,第二關:Microdata

SEO優化之語意標記闖四關,第二關:Microdata
SEO優化之語意標記闖四關,第二關:Microdata

 

做SEO優化就是不能沒有它在一旁對你”耳提面命”!今天帶你更了解Microdata(微數據)!

Microdata (微數據) 的格式

 

微數據的例子 倘若今天,你有一個介紹即將上映的電影「艾莉塔:戰鬥天使」 的網站,其中包含了類型、導演以及一個通向預告片頁面的鏈接,您的 HTML 代碼可能看起來像這樣:

微數據主要用到這幾個屬性來標注信息:itemscope、itemtype、itemprop。

 

麼是微數據?

SEO優化另一個方式,也是網頁內部 SEO優化不可或缺的步驟。HTML5教學指的網頁中的 「HTML 標籤」告訴瀏覽器如 Google Chrome 如何顯示標籤中的信息。

如網頁中的 「<h1>Java</h1>」告訴瀏覽器,關鍵字 「Java」 必須以 「標題1」 的格式顯示

但是這個 「Java」可能意味者:一種程式語言、一種咖啡、一種島嶼等類別。

而 「HTML 標籤」 不會告訴搜尋引擎這個 「Java」 是意味著上述哪一種意思。

這時候,HTML5教學就必須在原本的 HTML 碼當中添加「Microdata (微數據)」 , 來宣告其類別, 就可以幫助搜尋引擎更精準識別網頁內容的具體意義。

在這個「Java」的例子中,微數據的角色就很像告訴搜尋引擎:

「嘿,這個網頁的 Java 是關於咖啡的內容喔!」或是「這個網頁的 Java 是指程式語言喔!」



<div><h1>艾莉塔:戰鬥天使</h1>

<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(電影)類來呈現資料–>

<h1 itemprop=”name”>艾莉塔:戰鬥天使</h1>

<!–宣告在movie(上一行指定)的類型下,該類型的項目”name”(片名)是什麼–>

<div itemprop=”director” itemscope itemtype=”http://schema.org/Person”>

<!–宣告要使用 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 連用,用來宣告要使用哪個 Schema 類型 (如電影、人物、書本等等), 如以下語法即電影類型的微數據:

<div itemscope itemtype=”http://schema.org/Movie”></div>

有了指定的 Schema 類型後,就用 itemprop 宣告:在這個類型下的屬性是什麼。

繼剛剛的例子 (指定的 Schema 類型為 「電影」) 後, 以下例子為宣告屬性 (itemprop) 為”name”(片名) 的內容是「艾莉塔:戰鬥天使」

<span itemprop=”name”>艾莉塔:戰鬥天使</span>

日期或時間類屬性,可使用 ISO日期格式 表示,如:

<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=”” >

完整的微數據類型請參考:http://schema.org/docs/full.html

 

 

相關連結:

超好玩的網路行銷課程,用各式的形象出現在你面前,讓你驚艷不已!

網路行銷課程策略爆料一:從搜尋者的角度看世界

網路行銷課程策略爆料二:別拖累我網頁的速度!

達內教育評價高絕非空穴來風,看完這篇文章你就懂了!

覺得人生有點無聊嗎?來上UI課程,讓你明年開始好棒棒!

上了網路行銷課程後,你再上這個就會超厲害的…

達內教育開幕 培養台灣IT人才進入全球企業

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料