页面标题和元信息必须置于中,包括唯一(50–60字符)、(置于最前)、description(50–150字)、viewport(width=device-width, initial-scale=1.0)等,以确保正确识别、搜索展示与移动端适配。

页面标题和元信息都得放在 里,不写在这儿浏览器和搜索引擎就看不到——它们不显示在页面上,但决定了页面怎么被识别、怎么被搜索、在手机上怎么缩放。
设置页面标题(title)
这是最基础也最关键的标签,浏览器标签页上显示的名称、搜索结果里的主标题,都靠它。
- 必须且只能有一个
<title></title>,写在内部 - 内容建议控制在 50–60 个字符以内,太长会被截断
- 别堆砌关键词,要准确反映当前页面核心内容,比如“用户登录 - XX官网”比“登录 网站 免费 注册”更有效
声明字符编码(charset)
防止中文乱码的底线配置,几乎所有现代网页都用 UTF-8。
- 写法:
<meta charset="UTF-8"> - 必须放在
最前面(最好紧挨着开始),否则可能触发浏览器重解析 - 不用再写
http-equiv="Content-Type"这种老式写法,charset属性更简洁可靠
添加描述与基础元信息
描述(description)直接影响搜索结果中的摘要展示;作者、渲染模式等属于补充信息,按需使用。
- 描述标签:
<meta name="description" content="简明概括本页内容,50–150字为宜"> - 关键词(keywords)已基本被主流搜索引擎忽略,可不写;若内部系统有依赖,才保留
- 作者信息:
<meta name="author" content="张三">,适合团队协作或内容溯源 - 强制双核浏览器用 WebKit 渲染:
<meta name="renderer" content="webkit">(国内部分浏览器需要)
适配移动端的视口(viewport)
没有它,网页在手机上会默认按桌面宽度渲染,导致文字小、需手动缩放。
- 标准写法:
<meta name="viewport" content="width=device-width, initial-scale=1.0"> - 如需禁用用户缩放,可加
user-scalable=no,但影响可访问性,一般不推荐 - 不要写成
width=1200这类固定值,设备宽度(device-width)才是响应式的前提
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!











