SEO 与结构化数据

约 731 字大约 2 分钟

布欧-Lewyon

2026-05-16

搜索引擎优化（SEO）很大程度取决于 HTML 的正确使用——搜索引擎"读"不懂渲染效果，但它能解析你的标签。

基础 SEO 标签

`<title>` 标题标签

<title>HTML5 教程 - 从入门到精通 | 我的站点</title>

最佳实践：

唯一性：每页不同 title
包含关键词：核心在前
长度：50-60 字符

`<meta name="description">` 描述

<meta name="description" content="从零开始学习 HTML5，涵盖语义化标签、多媒体、Canvas、表单等全部核心知识点。适合前端初学者和进阶开发者。">

长度：120-158 字符
包含核心关键词
吸引点击，但不要夸大

`<meta name="robots">` 索引控制

<!-- 允许索引和追踪链接 -->
<meta name="robots" content="index, follow">

<!-- 禁止索引 -->
<meta name="robots" content="noindex">

<!-- 不追踪链接 -->
<meta name="robots" content="nofollow">

<!-- 禁止索引且不追踪 -->
<meta name="robots" content="noindex, nofollow">

规范 URL `<link rel="canonical">`

<link rel="canonical" href="https://example.com/html-tutorial">

告诉搜索引擎：当多个 URL 有相同内容时，以哪个为准。

Open Graph（社交媒体）

让链接在社交媒体分享时显示标题、描述和图片：

<meta property="og:title" content="HTML5 教程 - 从入门到精通">
<meta property="og:description" content="全面学习 HTML5 教程">
<meta property="og:image" content="https://example.com/og-image.jpg">
<meta property="og:url" content="https://example.com/html-tutorial">
<meta property="og:type" content="article">
<meta property="og:site_name" content="我的站点">

<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="HTML5 教程">
<meta name="twitter:image" content="https://example.com/og-image.jpg">

结构化数据（JSON-LD）

结构化数据帮助搜索引擎理解页面内容的含义，在搜索结果中显示富文本摘要（评分、价格、事件时间等）。

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "HTML5 语义化指南",
  "description": "全面了解 HTML5 语义化标签的用法",
  "author": {
    "@type": "Person",
    "name": "张三"
  },
  "datePublished": "2026-05-16",
  "image": "https://example.com/article-cover.jpg"
}
</script>

常见结构化数据类型

<!-- 产品 -->
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Product",
  "name": "机械键盘",
  "description": "87键机械键盘茶轴",
  "offers": {
    "@type": "Offer",
    "price": "399.00",
    "priceCurrency": "CNY",
    "availability": "https://schema.org/InStock"
  }
}
</script>

<!-- 面包屑导航 -->
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    { "@type": "ListItem", "position": 1, "name": "首页", "item": "https://example.com" },
    { "@type": "ListItem", "position": 2, "name": "教程", "item": "https://example.com/tutorial" },
    { "@type": "ListItem", "position": 3, "name": "HTML5" }
  ]
}
</script>

使用 `<meta itemprop>` 微数据

<div itemscope itemtype="https://schema.org/Product">
  <h1 itemprop="name">机械键盘</h1>
  <p itemprop="description">87键机械键盘茶轴</p>
  <span itemprop="offers" itemscope itemtype="https://schema.org/Offer">
    <meta itemprop="price" content="399.00">
    <meta itemprop="priceCurrency" content="CNY">
    <span>¥399</span>
  </span>
</div>

小结

SEO 要点	HTML 实现
页面标题	`<title>`
页面描述	`<meta name="description">`
索引控制	`<meta name="robots">`
规范 URL	`<link rel="canonical">`
社交媒体卡片	Open Graph + Twitter Card
结构化数据	JSON-LD `<script type="application/ld+json">`
语义化标签	`<article>` `<main>` `<nav>` 等

上一节：文本级语义与交互元素下一节：Canvas 基础与绘图