编辑“︁HTML元数据标签”︁

{{DISPLAYTITLE:HTML元数据标签}}

'''HTML元数据标签'''是嵌入在HTML文档<head>部分的特殊标签，用于提供网页的元信息（metadata）。这些标签不会直接显示在页面上，但对搜索引擎优化（SEO）、社交媒体分享、浏览器行为和机器可读性有重要影响。

== 核心元数据标签 ==

=== 基础字符集声明 ===
<syntaxhighlight lang="html">
<meta charset="UTF-8">
</syntaxhighlight>
* 必须放在<head>的最前面
* 现代网页标准要求使用UTF-8编码

=== 视口声明（响应式设计必备） ===
<syntaxhighlight lang="html">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</syntaxhighlight>
* '''width=device-width'''：匹配设备屏幕宽度
* '''initial-scale=1.0'''：初始缩放级别

== SEO关键元标签 ==

=== 页面标题（唯一必须显示的元标签） ===
<syntaxhighlight lang="html">
<title>HTML元数据标签完全指南 | 编程学习网</title>
</syntaxhighlight>
* 显示在浏览器标签页和搜索结果中
* 理想长度50-60字符

=== 描述标签 ===
<syntaxhighlight lang="html">
<meta name="description" content="全面了解HTML元数据标签的作用、语法及SEO最佳实践，包含实际代码示例和高级用法。">
</syntaxhighlight>
* 搜索引擎结果中的摘要文本
* 推荐长度150-160字符

=== 关键词标签（现代SEO已弱化） ===
<syntaxhighlight lang="html">
<meta name="keywords" content="HTML,元数据,meta标签,SEO优化,网页元信息">
</syntaxhighlight>

== 高级元数据 ==

=== 开放图谱协议（社交媒体优化） ===
<mermaid>
graph LR
    A[og:title] --> B(社交媒体标题)
    A --> C(不同于HTML title)
    D[og:image] --> E(分享时显示的图片)
</mermaid>

<syntaxhighlight lang="html">
<meta property="og:title" content="HTML元数据深度解析">
<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com/html-metadata">
<meta property="og:image" content="https://example.com/images/meta-tags.png">
</syntaxhighlight>

=== 规范链接（防止重复内容） ===
<syntaxhighlight lang="html">
<link rel="canonical" href="https://example.com/primary-url" />
</syntaxhighlight>

== 特殊用途元标签 ==

=== 禁止爬虫索引 ===
<syntaxhighlight lang="html">
<meta name="robots" content="noindex, nofollow">
</syntaxhighlight>
* '''noindex'''：禁止收录本页
* '''nofollow'''：不跟踪本页链接

=== 移动优先索引 ===
<syntaxhighlight lang="html">
<meta name="mobile-web-app-capable" content="yes">
</syntaxhighlight>

=== 主题颜色 ===
<syntaxhighlight lang="html">
<meta name="theme-color" content="#4285f4">
</syntaxhighlight>

== 数学公式示例 ==
对于需要展示数学概念的场合：
<math>E=mc^2</math>

== 实际应用案例 ==

'''电商产品页示例'''：
<syntaxhighlight lang="html">
<head>
    <meta charset="UTF-8">
    <title>Premium Wireless Headphones - XYZ Store</title>
    <meta name="description" content="Buy noise-cancelling wireless headphones with 30hr battery life. Free shipping & 2-year warranty.">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <!-- 社交媒体元数据 -->
    <meta property="og:title" content="Premium Wireless Headphones | XYZ Store">
    <meta property="og:image" content="https://xyz.store/images/headphones-social.jpg">
    
    <!-- 结构化数据 -->
    <script type="application/ld+json">
    {
      "@context": "https://schema.org/",
      "@type": "Product",
      "name": "Premium Wireless Headphones",
      "image": "https://xyz.store/images/headphones.jpg",
      "description": "Noise-cancelling wireless headphones",
      "brand": {
        "@type": "Brand",
        "name": "AudioPro"
      }
    }
    </script>
</head>
</syntaxhighlight>

== 最佳实践总结 ==
* 所有页面必须包含：charset、viewport、title
* 重要页面应包含：description、canonical
* 社交媒体分享页面需要：og:title、og:image等
* 使用JSON-LD格式的结构化数据增强搜索结果显示

== 验证工具 ==
* [https://search.google.com/test/rich-results Google富媒体结果测试]
* [https://developers.facebook.com/tools/debug/ Facebook分享调试器]
* [https://validator.w3.org/ W3C标记验证服务]

[[Category:HTML学习路径]]
[[Category:SEO优化]]

[[Category:编程语言]]
[[Category:HTML]]
[[Category:HTML SEO优化]]