在 HTML5 中,微資料是一種在 HTML 文件中嵌入結構化資料的方法。它允許您以機器可讀的格式提供有關網頁內容的附加資訊。這對於搜尋引擎和其他想要理解內容含義的應用程式非常有用。

以下是如何在 HTML5 中使用微資料的基本範例:

html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Microdata Example</title> </head> <body> <article itemscope itemtype="http://schema.org/Article"> <h1 itemprop="name">How to Use Microdata in HTML5</h1> <p>Published on <time itemprop="datePublished" datetime="2023-01-01">January 1, 2023</time></p> <div itemprop="author" itemscope itemtype="http://schema.org/Person"> <p>Written by <span itemprop="name">John Doe</span></p> </div> <div itemprop="publisher" itemscope itemtype="http://schema.org/Organization"> <p>Published by <span itemprop="name">Your Website</span></p> </div> <div itemprop="articleBody"> <p>This is a tutorial on how to use Microdata in HTML5. Microdata allows you to embed structured data...</p> <!-- More content goes here --> </div> </article> </body> </html>

在這個例子中:

  • <article>元素代表頁面的主要內容。
  • itemscope屬性指示該元素定義微資料的範圍。
  • itemtype屬性使用來自 schema.org 等詞彙表的 URL 指定項目的類型。
  • itemprop屬性用於定義項目的屬性。

在這種情況下:

  • namedatePublishedauthor是第Article項的屬性。
  • namePerson項的屬性。
  • nameOrganization項的屬性。

當搜尋引擎或其他工具處理此頁面時,它可以理解結構化資料並使用它來提供更多資訊的搜尋結果或用於其他目的。

確保將內容和屬性替換為適合您的特定用例的相關資訊。您可以參考 schema.org,了解可在微資料中使用的各種詞彙。