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 响应头的行为