一套轻量、兼容主流浏览器的HTML <head> 模板，涵盖语义化、性能、安全与响应式适配，支持SEO、社交分享、PWA及移动端优化，可直接嵌入或动态生成。
要让 Web 应用在桌面、平板、手机等多端设备上表现一致且符合现代标准，head 配置必须兼顾语义化、性能、安全与响应式适配。以下是一套经过验证、轻量且兼容主流浏览器（包括 iOS Safari、Android Chrome、Edge、Firefox）的 HTML <head> 模板，适用于 Vue/React 单页应用或静态站点。
基础元信息与字符编码
确保文档解析正确、语言明确、避免乱码和歧义：
-
<meta charset="UTF-8">—— 必须放在<head>最开头，防止早期解析错误 -
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes">—— 支持缩放但限制最大倍率，兼顾可读性与无障碍操作 -
<meta http-equiv="X-UA-Compatible" content="IE=edge">—— 对仍需支持旧版 IE 的场景有效（多数项目可省略） -
<html lang="zh-CN">（或对应语言）—— 配合<meta name="language" content="zh">提升 SEO 与屏幕阅读器识别
SEO 与社交平台分享优化
让页面在搜索引擎和微信、微博、Telegram 等平台中正确展示标题、描述和缩略图：
-
<title>页面主标题</title>—— 控制在 30 字以内，含核心关键词 <meta name="description" content="简明准确的页面摘要，60–120 字为宜"><meta property="og:title" content="同 title 或更适配社交场景的标题"><meta property="og:description" content="同 description 或稍作口语化调整">-
<meta property="og:image" content="https://example.com/og-image.jpg">—— 推荐尺寸 1200×630px，格式为 JPG/PNG，路径需绝对 URL -
<meta property="og:url" content="https://example.com/current-path">—— 确保 canonical 一致性
资源加载与安全策略
提升首屏速度、防止 XSS、明确资源加载行为：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
-
<link rel="preconnect" href="https://fonts.googleapis.com">—— 提前建立第三方字体服务连接 -
<link rel="preload" as="font" type="font/woff2" crossorigin href="/fonts/inter-var.woff2">—— 预加载关键字体，避免 FOIT -
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src 'self' https: data:; script-src 'self' 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline'">—— 根据实际需求收紧策略，开发期可放宽，上线前务必审计 -
<link rel="canonical" href="https://example.com/path">—— 防止重复内容被误判，尤其对 SSR 或动态路由有效
移动端与 PWA 基础支持
让 Web 应用具备类原生体验，支持添加到主屏幕、离线访问：
-
<meta name="apple-mobile-web-app-capable" content="yes">—— 启用 iOS 全屏模式 -
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">—— 适配刘海屏状态栏样式 -
<link rel="apple-touch-icon" href="/icons/icon-192x192.png">—— 提供至少 180×180px 图标（iOS 最小要求） -
<link rel="manifest" href="/manifest.webmanifest">—— PWA 必备，包含 name、short_name、icons、start_url、display 等字段 -
<meta name="theme-color" content="#4f46e5">—— 定义地址栏/任务栏主题色，推荐使用 CSS 变量同步值
这套配置不依赖框架特定逻辑，可直接嵌入任何 HTML 入口文件（如 index.html），也适合通过构建工具（Vite、Webpack）注入变量动态生成。关键是根据项目实际删减非必要项，比如纯内部系统可移除 Open Graph 标签，无 PWA 需求则去掉 manifest 和 theme-color。
