一點也不難!SEO優化語意標記一點就通(2)Microdata

-

​
一點也不難!SEO優化語意標記一點就通(2)Microdata​
​做SEO優化時,你知道如何讓你要優化的內容更"精準化"嗎?今天就告訴你怎麼做,先來了解這個語意標記吧!

Microdata (微數據) 的格式

什麼是微數據?

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

如網頁中的 「<h1>Java</h1>」告訴瀏覽器，關鍵字 「Java」 必須以 「標題1」 的格式顯示
但是這個 「Java」可能意味者：一種程式語言、一種咖啡、一種島嶼等類別。

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

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

在這個「Java」的例子中，微數據的角色就很像告訴搜尋引擎:
「嘿，這個網頁的 Java 是關於咖啡的內容喔！」或是「這個網頁的 Java 是指程式語言喔！」


微數據的例子

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

<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、itemprop。
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



相關連結：

HTML5教學的CSS基礎請打好!-字型排序一次滿足

HTML5教學的三個基本款(1):入門時,這兩樣東西一定要知道

HTML5教學的三個基本款(2):原來這東西這麼關鍵!?

免猶豫!選擇達內教育評價極高的Java課程就對了!

達內教育評價就像蜂蜜檸檬一樣好棒棒,你怎能錯過呢!

想要錢多事少離家近的工作,來達內教育幫你美夢成真

人人都能是工程師！台灣 IT 培訓中心推「找到工作再付學費」專案，要試試嗎？

這個網誌中的熱門文章

前端工程師設定CSS背景的五種方法(一)背景固定模式設定

-
圖片
如何固定模式讓前端工程師教你!第一關讓你輕鬆過關,立馬進入狀況! CSS  background-attachment 決定背景圖片是否要跟著滑鼠滾動而上下移動，而它有三種不同的呈現方案： 第一種為當滑鼠上下滾動時，背景圖片與網頁主體跟著上下滾動 第二種為當滑鼠上下滾動時，背景圖片相對位置固定不動，呈現效果就像是網頁主體與背景是分開的 第三種為當滑鼠上下滾動時，背景圖片絕對位置固定不動，似乎網頁主體是浮在背景圖之上的感覺。 而 前端工程師 們通常會將CSS background-repeat 與  背景圖樣設定 (background-image)  搭配設計。 CSS background-attachment 基本語法如下： background-attachment: 顯示參數; 而另外，有三種可以使用的顯示參數，來決定背景圖與網頁主體該以何種方式來搭配顯示，分別為  scroll （預設值，背景圖案的「相對位置」不會隨著滾動機制而移動，而網頁主體則會跟著滾動）、 fixed （背景圖案的「絕對位置」不會隨著滾動機制而移動，而網頁主體則還是會跟著滾動，彷彿網頁主體是浮在整張背景圖之上的感覺。多用於網頁背景圖為滿版的場合時使用）、 local （背景圖案與網頁主體都會跟著滾動機制而滾動。以下是針對這三種參數的範例： CSS background-attachment 各種參數的範例 See the Pen background-attachment-example by Tedutw ( @Tedutw ) on CodePen . 現在新一代的網頁多採滿版設計，其中的「background-attachment: fixed;」參數，常被當代的 前端工程師 搭配「 background-repeat: no-repeat; 」參數使用，做出網頁主體都浮在高質感的背景圖的效果。 其他常用 CSS background 背景屬性說明連結 1. 背景顏色設定 (background-color) 2. 背景圖樣設定 (background-image) 3. 背景重複設定 (background-repeat) 4. 背景固定模式設定 (b
閱讀完整內容

前端工程師設定CSS背景的五種方法(五)設定背景顏色

-
圖片
設定背景顏色原來對前端工程師來說超必須!這篇文章讓你超容易入門! 使用背景顏色設定 (background-color)屬性， 前端工程師 可利用之，讓簡潔的純色背景襯托出網頁的主體，也可決定網頁的風格。像是背景純黑的網頁，與背景為粉紅色的網頁，風格就大不相同。其實 background-color 能夠使用的範圍除了網頁背景色外，也可以讓前端工程師用來設計表格、DIV 區塊、span 等網頁元素的背景顏色。   CSS background-color 基本語法如下： background-color: 顏色名稱或色碼 ; background-color 可以使用的顏色值包含顏色的英文名稱、十六進位制色碼以及 RGB 色碼，挑選顏色請參考： 網頁顏色代碼對照表 。 CSS background-color 語法範例一、網頁背景 html{background-color: 顏色名稱或色碼 ;} See the Pen background-color-bg-example by Tedutw ( @Tedutw ) on CodePen . CSS background-color 語法範例二、DIV 區塊、H1-H6 標題等斷落的背景顏色 div(可替換成 h1、p 等網頁元素標籤){background-color: 顏色名稱或色碼 ;} See the Pen background-color-div-example by Tedutw ( @Tedutw ) on CodePen . 同樣的技巧還可用在其他的網頁元素，若想採用圖片當成背景，請參閱： 2. 背景圖樣設定 (background-image) 。 其他常用 CSS background 背景屬性說明連結 1. 背景顏色設定 (background-color) 2. 背景圖樣設定 (background-image) 3. 背景重複設定 (background-repeat) 4. 背景固定模式設定 (background-attachment) 5. 背景圖片位置設定 (background-position) 延伸閱讀： 前端工程師設定CSS
閱讀完整內容

前端工程師入門HTML5就靠這些撇步!(8上)製作拖曳元素

-
圖片
可拖曳的HTML5元素怎麼做?今天讓我來大顯身手!下次你就能出風頭啦!\ HTML5 Drag & Drop API-讓元素變得可拖曳 你可能不知道，過去在網頁裡面實現 Drag & Drop 是很麻煩的！一定要配合 CSS、onmousedown、onmouseup、setInterval() 等，才能做出元件拖曳的視覺效果。但！現在各位有福啦！ HTML5 有直接的 Drag & Drop 機制，讓 前端工程師 可直接使用 drag and drop 的功能，讓使用者直接透過拖曳的方式，把要上傳的檔案拉到瀏覽器當中。 所有的 HTML 元素都可設成「可拖曳」的。要讓元素變得可以拖曳，只要在該元素的原始碼中加入 draggable 屬性，如下例 (讓圖片變得可以拖曳)： <img draggable="true" />   HTML5 Drag & Drop API 的範例 See the Pen HTML 5 Drag and Drop by Tedutw ( @Tedutw ) on CodePen . 讓元素可拖放-HTML的部分 除了<a>、<img>，其他 HTML 裡的元素本來是被預設為不可以作為源元素的，也就是說，我們本來是「拖不動」 它的。但在 HTML5 ，只要為它加上 draggable="true" 屬性，它就能「被拖曳」了。下面是上例的 HTML 碼的一部分： See the Pen HTML 5 Drag and Drop by Tedutw ( @Tedutw ) on CodePen . draggable 屬性上加了 draggable="true"，這樣就能讓這個 div 元素變成可以拖曳的 (至少在 Chrome 中可以)。但是我們還需要使用 Javascript 在 dragstart 裡為 dataTransfer 設置一些數據，因此需要加上下面的代碼。這樣可以確保它可以被拖曳。 See the Pen HTML 5 Drag and Drop-2 by Tedutw ( @Tedutw ) on CodePen
閱讀完整內容