資深初心者: [筆記]網頁schema結構化標記

今天再研究網頁結構化標記參考了一些資料

在看google的說明時發現了schema.org

說明中有提到schema.org 是由 Google、Microsoft 與 Yahoo! 聯手打造的計劃，用來幫助解讀網頁中的相關資訊

(詳細內容參考: https://support.google.com/webmasters/answer/3069489?topic=3070267&hl=zh-Hant&rd=1 )

為了怕之後自己忘記做一下簡易說明筆記
說明如下：(詳細版請參考 https://schema.org/CreativeWork )
1. 在 html Tag 中加入 itemscope itemtype=”http://schema.org/WebSite”
範例:
<html itemscope itemtype="http://schema.org/WebSite"></html>

2. 在 head Tag 中加入以下 meta
範例:
<meta itemprop="name" property="og:title" content="結構化範例網頁" />
<meta itemprop="keywords" name="keywords" content="關鍵字 1,關鍵字 2,關鍵字 3" />
<meta itemprop="description" property="og:description" name="description" content="我的網站超炫超厲害......" />
<meta itemprop="url" property="og:url" content="http://allenyjs.blogspot.tw/" />
<meta itemprop="image" property="og:image" content="image/sample-logo.png" />
<meta itemprop="author" property="og:site_name" name="author" content="資深初心者的部落格">

3. 在 body Tag 中加入 itemscope="" itemtype=http://schema.org/WebPage
範例:
<body itemscope="" itemtype="http://schema.org/WebPage">

4. 在<body></body>內層加入一個標題並在此標題的 Tag 中加入 itemprop="name"
範例:
<h1 itemprop="name">結構化範例網頁</h1>

5. 在版權聲明的 Tag 上加入 itemprop="copyrightHolder"
範例:
<footer>
<p itemprop="copyrightHolder">某某公司版權所有 © 2016 All Rights Reserved. </p>
</footer>

可以利用以下工具協助標記及檢查

結構化資料標記協助工具:
https://www.google.com/webmasters/markup-helper/u/0/

結構化資料測試工具:
https://search.google.com/structured-data/testing-tool/u/0/

當然這只是簡單的標記而已因為太多種了
詳細的說明還是要看https://schema.org/CreativeWork

在Google測試工具中測試的結果大概會長成這樣