知识库

Appearance

Return to top
On this page

HTML微数据和结构化数据

微数据（Microdata）和结构化数据是提高网页SEO和语义化的重要技术，帮助搜索引擎和其他工具更好地理解网页内容。

微数据（Microdata）基础

微数据概念

微数据是HTML5的一部分，允许我们在HTML标记中嵌入机器可读的数据。

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>微数据示例</title>
</head>
<body>
  <!-- 基本微数据示例 -->
  <div itemscope itemtype="http://schema.org/Person">
    <h1 itemprop="name">张三</h1>
    <p itemprop="jobTitle">软件工程师</p>
    <div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
      <span itemprop="streetAddress">北京市朝阳区xxx街道</span>
      <span itemprop="addressLocality">北京</span>
      <span itemprop="addressRegion">朝阳区</span>
      <span itemprop="postalCode">100000</span>
    </div>
    <a href="mailto:zhang@example.com" itemprop="email">zhang@example.com</a>
    <a href="tel:+86-10-12345678" itemprop="telephone">+86-10-12345678</a>
  </div>
</body>
</html>

微数据属性详解

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>微数据属性详解</title>
</head>
<body>
  <!-- itemscope: 定义微数据项的开始 -->
  <!-- itemtype: 定义数据类型 -->
  <!-- itemprop: 定义属性 -->
  <div itemscope itemtype="http://schema.org/Article">
    <!-- 文章标题 -->
    <h1 itemprop="headline">HTML微数据和结构化数据指南</h1>
    
    <!-- 发布日期 -->
    <time itemprop="datePublished" datetime="2023-12-01T10:00:00+08:00">2023年12月1日</time>
    
    <!-- 作者信息 -->
    <div itemprop="author" itemscope itemtype="http://schema.org/Person">
      <span itemprop="name">李四</span>
    </div>
    
    <!-- 文章描述 -->
    <p itemprop="description">本文详细介绍HTML微数据和结构化数据的使用方法。</p>
    
    <!-- 文章正文 -->
    <div itemprop="articleBody">
      <p>这是文章的正文内容...</p>
    </div>
    
    <!-- 关键词 -->
    <ul>
      <li itemprop="keywords">HTML</li>
      <li itemprop="keywords">微数据</li>
      <li itemprop="keywords">结构化数据</li>
    </ul>
  </div>
</body>
</html>

复杂微数据结构

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>复杂微数据结构</title>
</head>
<body>
  <!-- 餐厅信息 -->
  <div itemscope itemtype="http://schema.org/Restaurant">
    <h1 itemprop="name">美味餐厅</h1>
    
    <!-- 餐厅地址 -->
    <div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
      <span itemprop="streetAddress">北京市海淀区中关村大街1号</span>,
      <span itemprop="addressLocality">北京</span>,
      <span itemprop="postalCode">100080</span>
    </div>
    
    <!-- 联系信息 -->
    <div>
      电话: <span itemprop="telephone">(010) 1234-5678</span>
      网址: <a href="http://restaurant.com" itemprop="url">restaurant.com</a>
    </div>
    
    <!-- 营业时间 -->
    <div itemprop="openingHoursSpecification" itemscope itemtype="http://schema.org/OpeningHoursSpecification">
      <meta itemprop="dayOfWeek" content="Monday"> 周一: <span itemprop="opens">11:00</span> - <span itemprop="closes">22:00</span>
    </div>
    
    <!-- 菜单 -->
    <div itemprop="menu" itemscope itemtype="http://schema.org/Menu">
      <h3>特色菜品</h3>
      <div itemprop="hasMenuSection" itemscope itemtype="http://schema.org/MenuSection">
        <h4 itemprop="name">主食</h4>
        <div itemprop="hasMenuItem" itemscope itemtype="http://schema.org/MenuItem">
          <span itemprop="name">宫保鸡丁</span> - ¥28
          <span itemprop="description">经典川菜，酸甜可口</span>
        </div>
        <div itemprop="hasMenuItem" itemscope itemtype="http://schema.org/MenuItem">
          <span itemprop="name">麻婆豆腐</span> - ¥18
          <span itemprop="description">嫩滑豆腐配麻辣酱</span>
        </div>
      </div>
    </div>
    
    <!-- 评分 -->
    <div itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
      评分: <span itemprop="ratingValue">4.5</span>/5.0
      (<span itemprop="reviewCount">120</span> 条评价)
    </div>
  </div>
</body>
</html>

结构化数据（JSON-LD）

JSON-LD基础

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>JSON-LD结构化数据</title>
  
  <!-- JSON-LD结构化数据 -->
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "Person",
    "name": "张三",
    "jobTitle": "软件工程师",
    "telephone": "+86-10-12345678",
    "email": "zhang@example.com",
    "address": {
      "@type": "PostalAddress",
      "streetAddress": "北京市朝阳区xxx街道",
      "addressLocality": "北京",
      "postalCode": "100000"
    }
  }
  </script>
</head>
<body>
  <h1>张三 - 软件工程师</h1>
  <p>联系方式：电话 +86-10-12345678 | 邮箱 zhang@example.com</p>
</body>
</html>

产品结构化数据

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>产品结构化数据</title>
  
  <script type="application/ld+json">
  {
    "@context": "https://schema.org/",
    "@type": "Product",
    "name": "iPhone 15 Pro",
    "image": [
      "https://example.com/photos/1x1/photo.jpg",
      "https://example.com/photos/1x2/photo.jpg"
    ],
    "description": "全新设计的iPhone 15 Pro，配备A17 Pro芯片",
    "sku": "IP15P-128GB-BLK",
    "mpn": "iPhone15Pro",
    "brand": {
      "@type": "Brand",
      "name": "Apple"
    },
    "aggregateRating": {
      "@type": "AggregateRating",
      "ratingValue": "4.8",
      "reviewCount": "245"
    },
    "offers": {
      "@type": "Offer",
      "url": "https://example.com/iphone-15-pro",
      "price": "7999",
      "priceCurrency": "CNY",
      "availability": "https://schema.org/InStock",
      "seller": {
        "@type": "Organization",
        "name": "苹果官方商店"
      }
    }
  }
  </script>
</head>
<body>
  <h1>iPhone 15 Pro</h1>
  <p>全新设计的iPhone 15 Pro，配备A17 Pro芯片</p>
  <p>价格：¥7999</p>
</body>
</html>

组织机构结构化数据

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>组织机构结构化数据</title>
  
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "Organization",
    "name": "创新科技有限公司",
    "alternateName": "InnovTech",
    "url": "https://www.innovtech.com",
    "logo": "https://www.innovtech.com/logo.png",
    "foundingDate": "2010",
    "founders": [
      {
        "@type": "Person",
        "name": "王五"
      },
      {
        "@type": "Person",
        "name": "赵六"
      }
    ],
    "address": {
      "@type": "PostalAddress",
      "streetAddress": "北京市海淀区上地十街1号",
      "addressLocality": "北京",
      "postalCode": "100085",
      "addressCountry": "CN"
    },
    "contactPoint": [
      {
        "@type": "ContactPoint",
        "telephone": "+86-10-8888-9999",
        "contactType": "customer service",
        "areaServed": "CN",
        "availableLanguage": "zh-CN"
      }
    ],
    "sameAs": [
      "https://www.facebook.com/innovtech",
      "https://twitter.com/innovtech",
      "https://www.linkedin.com/company/innovtech"
    ]
  }
  </script>
</head>
<body>
  <h1>创新科技有限公司</h1>
  <p>成立于2010年，专注于前沿技术开发</p>
</body>
</html>

事件结构化数据

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>事件结构化数据</title>
  
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "Event",
    "name": "2024年Web开发大会",
    "startDate": "2024-03-15T09:00",
    "endDate": "2024-03-16T17:00",
    "eventStatus": "https://schema.org/EventScheduled",
    "eventAttendanceMode": "https://schema.org/OfflineEventAttendanceMode",
    "location": {
      "@type": "Place",
      "name": "北京国际会议中心",
      "address": {
        "@type": "PostalAddress",
        "streetAddress": "北京市朝阳区北辰东路8号",
        "addressLocality": "北京",
        "postalCode": "100101",
        "addressCountry": "CN"
      }
    },
    "image": [
      "https://example.com/event-logo.jpg",
      "https://example.com/venue-photo.jpg"
    ],
    "description": "年度Web开发技术大会，汇聚业界专家分享最新技术趋势",
    "organizer": {
      "@type": "Organization",
      "name": "中国Web开发者协会",
      "url": "https://www.webdev.org.cn"
    },
    "offers": {
      "@type": "Offer",
      "name": "早鸟票",
      "price": "800",
      "priceCurrency": "CNY",
      "validFrom": "2023-12-01",
      "validThrough": "2024-01-31",
      "url": "https://example.com/buy-tickets",
      "availability": "https://schema.org/InStock"
    },
    "performer": [
      {
        "@type": "Person",
        "name": "李博士",
        "jobTitle": "首席技术官"
      },
      {
        "@type": "Person",
        "name": "张工程师",
        "jobTitle": "前端架构师"
      }
    ]
  }
  </script>
</head>
<body>
  <h1>2024年Web开发大会</h1>
  <p>2024年3月15日-16日 | 北京国际会议中心</p>
</body>
</html>

Open Graph协议

基础OG标签

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Open Graph协议</title>
  
  <!-- Open Graph基本标签 -->
  <meta property="og:title" content="HTML微数据和结构化数据指南">
  <meta property="og:type" content="article">
  <meta property="og:image" content="https://example.com/article-image.jpg">
  <meta property="og:url" content="https://example.com/html-microdata-guide">
  <meta property="og:description" content="详细介绍HTML微数据和结构化数据的使用方法">
  
  <!-- 可选的OG标签 -->
  <meta property="og:site_name" content="技术博客">
  <meta property="og:locale" content="zh_CN">
  <meta property="article:author" content="张三">
  <meta property="article:published_time" content="2023-12-01T10:00:00+08:00">
  <meta property="article:section" content="前端开发">
  
  <!-- Twitter Card -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="HTML微数据和结构化数据指南">
  <meta name="twitter:description" content="详细介绍HTML微数据和结构化数据的使用方法">
  <meta name="twitter:image" content="https://example.com/article-twitter.jpg">
</head>
<body>
  <h1>HTML微数据和结构化数据指南</h1>
  <p>当分享到社交媒体时，这些OG标签会帮助正确显示预览信息。</p>
</body>
</html>

产品OG标签

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>产品OG标签</title>
  
  <!-- 产品页面OG标签 -->
  <meta property="og:type" content="product">
  <meta property="og:title" content="iPhone 15 Pro">
  <meta property="og:description" content="全新设计的iPhone 15 Pro，配备A17 Pro芯片">
  <meta property="og:image" content="https://example.com/iphone15pro.jpg">
  <meta property="og:url" content="https://store.example.com/iphone-15-pro">
  
  <!-- 产品特定OG标签 -->
  <meta property="product:price:amount" content="7999">
  <meta property="product:price:currency" content="CNY">
  <meta property="product:availability" content="in stock">
  <meta property="product:condition" content="new">
  <meta property="product:retailer_part_no" content="IP15P-128GB-BLK">
  <meta property="product:brand" content="Apple">
</head>
<body>
  <h1>iPhone 15 Pro</h1>
  <p>全新设计的iPhone 15 Pro，配备A17 Pro芯片</p>
</body>
</html>

微格式（Microformats）

hCard微格式

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>hCard微格式</title>
</head>
<body>
  <!-- hCard微格式用于联系信息 -->
  <div class="vcard">
    <h1 class="fn">张三</h1>
    <div class="org">创新科技有限公司</div>
    <div class="title">前端开发工程师</div>
    
    <div class="adr">
      <span class="street-address">北京市朝阳区xxx街道</span>
      <span class="locality">北京</span>
      <span class="postal-code">100000</span>
      <span class="country-name">中国</span>
    </div>
    
    <div class="tel">
      <span class="type">工作</span>:
      <span class="value">+86-10-12345678</span>
    </div>
    
    <a class="email" href="mailto:zhang@example.com">zhang@example.com</a>
    <a class="url" href="https://zhang.example.com">个人网站</a>
    
    <div class="note">专注于前端技术开发</div>
  </div>
</body>
</html>

hCalendar微格式

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>hCalendar微格式</title>
</head>
<body>
  <!-- hCalendar微格式用于日历事件 -->
  <div class="vevent">
    <h2 class="summary">2024年Web开发大会</h2>
    <div class="description">年度Web开发技术大会，汇聚业界专家分享最新技术趋势</div>
    
    <div>
      时间: 
      <abbr class="dtstart" title="2024-03-15T09:00:00+08:00">2024年3月15日 9:00</abbr> -
      <abbr class="dtend" title="2024-03-16T17:00:00+08:00">2024年3月16日 17:00</abbr>
    </div>
    
    <div class="location">
      地点: 
      <span class="fn org">北京国际会议中心</span>,
      <span class="adr">
        <span class="street-address">北京市朝阳区北辰东路8号</span>
      </span>
    </div>
    
    <div class="url">更多信息: <a href="https://webconf.example.com">webconf.example.com</a></div>
  </div>
</body>
</html>

实践示例

电商产品页面

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>无线蓝牙耳机 - 产品页面</title>
  
  <!-- JSON-LD结构化数据 -->
  <script type="application/ld+json">
  {
    "@context": "https://schema.org/",
    "@type": "Product",
    "name": "ProSound 无线蓝牙耳机",
    "image": "https://shop.example.com/images/earbuds.jpg",
    "description": "高保真音质，主动降噪，40小时续航",
    "sku": "PS-EARBUDS-BLK",
    "mpn": "PS-EB-001",
    "brand": {
      "@type": "Brand",
      "name": "ProSound"
    },
    "review": [
      {
        "@type": "Review",
        "reviewRating": {
          "@type": "Rating",
          "ratingValue": "5",
          "bestRating": "5"
        },
        "author": {
          "@type": "Person",
          "name": "李用户"
        }
      }
    ],
    "aggregateRating": {
      "@type": "AggregateRating",
      "ratingValue": "4.7",
      "reviewCount": "128"
    },
    "offers": {
      "@type": "Offer",
      "price": "599",
      "priceCurrency": "CNY",
      "availability": "https://schema.org/InStock",
      "seller": {
        "@type": "Organization",
        "name": "ProSound官方旗舰店"
      },
      "priceValidUntil": "2024-12-31"
    },
    "gtin13": "1234567890123",
    "category": "电子产品 > 音频设备 > 耳机"
  }
  </script>
  
  <!-- Open Graph标签 -->
  <meta property="og:title" content="ProSound 无线蓝牙耳机">
  <meta property="og:type" content="product:item">
  <meta property="og:image" content="https://shop.example.com/images/earbuds-og.jpg">
  <meta property="og:url" content="https://shop.example.com/earbuds">
  <meta property="og:description" content="高保真音质，主动降噪，40小时续航">
  <meta property="product:price:amount" content="599">
  <meta property="product:price:currency" content="CNY">
</head>
<body>
  <div itemscope itemtype="https://schema.org/Product">
    <h1 itemprop="name">ProSound 无线蓝牙耳机</h1>
    
    <div itemprop="offers" itemscope itemtype="https://schema.org/Offer">
      <span itemprop="price">¥599</span>
      <link itemprop="availability" href="https://schema.org/InStock">
      <span>有现货</span>
    </div>
    
    <div itemprop="aggregateRating" itemscope itemtype="https://schema.org/AggregateRating">
      <span itemprop="ratingValue">4.7</span>/5.0
      (<span itemprop="reviewCount">128</span> 条评价)
    </div>
    
    <img src="earbuds.jpg" alt="ProSound 无线蓝牙耳机" itemprop="image">
    
    <div itemprop="description">
      <p>高保真音质，主动降噪，40小时续航</p>
    </div>
    
    <div itemprop="brand" itemscope itemtype="https://schema.org/Brand">
      <span itemprop="name">ProSound</span>
    </div>
    
    <ul>
      <li itemprop="featureList">主动降噪技术</li>
      <li itemprop="featureList">40小时续航</li>
      <li itemprop="featureList">IPX5防水等级</li>
    </ul>
  </div>
</body>
</html>

餐厅页面

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>美味餐厅 - 餐厅页面</title>
  
  <!-- JSON-LD结构化数据 -->
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "Restaurant",
    "name": "美味餐厅",
    "image": "https://restaurant.example.com/images/restaurant-exterior.jpg",
    "description": "提供正宗川菜和粤菜，环境优雅，服务周到",
    "address": {
      "@type": "PostalAddress",
      "streetAddress": "北京市海淀区中关村大街1号",
      "addressLocality": "北京",
      "postalCode": "100080",
      "addressCountry": "CN"
    },
    "geo": {
      "@type": "GeoCoordinates",
      "latitude": 39.9928,
      "longitude": 116.3081
    },
    "url": "https://restaurant.example.com",
    "telephone": "+86-10-1234-5678",
    "openingHoursSpecification": [
      {
        "@type": "OpeningHoursSpecification",
        "dayOfWeek": [
          "Monday",
          "Tuesday",
          "Wednesday",
          "Thursday",
          "Friday"
        ],
        "opens": "11:00",
        "closes": "22:00"
      },
      {
        "@type": "OpeningHoursSpecification",
        "dayOfWeek": [
          "Saturday",
          "Sunday"
        ],
        "opens": "10:00",
        "closes": "23:00"
      }
    ],
    "aggregateRating": {
      "@type": "AggregateRating",
      "ratingValue": "4.5",
      "reviewCount": "120"
    },
    "servesCuisine": ["川菜", "粤菜", "家常菜"],
    "acceptsReservations": "True",
    "menu": "https://restaurant.example.com/menu",
    "priceRange": "¥¥"
  }
  </script>
</head>
<body>
  <div itemscope itemtype="http://schema.org/Restaurant">
    <h1 itemprop="name">美味餐厅</h1>
    
    <div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
      地址: <span itemprop="streetAddress">北京市海淀区中关村大街1号</span>,
      <span itemprop="addressLocality">北京</span>
    </div>
    
    <div>
      电话: <span itemprop="telephone">+86-10-1234-5678</span>
    </div>
    
    <div>
      菜系: <span itemprop="servesCuisine">川菜, 粤菜, 家常菜</span>
    </div>
    
    <div itemprop="openingHoursSpecification" itemscope itemtype="http://schema.org/OpeningHoursSpecification">
      营业时间: 
      周一至周五: <time itemprop="opens">11:00</time> - <time itemprop="closes">22:00</time>,
      周六日: <time itemprop="opens">10:00</time> - <time itemprop="closes">23:00</time>
    </div>
    
    <div itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
      评分: <span itemprop="ratingValue">4.5</span>/5.0
      (<span itemprop="reviewCount">120</span> 条评价)
    </div>
  </div>
</body>
</html>

验证工具

结构化数据测试

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>结构化数据验证示例</title>
  
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "Course",
    "name": "前端开发基础课程",
    "description": "学习HTML、CSS和JavaScript基础知识",
    "provider": {
      "@type": "Organization",
      "name": "在线教育平台",
      "sameAs": "https://education.example.com"
    }
  }
  </script>
</head>
<body>
  <h1>前端开发基础课程</h1>
  <p>学习HTML、CSS和JavaScript基础知识</p>
</body>
</html>

最佳实践

1. 选择合适的方法

html
<!-- 推荐：使用JSON-LD（最兼容） -->
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "文章标题",
  "author": {
    "@type": "Person",
    "name": "作者姓名"
  }
}
</script>

<!-- 备选：使用微数据 -->
<div itemscope itemtype="https://schema.org/Article">
  <h1 itemprop="headline">文章标题</h1>
  <div itemprop="author" itemscope itemtype="https://schema.org/Person">
    <span itemprop="name">作者姓名</span>
  </div>
</div>

2. 数据准确性

html
<!-- 确保数据准确且最新 -->
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "LocalBusiness",
  "name": "公司名称",
  "address": {
    "@type": "PostalAddress",
    "streetAddress": "准确的街道地址",  // 确保地址准确
    "addressLocality": "城市",
    "postalCode": "邮编",
    "addressCountry": "CN"
  },
  "telephone": "+86-准确的电话号码",  // 确保电话号码格式正确
  "openingHours": "Mo-Fr 09:00-18:00",  // 确保营业时间准确
  "priceRange": "¥¥"  // 使用合适的价格范围符号
}
</script>

微数据和结构化数据是提升网站SEO和可发现性的重要技术。通过正确使用这些技术，可以让搜索引擎和其他工具更好地理解网页内容，从而提升网站的可见性。