HTML5 结构化数据简明指南
HTML5 提供了多种方式来结构化网页内容，使内容对浏览器和搜索引擎更加友好。以下是主要的 HTML5 结构化元素和用法：
1. 文档结构元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>页面标题</title>
</head>
<body>
<header>页眉内容</header>
<nav>导航链接</nav>
<main>主要内容区域</main>
<article>独立的内容块</article>
<section>文档中的节</section>
<aside>侧边栏内容</aside>
<footer>页脚内容</footer>
</body>
</html>
2. 语义化文本元素
- <mark> - 突出显示文本
- <time> - 表示时间/日期
- <figure> 和 <figcaption> - 带标题的图片/图表
- <details> 和 <summary> - 可折叠内容
3. 微数据 (Microdata)
<div itemscope itemtype="http://schema.org/Person">
<h1 itemprop="name">张三</h1>
<p>职位: <span itemprop="jobTitle">前端开发</span></p>
<p>电话: <span itemprop="telephone">123-456-7890</span></p>
</div>
4. JSON-LD (推荐方式)
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "Person",
"name": "张三",
"jobTitle": "前端开发",
"telephone": "123-456-7890"
}
</script>
5. 常见结构化数据类型
- 文章(Article)
- 面包屑导航(Breadcrumb)
- 企业/组织(Organization)
- 产品(Product)
- 评价(Review)
- 事件(Event)
- 食谱(Recipe)
最佳实践
1. 优先使用 JSON-LD 格式
2. 确保数据准确反映页面内容
3. 使用 Google 结构化数据测试工具验证
4. 不要为了 SEO 而添加虚假数据
5. 保持结构化数据与可见内容一致
结构化数据可以帮助搜索引擎更好地理解你的内容，并可能在搜索结果中显示为富媒体片段(rich snippets)，提高点击率。