meta 标签详解

网络技术百科

概览 含义 类型 用法 实践

meta

/ˈmetə/
HTML标签 网页元数据

基本释义：用于提供网页元数据的HTML标签

词源：源自希腊语"μετά"，意为"关于...的"

📚 核心含义

网页元数据

提供关于网页内容的信息，但不直接显示在页面上

Meta tags describe page content.
Meta标签描述页面内容。
网页开发

SEO优化

帮助搜索引擎理解网页内容

Meta description affects search results.
Meta描述影响搜索结果。
搜索引擎

浏览器指令

控制浏览器如何显示页面

Meta viewport sets mobile display.
Meta视口设置移动端显示。
浏览器

"meta"标签是HTML文档头部的重要元素，主要用于提供网页元信息，对SEO和移动适配至关重要。

🔄 用法对比

英文示例

The meta charset defines character encoding.

Meta keywords were important for SEO.

This meta tag prevents indexing.

中文翻译

Meta字符集定义编码方式。

Meta关键词曾对SEO很重要。

这个meta标签阻止索引。

🔍 常见类型

字符集声明
<meta charset="UTF-8">

定义网页字符编码

视口设置
<meta name="viewport" content="width=device-width">

控制移动端显示

其他重要类型：

使用注意

  • charset声明应放在head最前面
  • viewport对移动端至关重要
  • description影响点击率

🎯 实际应用

SEO优化

设置描述和关键词

<meta name="description" content="...">
提供网页摘要
搜索引擎

移动适配

设置视口属性

<meta name="viewport" content="width=device-width">
确保移动端显示
响应式设计

字符编码

声明字符集

<meta charset="UTF-8">
支持多语言
国际化

语法要点

自闭合标签： <meta />
主要属性： name, content, charset

⚠️ 常见错误

避免错误：

忘记声明charset导致乱码

正确：首行声明<meta charset="UTF-8">

移动端未设置viewport

正确：添加viewport meta标签

✍️ 实践练习

代码练习

编写meta标签：

1. 声明UTF-8字符集
2. 设置移动端视口
3. 添加网页描述

1. <meta charset="UTF-8">

2. <meta name="viewport" content="width=device-width">

3. <meta name="description" content="网页描述内容">

功能匹配

匹配meta标签与功能：

• <meta name="robots" content="noindex">
• <meta http-equiv="refresh" content="5">
• <meta name="author" content="...">

• 阻止搜索引擎索引

• 5秒后刷新页面

• 声明网页作者

错误修正

找出并改正错误：

1. <meta description="网页描述">
2. <meta charset="UTF8">
3. <meta viewport="width=device-width">

1. <meta name="description" content="网页描述">

2. <meta charset="UTF-8">

3. <meta name="viewport" content="width=device-width">