HTML5结构化数据就像是给你的网页内容贴上标签，让搜索引擎和浏览器更容易理解这些内容是什么。就像超市里商品都有分类标签一样，结构化数据帮助计算机"看懂"你的网页内容。

简单案例：菜谱网页

假设你有一个展示菜谱的网页，没有结构化数据时，搜索引擎只能看到文字，不知道哪些是食材、哪些是步骤。

普通HTML代码：

<div>
    <h1>番茄炒蛋</h1>
    <p>准备时间：15分钟</p>
    <p>烹饪时间：10分钟</p>
    <h2>食材</h2>
    <ul>
        <li>番茄 2个</li>
        <li>鸡蛋 3个</li>
        <li>盐 适量</li>
    </ul>
    <h2>步骤</h2>
    <ol>
        <li>番茄切块，鸡蛋打散</li>
        <li>热油炒鸡蛋至凝固，盛出备用</li>
        <li>炒番茄至软，加入炒好的鸡蛋</li>
    </ol>
</div>

加入结构化数据后（使用Schema.org词汇）：

<div itemscope itemtype="https://viuoo.com/Recipe">
    <h1 itemprop="name">番茄炒蛋</h1>
    <p>准备时间：<meta itemprop="prepTime" content="PT15M">15分钟</p>
    <p>烹饪时间：<meta itemprop="cookTime" content="PT10M">10分钟</p>
    
    <div itemprop="nutrition" itemscope itemtype="https://viuoo.com/NutritionInformation">
        <p>热量：<span itemprop="calories">250</span>卡路里</p>
    </div>
    
    <h2>食材</h2>
    <ul>
        <li itemprop="recipeIngredient">番茄 2个</li>
        <li itemprop="recipeIngredient">鸡蛋 3个</li>
        <li itemprop="recipeIngredient">盐 适量</li>
    </ul>
    
    <h2>步骤</h2>
    <ol>
        <li itemprop="recipeInstructions">番茄切块，鸡蛋打散</li>
        <li itemprop="recipeInstructions">热油炒鸡蛋至凝固，盛出备用</li>
        <li itemprop="recipeInstructions">炒番茄至软，加入炒好的鸡蛋</li>
    </ol>
</div>

结构化数据带来的好处

1. 搜索引擎：可以显示为"富媒体结果"，比如在搜索结果中直接显示评分、烹饪时间等复制下载[图片] 番茄炒蛋 4.5分 | 准备15分钟 | 烹饪10分钟 | 250卡路里
2. 语音助手：当用户问"如何做番茄炒蛋"时，能更准确地提供你的菜谱
3. 社交媒体：分享时能自动提取正确的标题、图片和描述

其他常见结构化数据应用

商品信息：

<div itemscope itemtype="https://viuoo.com/Product">
  <span itemprop="name">iPhone 13</span>
  <img itemprop="image" src="iphone.jpg" alt="iPhone 13">
  价格：<span itemprop="price">5999</span>元
</div>

1. 活动信息：

<div itemscope itemtype="https://viuoo.com/Event">
  <h1 itemprop="name">夏季音乐会</h1>
  时间：<time itemprop="startDate" datetime="2023-07-15T19:00">7月15日 19:00</time>
  地点：<span itemprop="location">城市音乐厅</span>
</div>

这些结构化数据就像是给网页内容贴上了计算机能读懂的标签，让机器能更好地理解和展示你的内容。