html规范强制要求中必须包含且仅一个，虽非强制但实际必需，是响应式关键；其余如description、canonical、icon等为可选但重要元数据。
网页的元数据不是“可有可无的装饰”，而是浏览器解析、搜索引擎索引、移动端适配和分享行为的底层依据；漏写或错放 <meta charset="UTF-8">、<title></title> 或 <meta name="viewport">，轻则乱码/截断标题，重则被搜索引擎降权或在微信里无法正确预览。
必须放在
HTML 规范强制要求 中至少包含一个 <title></title>，其余都是可选但关键。常见组合如下：
-
<title></title>：唯一必需，且只能有一个；浏览器标签页、搜索结果摘要都依赖它 -
<meta charset="UTF-8">：必须紧贴开始（最好第二行），否则早期字节可能被错误解码，导致首屏乱码 -
<meta name="viewport" content="width=device-width, initial-scale=1.0">：没有它，移动端会以桌面视口渲染，文字小到无法点击 -
<meta name="description" content="...">：影响搜索结果摘要，但不会提升排名；内容需控制在155字符内，超长会被截断 -
<link rel="canonical" href="...">：解决重复内容问题，告诉搜索引擎哪个 URL 是主版本
<meta http-equiv> 和 <meta name> 的区别与误用场景
http-equiv 模拟 HTTP 响应头，浏览器会按真实响应头逻辑处理；name 则是纯语义描述，仅供外部工具（如爬虫、社交平台）读取。二者不能混用：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
-
<meta http-equiv="refresh" content="5; url=/new">会触发跳转，但现代 SEO 已弃用，容易被识别为恶意重定向 -
<meta name="keywords" content="...">对 Google 等主流引擎完全无效，纯属历史遗留；保留只会增加 HTML 体积 -
<meta http-equiv="content-type" content="text/html; charset=UTF-8">是 HTML4 写法，HTML5 必须改用<meta charset="UTF-8">，否则部分解析器可能忽略 -
<meta name="robots" content="noindex, nofollow">有效，但只对支持该协议的爬虫起作用；noindex不等于屏蔽访问，页面仍可被直接打开
<link> 承担的元数据职责常被低估
<link> 不只是引入 CSS，很多关键元数据靠它实现：
-
<link rel="icon" href="/favicon.ico">：浏览器标签页图标，路径必须可访问，404 会导致控制台报错并阻塞部分资源加载 -
<link rel="preload" as="font" href="font.woff2">：提前加载字体，避免 FOUT/FOIT；但as值必须准确，写成as="style"会导致字体不加载 -
<link rel="alternate" type="application/rss+xml" title="RSS" href="/feed.xml">：暴露 RSS 订阅地址，部分阅读器自动发现 -
<link rel="manifest" href="/site.webmanifest">：PWA 入口，缺失则无法添加到主屏幕
容易被忽略的兼容性细节
元数据看似简单，但跨浏览器/跨平台表现差异大：
-
<meta name="apple-mobile-web-app-title">只在 iOS Safari 添加到主屏幕时生效，Android Chrome 完全无视 -
<meta property="og:title">（Open Graph）决定微信、微博等分享卡片标题，但若没配<meta property="og:url">，分享链接可能指向当前页面而非目标 URL -
<base href="/base/">会影响所有相对路径（包括<script src="a.js"></script>和window.location.href），调试时容易误判资源 404 原因 - 多个
<title></title>标签存在时，浏览器只取第一个，后续会被静默丢弃——服务端模板拼接出错时很难察觉
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
