美國NASDAQ上市公司
外商IT教育培訓企業
0800-777-100
週一到週五 09:00~21:00 週六到週日 09:00~18:00
如何善用Schema語意標記，提升網頁的SEO?
- 時間：2019-01-22
- 發布：達內教育台灣
- 來源：達內教育網路行銷課程
- 分享到：
|
目錄 1. Schema 語意標記小百科 2. Microdata(微數據)的格式 2-1. 什麼是微數據? 2-2. 微數據的例子 2-3. 微數據的語法 3. JSON-LD 的格式 2-1. 什麼是 JSON-LD? 2-2. JSON-LD 的例子與語法 4. RDFa 的格式 4-1. 什麼是 RDFa? 4-2. RDFa 的例子與語法 |
Schema 語意標記小百科
- 為何 SEO 要用 Schema?
- 讓你的網頁被 Schema 語意標記，是網頁內部 SEO 優化不可或缺的步驟。 唯有網頁的內容經過 Schema 語意標記之後，網頁內的資料才能真正的結構化， 讓搜尋引擎更了解網頁內被標記的資訊所代表的意義，進而讓網頁的資料大大被搜尋引擎應用：如搜尋結果、知識卡等，進而影響搜尋結果與排名排名與點閱率
- 支援的搜尋引擎
- Google、Bing、Yahoo 以及 Yandex (俄羅斯最大的搜尋引擎，也是全球第四大) 都支援 Schema 語意標記進行網頁資料結構化
- 編碼方式
- 因為在出現 Schema 語意標記之前，
早已存在各領域的語意標記方法，
主要有三種:
1. Microdata (微數據)
2. JSON-LD (JavaScript 串聯資料物件表示法)
3. RDFa (屬性資源描述架構)
以上編碼都是用來宣告「可讓機器自己讀取資料」， 也藉是透過這些表示法，電腦可以擷取已經定義好的資料。 因為以上語法都適用在各種不同的狀況，所以 Schema 的出現並不是推翻統一它們既有的語法。 而是只做統一定義詞彙如 author (作者)、product (產品) 等，再加上以上三種編碼搭配使用， 就能把網頁內容已結構化的風勢呈現給搜尋引擎。
Microdata (微數據) 的格式
- 什麼是微數據?
- 網頁中的 「HTML 標籤」告訴瀏覽器如 Google Chrome 如何顯示標籤中的信息。
如網頁中的 「<h1>Java</h1>」告訴瀏覽器，關鍵字 「Java」 必須以 「標題1」 的格式顯示
但是這個 「Java」可能意味者：一種程式語言、一種咖啡、一種島嶼等類別。
而 「HTML 標籤」 不會告訴搜尋引擎這個 「Java」 是意味著上述哪一種意思。
這時候，就必須在原本的 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) 為"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>
<a href="" >
<area href="" >
<audio src="" >
<embed src="" >
<iframe src="" >
<img src="" >
<link href="" >
<object data="" >
<source src="" >
<video src="" >
<base href="" >
<script src="" >
<input src="" >完整的微數據類型請參考：http://schema.org/docs/full.html
JSON-LD的格式
- 什麼是JSON-LD?
- JSON (JavaScript Object Notation) 原本適用在 Javascript 語言內的一種物件表示法
JSON-LD (JavaScript Object Notation-Linked Data)顧名思義，就是把資料套用 JSON 的格式放在網頁上， 讓搜尋引擎了解網頁內容的語意格式。 - JSON-LD的
例子與語法 - JSON 表示法的樣子如下：
{上例用來表示：名字為「John」、姓氏為 「Smith」、性別為 「男」
"firstName": "John",
"lastName": "Smith",
"sex": "male",
}
以上語法若搭配上各種 keyword (如下例的 "@context" 與 "@type" ) 與 term (如下例的 "givenName"、"gender" 與 "familyName"等屬性 ) 之後， 就形成功能跟微數據一樣的語意標記了。
<script type="application/ld+json"> {
"@context": "http://schema.org",
"@type": "Person",
"givenName": "John",
"familyName": "Smith",
"gender": "male",
}</script>
其實跟下面的微數據意思是一樣的：
<div itemscope itemtype="https://schema.org/Person">
<h1 itemprop="givenName">John<h1> <h1 itemprop="familyName">Smith<h1>
<span itemprop="gender">male<h1>
</div>
要注意的是 JSON-LD 大小寫要分明， 例如 keyword 的「@context｣ 不能寫成「@Contest｣；「@type｣ 不能寫成「@Type｣
RDFa的格式
- 什麼是RDFa?
- RDFa (Resource Description Framework in Attributes，屬性資源描述架構) 也是用來描述結構化資料的方式
語法跟微數據很像，用 vocab 來指定 Schema.org；typeof 指定類型；property 指定屬性。 - RDFa的
例子與語法 - RDFa 表示法的樣子如下：
<div vocab="http://schema.org" typeof="Person">
上例用來表示：名字為「John」、姓氏為 「Smith」、性別為 「男」
<span property="givenName">John<span> <span property="familyName">Smith<span>
<span property="gender">male<span>
其實跟下面的微數據意思是一樣的：
<div itemscope itemtype="https://schema.org/Person">
<h1 itemprop="givenName">John<h1> <h1 itemprop="familyName">Smith<h1>
<span itemprop="gender">male<h1>
</div>
