元数据与 SEO

网页 <head> 里那些"看不见"的信息，叫元数据（metadata），对搜索引擎收录至关重要。

核心 meta 标签

<head>
  <meta charset="UTF-8">   <!-- 编码，中文必备 -->
  <meta name="viewport" content="width=device-width, initial-scale=1">  <!-- 移动端适配 -->
  <title>页面标题</title>  <!-- 浏览器标签栏标题 -->
  <meta name="description" content="页面描述，显示在搜索结果里">  <!-- 描述 -->
  <meta name="keywords" content="关键词1,关键词2">  <!-- 关键词（权重低） -->
  <meta name="author" content="作者名">
</head>

各标签作用

标签	作用	重要性
<title>	搜索结果标题，最重要的 SEO 元素	★★★
description	搜索结果下方的描述	★★★
charset	声明编码，中文不乱码	★★★
viewport	移动端显示优化	★★★
keywords	关键词提示	★（权重已很低）

结构化数据

给搜索引擎额外"信息卡"，让结果展示更丰富：

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "文章标题",
  "description": "文章简介"
}
</script>

让搜索引擎更快收录

1. 每页一个 <title> 和一个 <h1>，内容对应
2. 写好 description（150 字内）
3. 生成 sitemap.xml 并提交到 Google / 百度站长平台
4. 图片写 alt 属性
5. 内容持续更新，页面之间互相内链

完整 head 示例

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>我的教程 - 学习 HTML</title>
  <meta name="description" content="从零开始学 HTML，纯静态教程站。">
  <link rel="icon" href="/favicon.ico">
</head>

建议

如果你用 VitePress 这类静态框架，sitemap 和结构化数据通常能自动生成，省很多事。