Meta 标签常用属性
HTML Meta 标签的 Viewport、Charset、Keywords、Description 等属性用法
问题
HTML 中 Meta 标签有哪些常用属性？分别有什么作用？
解答
Meta 标签用于定义页面的元数据，放在 <head> 中，不会显示在页面上，但对 SEO 和浏览器行为有重要影响。
Charset - 字符编码
<!-- 声明文档使用 UTF-8 编码，必须放在 head 最前面 -->
<meta charset="UTF-8">Viewport - 视口设置
<!-- 移动端适配必备 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 完整配置 -->
<meta name="viewport" content="
width=device-width, /* 视口宽度等于设备宽度 */
initial-scale=1.0, /* 初始缩放比例 */
maximum-scale=1.0, /* 最大缩放比例 */
minimum-scale=1.0, /* 最小缩放比例 */
user-scalable=no /* 禁止用户缩放 */
">Description - 页面描述
<!-- 搜索引擎结果中显示的描述文字 -->
<meta name="description" content="这是一个前端技术博客，分享 JavaScript、CSS、React 等技术文章">Keywords - 关键词
<!-- SEO 关键词，现代搜索引擎已不太重视 -->
<meta name="keywords" content="前端,JavaScript,CSS,React,Vue">其他常用属性
<!-- 作者信息 -->
<meta name="author" content="张三">
<!-- 搜索引擎爬虫控制 -->
<meta name="robots" content="index,follow"> <!-- 允许索引和跟踪链接 -->
<meta name="robots" content="noindex,nofollow"> <!-- 禁止索引和跟踪 -->
<!-- HTTP 等效头 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- IE 兼容模式 -->
<meta http-equiv="refresh" content="5;url=https://example.com"> <!-- 5秒后跳转 -->
<meta http-equiv="Cache-Control" content="no-cache"> <!-- 缓存控制 -->
<!-- 主题色（移动端浏览器地址栏颜色） -->
<meta name="theme-color" content="#4285f4">
<!-- 禁止电话号码自动识别 -->
<meta name="format-detection" content="telephone=no">完整示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<!-- 字符编码，必须放最前面 -->
<meta charset="UTF-8">
<!-- IE 兼容 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 移动端视口 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- SEO 相关 -->
<meta name="description" content="页面描述，建议 150 字以内">
<meta name="keywords" content="关键词1,关键词2">
<meta name="author" content="作者名">
<meta name="robots" content="index,follow">
<!-- 移动端优化 -->
<meta name="theme-color" content="#ffffff">
<meta name="format-detection" content="telephone=no,email=no">
<title>页面标题</title>
</head>
<body>
<!-- 页面内容 -->
</body>
</html>关键点
charset="UTF-8"必须放在 head 最前面，避免乱码viewport是移动端适配的基础，width=device-width让页面宽度等于设备宽度description影响搜索结果展示，建议 150 字以内keywords对现代 SEO 作用有限，但仍建议填写http-equiv可以模拟 HTTP 响应头的行为
目录