概念笔记：HTML 元数据 (Metadata)
HTML 中的元数据（Metadata）是指关于文档本身的信息，而不是页面显示给用户的内容。这些信息主要放在 <head> 元素内部，主要作用是：
- 告诉浏览器如何正确解析和渲染页面
- 帮助搜索引擎理解页面内容（SEO）
- 控制页面在社交媒体分享时的显示效果（Open Graph、Twitter Cards）
- 提供移动端适配、字符编码、刷新/重定向等指令
- 关联外部资源（CSS、图标、脚本等）
元数据不会直接显示在页面上，但对用户体验、SEO、性能和分享效果有重要影响。
1. 元数据的主要承载元素（都在 <head> 内）
| 元素 | 作用 | 是否必须 | 备注 |
|---|---|---|---|
<title> | 页面标题（浏览器标签、搜索结果标题） | 必须 | 唯一必须的 head 子元素 |
<meta> | 各种元数据（最重要、最灵活） | 常见 | 通过 name、property、http-equiv、charset 等属性定义 |
<link> | 关联外部资源（CSS、图标、预加载等） | 常见 | rel=”stylesheet”、”icon”、”canonical” 等 |
<base> | 定义页面所有相对 URL 的基准地址 | 很少用 | 慎用，会影响所有相对链接 |
<style> | 内联 CSS | 视情况 | 通常建议外联 |
<script> | 内联或外联 JavaScript | 视情况 | defer/async 属性很重要 |
2. 最核心的 <meta> 标签用法（必知）
<meta> 有几种主要模式：
2.1 字符编码（几乎每个页面都必须写在最前面）
<meta charset="UTF-8">
<!-- 推荐写法：HTML5 标准，放在 <head> 第一行 -->- 作用：告诉浏览器页面使用 UTF-8 编码，避免乱码
- 必须尽早声明（最好是 head 第一个元素）
2.2 视口设置（移动端适配，必备）
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 推荐写法 -->常用扩展写法（响应式网站）：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">2.3 SEO 相关（搜索引擎最看重的几个）
<!-- 页面描述（搜索结果下方的文字） -->
<meta name="description" content="这是一个关于前端开发的优质技术博客，提供 HTML、CSS、JavaScript 等教程和实战经验。">
<!-- 控制爬虫行为 -->
<meta name="robots" content="index, follow"> <!-- 默认值，可省略 -->
<meta name="robots" content="noindex, nofollow"> <!-- 禁止索引 -->
<meta name="robots" content="noindex, follow"> <!-- 常见于测试页、登录页 -->注意：<meta name="keywords"> 现代已基本无用，谷歌等早已忽略。
2.4 社交媒体分享优化（Open Graph & Twitter Cards）
<!-- Open Graph（Facebook、微信、LinkedIn 等） -->
<meta property="og:title" content="文章标题">
<meta property="og:description" content="简短吸引人的描述">
<meta property="og:image" content="https://example.com/cover.jpg">
<meta property="og:url" content="https://example.com/article/123">
<meta property="og:type" content="article">
<meta property="og:site_name" content="网站名称">
<!-- Twitter Cards（X/Twitter） -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="文章标题">
<meta name="twitter:description" content="描述">
<meta name="twitter:image" content="https://example.com/cover.jpg">最佳实践：
- og:image 建议尺寸：1200×630 px
- twitter:card 常用 summary / summary_large_image
3. 推荐的现代 <head> 模板（2025-2026 最佳实践）
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>页面标题 | 网站名称</title>
<meta name="description" content="150-160 字符以内的吸引人描述，包含核心关键词">
<!-- 搜索引擎控制（根据需要） -->
<meta name="robots" content="index, follow">
<!-- 社交分享 -->
<meta property="og:title" content="...">
<meta property="og:description" content="...">
<meta property="og:image" content="...">
<meta property="og:url" content="...">
<meta name="twitter:card" content="summary_large_image">
<!-- 图标（favicon） -->
<link rel="icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<!-- CSS -->
<link rel="stylesheet" href="styles.css">
<!-- 预加载关键资源（性能优化） -->
<link rel="preload" href="critical.css" as="style">
<link rel="preconnect" href="https://fonts.googleapis.com">
</head>4. 常见误区 & 注意事项
- 不要滥用：
<meta name="keywords">已无实际作用，写太多反而可能被视为垃圾信号 - 描述长度：meta description 建议 120–160 字符（中文约 70–80 个字）
- title 长度：建议 50–60 个字符（中文约 25–30 个字），避免截断
- 优先级：
<title>> meta description > Open Graph（搜索引擎优先用 title 和 description） - 动态生成：SSR / SSG 项目中，建议使用框架（如 Next.js、Nuxt、VitePress）自动管理 head 元数据
- charset 位置：必须放在 head 最前面，否则可能导致前几行解析错误
5. 总结口诀（快速记忆）
- 必须：charset、viewport、title
- SEO 强相关：title、description、robots
- 社交分享：og:title、og:description、og:image、twitter:card
- 性能/兼容：link rel（图标、预加载、preconnect）
- 顺序建议：charset → viewport → title → meta description → Open Graph → link 资源
掌握这些，基本就能写出对 SEO 和用户体验友好的现代 HTML <head> 了。
有具体场景想深入（比如 Next.js 如何管理元数据、如何调试 Open Graph 显示、canonical 标签详解等），可以继续问！
