<meta charset="UTF-8">和<meta name="viewport">必须置于<head>最前面，否则易致乱码、怪异模式或iOS缩放异常；二者须在所有其他<meta>、<title>、<link>之前，以保障正确解析与渲染。
HTML <head> 必须精简、有序、位置精准——它不渲染，但决定页面能否正确加载、被索引、被分享。
charset 和 viewport 必须放在 <head> 最前面
浏览器解析 HTML 是流式的，<meta charset="UTF-8"> 如果不在 <head> 开头（最好紧接 <html> 之后），可能导致早期文本乱码或触发怪异模式；<meta name="viewport"> 晚于 CSS 或 JS 加载，会引发 iOS Safari 页面缩放异常、CLS 值飙升。
-
<meta charset="UTF-8">是唯一推荐的字符编码，GB2312 / GBK 已不被现代浏览器默认支持 -
content="width=device-width, initial-scale=1.0"是移动适配底线，加maximum-scale=1或user-scalable=no会损害可访问性，不建议 - 这两个标签必须在所有其他
<meta>、<title>、<link>之前，否则部分浏览器会重排解析流程
title 和 description 要按场景动态生成
静态写死的 <title> 和 <meta name="description"> 在 SPA 或 SSR 场景下极易失效：搜索引擎抓取首屏时拿不到真实内容，社交平台分享也常 fallback 到默认值。
-
<title>长度建议控制在 50–60 字符内，过长会被截断；避免堆砌关键词，优先体现页面核心意图（如“订单确认 | XX 商城”） -
description内容应独立于<title>，长度严格卡在 155–160 字符，Chrome 124+ 已不再提取未声明的摘要 - Next.js 用
useHead、Nuxt 用useSeoMeta、Vue 用vue-meta等方案动态注入，比服务端拼接更可靠
CSS 和 JS 的加载时机与属性选择直接影响 LCP 和 FOUC
把 <link rel="stylesheet"> 放在 <head> 是为了阻塞渲染、确保样式就绪；但把 <script> 放进来却极容易拖慢首屏——除非你明确需要它参与 DOM 构建。
立即学习“前端免费学习笔记（深入）”；
- CSS 文件必须用
<link rel="stylesheet">，禁用@import（后者会阻塞并串行加载） - 关键 CSS 可以内联为
<style>，非关键 CSS 加media="print" onload="this.media='all'"实现懒加载 - JS 若必须在
<head>中引入，defer（保证执行顺序）比async（无序执行）更安全；type="module"自带defer行为
canonical、og: 和 robots meta 必须匹配当前 URL 状态
这些标签不是“写了就有用”，一旦值和实际页面语义冲突，反而会误导搜索引擎或社交平台抓取器。比如分页列表页写了 rel="canonical" 指向第一页，等于主动放弃后续页的索引权。
-
<link rel="canonical" href="...">应指向该内容的规范 URL，不含 query 参数（如?ref=utm_source）、不含分页参数（如?page=2） -
og:image推荐尺寸 1200×630 px，格式优先选.png或.jpg；WebP 和 SVG 在微信等平台可能无法预览 -
<meta name="robots" content="noindex, nofollow">仅用于测试环境（如staging.example.com），生产环境误加会导致全站消失于搜索结果
最易被忽略的是：所有这些标签的顺序、位置、值是否随路由/状态实时更新。一个没刷新的 og:url 或错位的 charset，可能让整页 SEO 功亏一篑。
