只需三行元数据即可覆盖95%基础需求：<meta charset="UTF-8">须置于<head>最开头防乱码；<meta name="viewport">需在CSS前确保正确渲染；<meta name="description">须服务端静态输出且每页独立、120–155字符。

只写这三行，就能覆盖 95% 场景下的基础元数据需求：<meta charset="UTF-8">、<meta name="viewport" content="width=device-width, initial-scale=1">、<meta name="description" content="...">。其余标签不是无效，就是容易写错位置、填空、或触发搜索引擎降权。

charset 必须是 head 中第一个标签

浏览器解析 HTML 时，一旦遇到非 UTF-8 字符但还没看到 <meta charset="UTF-8">，就可能触发文档重载或乱码——尤其在含中文、emoji 或特殊符号的页面上。

常见错误现象：

• 页面开头有 <title> 或 <link> 在 <meta charset> 前面
• 用了旧式写法 <meta http-equiv="content-type" content="text/html; charset=UTF-8">（HTML5 不推荐）
• 写了 charset="utf8"（少了个横线，应为 UTF-8）

正确做法：

立即学习“前端免费学习笔记（深入）”；

• <meta charset="UTF-8"> 放在 <head> 最开头，紧贴 <head> 标签后（允许在 <title> 前，但不能在其后）
• 不加 http-equiv，不写 content，只用 charset 属性

viewport 要放在所有 CSS 加载前

移动端缩放失效、字体忽大忽小、布局错位，八成是因为 <meta name="viewport"> 写晚了。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

原因很简单：浏览器在解析到第一个 CSS 文件时，就会尝试计算视口宽度；如果此时还没读到 viewport 设置，它会按默认（通常是 980px 宽）渲染，等 meta 解析完再重排，造成闪动或错位。

实操建议：

• <meta name="viewport" content="width=device-width, initial-scale=1"> 必须出现在任何 <link rel="stylesheet"> 或 <style> 标签之前
• 避免写死 width=375 或 maximum-scale=1.0——前者适配窄屏但崩宽屏，后者禁手势缩放，影响可访问性
• Next.js、Remix 等框架会自动注入 viewport，手动再写可能导致冲突，检查源码是否已存在

description 影响摘要显示，但必须静态存在于首屏 HTML 中

Google 不抓取 JS 渲染后的内容来生成摘要，description 必须硬编码在服务端返回的 HTML 里，且长度控制在 120–155 字符之间（Chrome 实际截断约 155 字符，含空格）。

容易踩的坑：

• 用 JS 动态设置 document.querySelector('meta[name="description"]').setAttribute('content', ...) → 搜索引擎完全无视
• 内容与页面正文无关，比如全站复用同一段 description → Google 可能直接弃用，改用自己抽的文本
• 超过 160 字，被截断后语义断裂（如“提供 HTML meta 标签详解、SEO 优化技巧、移动端适配方案、Open Graph 协议……” → 截成“提供 HTML meta 标签详解、SEO 优化技巧、移动端适配方案、Open Graph 协议…”）

建议写法：

• 每页独立写，紧扣当前页核心信息，开头带主关键词
• 避免营销话术（“最全”“独家”“免费下载”），用陈述句说明“这是什么”
• CMS 或 SSR 模板中，从页面数据字段（如 page.seo.description）直接插值，不走 JS 注入

真正难的不是写多少 meta 标签，而是确保这三行的位置、格式、内容都落在搜索引擎和浏览器的解析规则边界内——错一个字符、偏一个顺序，就可能让整页 SEO 和移动端体验打折扣。