HTML元数据标签meta

meta标签定义页面元数据，影响浏览器行为、SEO和社交分享效果。

基本结构

HTML

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="页面描述">
</head>

charset字符编码

标准用法

HTML

<meta charset="UTF-8">

必须放在head最前面
UTF-8支持全球字符
防止乱码问题

charset必须尽早声明，防止浏览器解析出错。

viewport视口设置

基本配置

HTML

<meta name="viewport" content="width=device-width, initial-scale=1.0">

属性说明

属性	说明	常用值
width	视口宽度	device-width
initial-scale	初始缩放	1.0
minimum-scale	最小缩放	1.0
maximum-scale	最大缩放	5.0
user-scalable	允许缩放	no/yes

响应式配置

HTML

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0">

固定宽度（不推荐）

HTML

<meta name="viewport" content="width=1200">

禁止缩放(user-scalable=no)影响可访问性，谨慎使用。

SEO元数据

description页面描述

HTML

<meta name="description" content="这是页面描述，显示在搜索结果中，建议150-160字符。">

搜索引擎显示摘要
影响点击率
建议150-160字符

keywords关键词（已弃用）

HTML

<meta name="keywords" content="HTML, CSS, JavaScript">

Google等主流搜索引擎已不使用keywords，可省略。

author作者

HTML

<meta name="author" content="作者名">

robots爬虫指令

HTML

<meta name="robots" content="index, follow">

值	说明
index	允许索引
noindex	禁止索引
follow	允许跟踪链接
nofollow	禁止跟踪链接
noarchive	禁止缓存

其他SEO配置

HTML

<meta name="googlebot" content="noindex">
<meta name="bingbot" content="index, follow">

社交分享Open Graph

基本配置

HTML

<meta property="og:title" content="页面标题">
<meta property="og:description" content="页面描述">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:url" content="https://example.com/page">
<meta property="og:type" content="article">
<meta property="og:site_name" content="网站名称">

常用OG属性

属性	说明	必填
og:title	分享标题	是
og:description	分享描述	是
og:image	分享图片	是
og:url	页面URL	否
og:type	内容类型	否

内容类型

og:type	适用场景
website	网站首页
article	文章页面
product	产品页面
video	视频页面

图片规格建议

最小尺寸：200×200像素
推荐尺寸：1200×630像素
格式：JPEG、PNG

Twitter Card

基本配置

HTML

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="标题">
<meta name="twitter:description" content="描述">
<meta name="twitter:image" content="图片URL">
<meta name="twitter:site" content="@账号">

Card类型

类型	说明
summary	小图摘要
summary_large_image	大图摘要
player	视频/音频播放器
app	应用下载

浏览器行为控制

IE兼容模式

HTML

<meta http-equiv="X-UA-Compatible" content="IE=edge">

刷新/跳转

HTML

<!-- 5秒后刷新 -->
<meta http-equiv="refresh" content="5">

<!-- 5秒后跳转 -->
<meta http-equiv="refresh" content="5;url=https://example.com">

缓存控制

HTML

<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0">

实际缓存控制应通过服务器HTTP头设置，meta效果有限。

安全相关

HTML

<meta http-equiv="Content-Security-Policy" content="default-src 'self'">

其他常用meta

主题色

HTML

<meta name="theme-color" content="#336699">

移动浏览器地址栏颜色
影响浏览器外观

APP配置

HTML

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="应用名">

格式检测禁用

HTML

<meta name="format-detection" content="telephone=no">
<meta name="format-detection" content="email=no">
<meta name="format-detection" content="address=no">

meta属性分类

类型	属性名	示例
编码	charset	UTF-8
视口	name="viewport"	device-width
SEO	name="description"	页面描述
OG	property="og:*"	社交分享
控制	http-equiv	refresh, CSP

标准head模板

HTML

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="页面描述">
  <meta name="theme-color" content="#336699">

  <!-- Open Graph -->
  <meta property="og:title" content="页面标题">
  <meta property="og:description" content="页面描述">
  <meta property="og:image" content="图片URL">
  <meta property="og:type" content="website">

  <!-- Twitter -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="页面标题">

  <title>页面标题</title>
</head>

要点总结

charset必须最先声明，UTF-8通用
viewport配置响应式布局基础
description影响SEO和点击率
Open Graph控制社交分享展示
theme-color定制移动浏览器外观
http-equiv控制浏览器行为

📝 发现内容有误？点击此处直接编辑