HTML元tag - 极客tutorial网

1. HTML元tagoverview

HTML元tag is 放置 in <head>部分特殊tag, 用于providing关于HTMLdocumentation 元datainformation. 元data不会显示 in 页面 on , 但 for 于浏览器, 搜index擎 and otherWebservice非常 important .

1.1 元tag basicstructure

元tag basicstructureusing<meta>tag来定义:

<meta name="property名" content="property值">

1.2 元tag important 性

SEOoptimization: helping搜index擎understanding页面 in 容, improving搜索排名
社交媒体分享: 控制页面 in 社交媒体 on 显示方式
视口设置: 确保页面 in 不同设备 on 正确显示
字符集声明: 确保页面正确显示各种字符
页面describes: for user and 搜index擎providing页面概要

2. 常用元tag

2.1 Basics元tag

元tag	describes	example
字符集声明	指定页面using 字符编码	`<meta charset="UTF-8">`
视口设置	控制页面 in move设备 on 显示	`<meta name="viewport" content="width=device-width, initial-scale=1.0">`
页面describes	providing页面简 short describes	`<meta name="description" content="HTML元tagtutorial">`
关键词	指定页面关键词	`<meta name="keywords" content="HTML,元tag,SEO">`
作者	指定页面作者	`<meta name="author" content="极客tutorial网">`
机器人指令	告诉搜index擎such as何index页面	`<meta name="robots" content="index, follow">`

2.2 SEO相关元tag

<!-- 页面describes -->
<meta name="description" content="详细介绍HTML元tag usingmethod and best practices">

<!-- 关键词 -->
<meta name="keywords" content="HTML元tag,SEO,社交媒体元tag,视口设置">

<!-- 机器人指令 -->
<meta name="robots" content="index, follow">

<!-- 页面主题 -->
<meta name="subject" content="HTMLprogrammingtutorial">

<!-- 版权information -->
<meta name="copyright" content="极客tutorial网">

<!-- 页面classification -->
<meta name="topic" content="WebDevelopment">

<!-- 页面摘要 -->
<meta name="summary" content="HTML元tagtutorial, package含SEO, 社交媒体 and response式design相关tag">

<!-- language -->
<meta name="language" content="zh-CN">

<!-- release日期 -->
<meta name="date" content="2026-01-06" scheme="YYYY-MM-DD">

<!-- 修订日期 -->
<meta name="revised" content="极客tutorial网, 2026-01-06">

<!-- cache控制 -->
<meta http-equiv="cache-control" content="no-cache">

2.3 社交媒体元tag

2.3.1 Open Graph tag (Facebook, LinkedInetc.)

<!-- Open Graph basictag -->
<meta property="og:title" content="HTML元tagtutorial">
<meta property="og:type" content="article">
<meta property="og:url" content="https://example.com/html_meta_tags.html">
<meta property="og:image" content="https://example.com/images/html_meta_tags.jpg">
<meta property="og:description" content="详细介绍HTML元tag usingmethod and best practices">
<meta property="og:site_name" content="极客tutorial网">
<meta property="og:locale" content="zh_CN">

<!-- Open Graph 文章tag -->
<meta property="article:author" content="https://example.com/author">
<meta property="article:publisher" content="https://example.com">
<meta property="article:published_time" content="2026-01-06T08:00:00+00:00">
<meta property="article:modified_time" content="2026-01-06T12:00:00+00:00">
<meta property="article:section" content="WebDevelopment">
<meta property="article:tag" content="HTML">
<meta property="article:tag" content="元tag">
<meta property="article:tag" content="SEO">

2.3.2 Twitter 卡片tag

<!-- Twitter 卡片tag -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@geektutorial">
<meta name="twitter:creator" content="@geektutorial">
<meta name="twitter:title" content="HTML元tagtutorial">
<meta name="twitter:description" content="详细介绍HTML元tag usingmethod and best practices">
<meta name="twitter:image" content="https://example.com/images/html_meta_tags.jpg">
<meta name="twitter:image:alt" content="HTML元tagtutorial封面graph">

2.4 move设备相关元tag

<!-- 视口设置 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

<!-- iOS 设备设置 -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="apple-mobile-web-app-title" content="HTML元tagtutorial">

<!-- iOS 启动屏幕 -->
<link rel="apple-touch-startup-image" href="https://example.com/images/startup.png">

<!-- iOS graph标 -->
<link rel="apple-touch-icon" href="https://example.com/images/apple-touch-icon.png">
<link rel="apple-touch-icon" sizes="76x76" href="https://example.com/images/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="120x120" href="https://example.com/images/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="152x152" href="https://example.com/images/apple-touch-icon-152x152.png">

<!-- Windows 8 磁贴 -->
<meta name="msapplication-TileImage" content="https://example.com/images/tile-image.png">
<meta name="msapplication-TileColor" content="#4285F4">

2.5 otherPractical元tag

<!-- 页面重定向 -->
<meta http-equiv="refresh" content="5; url=https://example.com/new-page.html">

<!--  in 容class型 -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

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

<!-- 主题颜色 -->
<meta name="theme-color" content="#4285F4">

<!-- 苹果智能application栏 -->
<meta name="apple-itunes-app" content="app-id=123456789">

<!-- 禁止翻译 -->
<meta name="google" content="notranslate">

<!-- PWA 相关 -->
<link rel="manifest" href="manifest.json">
<meta name="theme-color" content="#4285F4">

<!-- 预加载resource -->
<link rel="preload" href="style.css" as="style">
<link rel="preload" href="script.js" as="script">

<!-- 预连接 -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

实践case: creation一个完整 HTML头部

creation一个package含所 has 必要元tag 完整HTML头部, includingBasics元tag, SEO元tag, 社交媒体元tag and move设备相关元tag.

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <!-- Basics元tag -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML元tag实践case</title>
    
    <!-- SEO元tag -->
    <meta name="description" content="这 is a HTML元tag 实践case, package含完整 头部设置">
    <meta name="keywords" content="HTML,元tag,SEO,实践case">
    <meta name="author" content="极客tutorial网">
    <meta name="robots" content="index, follow">
    <meta name="language" content="zh-CN">
    
    <!-- 社交媒体元tag - Open Graph -->
    <meta property="og:title" content="HTML元tag实践case">
    <meta property="og:type" content="article">
    <meta property="og:url" content="https://example.com/html-meta-tags-example.html">
    <meta property="og:image" content="https://example.com/images/meta-tags-example.jpg">
    <meta property="og:description" content="这 is a HTML元tag 实践case, package含完整 头部设置">
    <meta property="og:site_name" content="极客tutorial网">
    <meta property="og:locale" content="zh_CN">
    
    <!-- 社交媒体元tag - Twitter -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:site" content="@geektutorial">
    <meta name="twitter:creator" content="@geektutorial">
    <meta name="twitter:title" content="HTML元tag实践case">
    <meta name="twitter:description" content="这 is a HTML元tag 实践case, package含完整 头部设置">
    <meta name="twitter:image" content="https://example.com/images/meta-tags-example.jpg">
    
    <!-- move设备相关元tag -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="apple-mobile-web-app-title" content="元tagexample">
    
    <!-- graph标 -->
    <link rel="icon" href="https://example.com/favicon.ico" type="image/x-icon">
    <link rel="apple-touch-icon" href="https://example.com/apple-touch-icon.png">
    
    <!-- 主题颜色 -->
    <meta name="theme-color" content="#4285F4">
    
    <!-- 样式 and 脚本 -->
    <link rel="stylesheet" href="style.css">
    <script src="script.js" defer></script>
</head>
<body>
    <!-- 页面 in 容 -->
</body>
</html>

3. 元tagbest practices

3.1 SEO元tagbest practices

页面describes: 保持 in 150-160个字符之间, package含目标关键词, 简洁明了
关键词: 选择相关关键词, 避免关键词堆砌
标题tag: 保持 in 60个字符以 in , package含主要关键词
机器人指令: 根据页面class型设置合适指令
规范URL: using<link rel="canonical">tag避免重复 in 容

3.2 社交媒体元tagbest practices

graph片尺寸: Open Graphgraph片建议尺寸 for 1200x630像素
graph片格式: usingJPG or PNG格式, big small 不超过5MB
标题 long 度: Open Graph标题建议不超过40个字符
describes long 度: Open Graphdescribes建议不超过200个字符
一致 in 容: 确保社交媒体tag and 页面 in 容一致

3.3 move设备元tagbest practices

视口设置: using标准视口设置, 确保response式design
user缩放: 通常允许user缩放, 除非 has 特殊requirements
graph标准备: for 不同设备准备合适尺寸 graph标
启动屏幕: for iOS设备添加启动屏幕graph像

3.4 performanceoptimization元tag

预加载关键resource: using<link rel="preload">预加载关键CSS and JS
预连接: using<link rel="preconnect">提 before 连接 to important 域名
DNS预获取: using<link rel="dns-prefetch">提 before 解析DNS
resource提示: 合理usingresource提示提升performance

互动练习: for 产品页面creation元tag

1. creation一个HTML页面, for 产品页面添加完整元tag设置, package含以 under in 容:

产品名称: 智能手表Pro
产品describes: 最 new 款智能手表, support心率监测, 睡眠追踪 and 运动模式
产品关键词: 智能手表,healthy监测,运动追踪,智能穿戴
产品graph片: https://example.com/images/smartwatch-pro.jpg
产品URL: https://example.com/products/smartwatch-pro.html

2. 确保页面package含以 under 元tag:

Basics元tag (字符集, 视口, 标题)
SEO元tag (describes, 关键词, 作者etc.)
Open Graphtag (用于Facebook, LinkedInetc.)
Twitter卡片tag
move设备相关元tag
performanceoptimization相关tag

4. 元tagtest and verification

4.1 元tagtesttool

Google搜索控制台: test页面 in Google搜索in 显示方式
Facebook分享debug器: testOpen Graphtag
Twitter卡片verification器: testTwitter卡片tag
LinkedIn帖子check器: testLinkedIn分享
W3Cverification器: verificationHTML语法正确性

4.2 common元tagerror

缺 few describestag: 影响SEO and user体验
过 long 标题: in 搜索结果in会被截断
不匹配社交媒体tag: 导致分享时显示errorinformation
视口设置error: 导致move设备显示issues
重复规范tag: 可能导致SEOissues

4.3 元tagperformance影响

过 many 元tag: 会增加HTMLfile big small
不必要预加载: 可能浪费bandwidth
过 big graph标: 会影响页面加载速度
optimization建议: 只using必要元tag, optimizationgraph像 big small

on 一节: HTMLgraph像 under 一节: HTMLbest practices