HTML元数据标签

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

核心元数据标签[编辑 | 编辑源代码]

基础字符集声明[编辑 | 编辑源代码]

<meta charset="UTF-8">

必须放在<head>的最前面
现代网页标准要求使用UTF-8编码

视口声明（响应式设计必备）[编辑 | 编辑源代码]

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

width=device-width：匹配设备屏幕宽度
initial-scale=1.0：初始缩放级别

SEO关键元标签[编辑 | 编辑源代码]

页面标题（唯一必须显示的元标签）[编辑 | 编辑源代码]

<title>HTML元数据标签完全指南 | 编程学习网</title>

显示在浏览器标签页和搜索结果中
理想长度50-60字符

描述标签[编辑 | 编辑源代码]

<meta name="description" content="全面了解HTML元数据标签的作用、语法及SEO最佳实践，包含实际代码示例和高级用法。">

搜索引擎结果中的摘要文本
推荐长度150-160字符

关键词标签（现代SEO已弱化）[编辑 | 编辑源代码]

<meta name="keywords" content="HTML,元数据,meta标签,SEO优化,网页元信息">

高级元数据[编辑 | 编辑源代码]

开放图谱协议（社交媒体优化）[编辑 | 编辑源代码]

<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">

规范链接（防止重复内容）[编辑 | 编辑源代码]

<link rel="canonical" href="https://example.com/primary-url" />

特殊用途元标签[编辑 | 编辑源代码]

禁止爬虫索引[编辑 | 编辑源代码]

<meta name="robots" content="noindex, nofollow">

noindex：禁止收录本页
nofollow：不跟踪本页链接

移动优先索引[编辑 | 编辑源代码]

<meta name="mobile-web-app-capable" content="yes">

主题颜色[编辑 | 编辑源代码]

<meta name="theme-color" content="#4285f4">

数学公式示例[编辑 | 编辑源代码]

对于需要展示数学概念的场合： $E = m c^{2}$

实际应用案例[编辑 | 编辑源代码]

电商产品页示例：

<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>

最佳实践总结[编辑 | 编辑源代码]

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

验证工具[编辑 | 编辑源代码]