今天再研究網頁結構化標記 參考了一些資料
在看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測試工具中測試的結果大概會長成這樣
最後我的範例請參考: