9.1 什麼是微數據標記？
微數據標記 (structured data) 是一種為 HTML 文件添加元數據的方式，目的是提升搜尋引擎和其他服務對網頁內容的解讀能力。微數據標記用於描述網頁上的不同實體及其關係，這有助於提升頁面在搜尋結果中的可見性，並提供額外功能，如豐富的摘要。
微數據標記 是加在網頁 HTML 代碼中的結構化數據。它提供給搜尋引擎有關頁面內容的額外資訊，如內容類型、作者、發佈日期、評分等數據。
主要的微數據標記類型：
- Schema.org: 最廣泛使用的微數據標記標準，主要搜尋引擎（Google、Bing、Yahoo、Yandex）都支持
- JSON-LD: 以 JSON 格式編碼的微數據標記，Google 推薦使用
- Microdata: 直接嵌入在 HTML 代碼中的微數據標記格式
9.2 Schema.org
Schema.org 是一個用於網頁數據結構化的數據類型和其屬性的詞彙表。它支持多種數據類型，如文章、事件、組織、產品等。
Schema.org 的使用範例
文章 (Article):
HTML
<article>
<h1>文章標題</h1>
<p>作者: 作者名</p>
<p>發佈日期: 2024年1月1日</p>
<img src="https://example.com/image.jpg" alt="圖片範例">
<p>文章內容...</p>
</article>
JavaScript
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Article",
"headline": "文章標題",
"author": {
"@type": "Person",
"name": "作者名"
},
"datePublished": "2024-01-01",
"image": "https://example.com/image.jpg",
"publisher": {
"@type": "Organization",
"name": "出版社",
"logo": {
"@type": "ImageObject",
"url": "https://example.com/logo.png"
}
}
}
</script>
產品 (Product):
HTML
<body>
<h1>產品名稱</h1>
<img src="https://example.com/product.jpg" alt="產品圖片">
<p>產品描述</p>
<p>價格: $29.99</p>
</body>
JavaScript
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Product",
"name": "產品名稱",
"image": "https://example.com/product.jpg",
"description": "產品描述",
"sku": "0446310786",
"offers": {
"@type": "Offer",
"priceCurrency": "USD",
"price": "29.99",
"itemCondition": "https://schema.org/NewCondition",
"availability": "https://schema.org/InStock",
"url": "https://example.com/product"
}
}
</script>
使用 Schema.org 的好處：
- 提升可見性: 搜尋引擎能在搜尋結果中顯示額外數據（豐富的摘要）。
- 改善解讀: 搜尋引擎更能理解內容，這可能會改善頁面排名。
- 標準支持: Schema.org 受到所有主要搜尋引擎的支持。
9.3 JSON-LD
JSON-LD (JavaScript Object Notation for Linked Data) 是在頁面中以 JSON 格式編碼微數據標記的方法，插入於 <script> 標籤中。Google 建議使用 JSON-LD 來處理結構化數據。
JSON-LD 的使用範例
組織 (Organization):
HTML
<body>
<h1>公司名稱</h1>
<p>公司描述</p>
<div>聯繫方式</div>
</body>
JavaScript
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Organization",
"name": "公司名稱",
"url": "https://example.com",
"logo": "https://example.com/logo.png",
"contactPoint": {
"@type": "ContactPoint",
"telephone": "+1-800-555-1212",
"contactType": "Customer Service"
}
}
</script>
9.4 Microdata
Microdata 是嵌入在 HTML 中的微數據標記格式。microdata 屬性直接加在 HTML 元素上，將其與 Schema.org 詞彙表中的類型和屬性連接起來。
Microdata 的使用範例
事件 (Event):
HTML
<body itemscope itemtype="https://schema.org/Event">
<h1 itemprop="name">事件名稱</h1>
<p itemprop="startDate" content="2024-05-01T19:00">2024年5月1日, 19:00</p>
<div itemprop="location" itemscope itemtype="https://schema.org/Place">
<span itemprop="name">舉辦地點</span>
<div itemprop="address" itemscope itemtype="https://schema.org/PostalAddress">
<span itemprop="streetAddress">街道, 門牌</span>
<span itemprop="addressLocality">城市</span>
<span itemprop="postalCode">郵遞區號</span>
<span itemprop="addressCountry">國家</span>
</div>
</div>
</body>
使用微數據標記的優點：
- 豐富的摘要: 搜尋引擎可以在搜尋結果中顯示擴展的摘要，提升點擊率。
- 提升內容理解: 搜尋引擎更能理解內容，這可能會改善頁面排名。
- 支持語音搜尋: 結構化數據可改善語音搜尋結果。
- 與其他服務的整合: 微數據標記允許將內容與各種服務整合，如 Google Knowledge Graph 等。
GO TO FULL VERSION