当前位置:知识文库 ❯ 图文

元信息：HTML结构化数据 - 完整教程与代码示例

教程简介

结构化数据是一种标准化的格式，用于向搜索引擎提供关于页面内容的明确信息。通过在HTML中嵌入JSON-LD格式的Schema.org词汇，搜索引擎可以理解页面的语义，并在搜索结果中展示富媒体摘要（Rich Snippets），如星级评分、价格、事件日期等。本教程将全面讲解结构化数据的原理、语法和实战应用。

核心概念

什么是结构化数据

结构化数据是按照特定模式（Schema）组织的标准化数据格式，它告诉搜索引擎页面的内容含义，而不仅仅是文本内容。例如，搜索引擎可以通过结构化数据理解"2026-04-22"是一个事件的日期，而非普通文本。

Schema.org

Schema.org 是由 Google、Microsoft、Yahoo 和 Yandex 共同创建的词汇表，定义了描述网页内容的标准化属性和类型。它是结构化数据的事实标准。

三种结构化数据格式

格式	推荐程度	说明
`JSON-LD`	推荐	Google推荐格式，以`<script>`标签嵌入
`Microdata`	可用	在HTML标签上添加属性
`RDFa`	可用	在HTML标签上添加属性

富媒体搜索结果类型

类型	说明	展示效果
文章	新闻/博客文章	标题、图片、日期
产品	商品信息	价格、库存、评分
评价	用户评论	星级评分、评论数
面包屑	导航路径	路径式导航
FAQ	常见问题	可展开的问答
How-to	教程步骤	步骤列表
事件	活动信息	日期、地点、价格
视频	视频内容	缩略图、时长
食谱	烹饪食谱	烹饪时间、评分
职位	招聘信息	薪资、地点、类型
本地商家	实体店铺	地址、营业时间

语法与用法

JSON-LD 基本语法

代码示例

<script type="application/ld+json">
{
    "@context": "https://schema.org",
    "@type": "类型",
    "属性1": "值1",
    "属性2": "值2"
}
</script>

常用 Schema.org 类型

Article（文章）

代码示例

<script type="application/ld+json">
{
    "@context": "https://schema.org",
    "@type": "Article",
    "headline": "文章标题",
    "description": "文章描述",
    "image": "https://example.com/images/article.jpg",
    "author": {
        "@type": "Person",
        "name": "张三"
    },
    "publisher": {
        "@type": "Organization",
        "name": "前端学习网",
        "logo": {
            "@type": "ImageObject",
            "url": "https://example.com/logo.png"
        }
    },
    "datePublished": "2026-04-22T08:00:00+08:00",
    "dateModified": "2026-04-22T10:30:00+08:00",
    "mainEntityOfPage": {
        "@type": "WebPage",
        "@id": "https://www.example.com/article/html-tutorial"
    }
}
</script>

Product（产品）

代码示例

<script type="application/ld+json">
{
    "@context": "https://schema.org",
    "@type": "Product",
    "name": "MacBook Pro 16英寸",
    "description": "M3 Pro芯片，18GB内存，512GB存储",
    "image": "https://example.com/macbook-pro.jpg",
    "brand": {
        "@type": "Brand",
        "name": "Apple"
    },
    "offers": {
        "@type": "Offer",
        "url": "https://example.com/macbook-pro",
        "priceCurrency": "CNY",
        "price": "14999.00",
        "availability": "https://schema.org/InStock",
        "priceValidUntil": "2026-12-31"
    },
    "aggregateRating": {
        "@type": "AggregateRating",
        "ratingValue": "4.8",
        "reviewCount": "256",
        "bestRating": "5"
    }
}
</script>

BreadcrumbList（面包屑）

代码示例

<script type="application/ld+json">
{
    "@context": "https://schema.org",
    "@type": "BreadcrumbList",
    "itemListElement": [
        {
            "@type": "ListItem",
            "position": 1,
            "name": "首页",
            "item": "https://www.example.com/"
        },
        {
            "@type": "ListItem",
            "position": 2,
            "name": "CSS教程",
            "item": "https://www.example.com/css/"
        },
        {
            "@type": "ListItem",
            "position": 3,
            "name": "Flex布局指南"
        }
    ]
}
</script>

FAQPage（常见问题）

代码示例

<script type="application/ld+json">
{
    "@context": "https://schema.org",
    "@type": "FAQPage",
    "mainEntity": [
        {
            "@type": "Question",
            "name": "什么是结构化数据？",
            "acceptedAnswer": {
                "@type": "Answer",
                "text": "结构化数据是一种标准化的格式，用于向搜索引擎提供关于页面内容的明确信息。"
            }
        },
        {
            "@type": "Question",
            "name": "JSON-LD是什么？",
            "acceptedAnswer": {
                "@type": "Answer",
                "text": "JSON-LD（JavaScript Object Notation for Linked Data）是一种基于JSON的链接数据格式，Google推荐用于嵌入结构化数据。"
            }
        }
    ]
}
</script>

HowTo（教程步骤）

代码示例

<script type="application/ld+json">
{
    "@context": "https://schema.org",
    "@type": "HowTo",
    "name": "如何配置HTML meta标签",
    "description": "一步步教你配置HTML页面的meta标签",
    "totalTime": "PT15M",
    "step": [
        {
            "@type": "HowToStep",
            "position": 1,
            "name": "声明字符编码",
            "text": "在head标签最前面添加 <meta charset='UTF-8'>"
        },
        {
            "@type": "HowToStep",
            "position": 2,
            "name": "设置视口",
            "text": "添加viewport meta标签以支持移动端适配"
        },
        {
            "@type": "HowToStep",
            "position": 3,
            "name": "添加描述",
            "text": "编写150-160字符的页面描述"
        }
    ]
}
</script>

Event（事件）

代码示例

<script type="application/ld+json">
{
    "@context": "https://schema.org",
    "@type": "Event",
    "name": "前端技术大会 2026",
    "description": "年度前端技术盛会，汇聚行业顶尖专家",
    "startDate": "2026-06-15T09:00:00+08:00",
    "endDate": "2026-06-16T18:00:00+08:00",
    "location": {
        "@type": "Place",
        "name": "北京国际会议中心",
        "address": {
            "@type": "PostalAddress",
            "streetAddress": "朝阳区北辰东路8号",
            "addressLocality": "北京",
            "addressCountry": "CN"
        }
    },
    "organizer": {
        "@type": "Organization",
        "name": "前端社区"
    },
    "offers": {
        "@type": "Offer",
        "price": "599",
        "priceCurrency": "CNY",
        "availability": "https://schema.org/InStock"
    }
}
</script>

Organization（组织/网站）

代码示例

<script type="application/ld+json">
{
    "@context": "https://schema.org",
    "@type": "Organization",
    "name": "前端学习网",
    "url": "https://www.example.com",
    "logo": "https://www.example.com/logo.png",
    "sameAs": [
        "https://www.facebook.com/example",
        "https://twitter.com/example",
        "https://github.com/example"
    ],
    "contactPoint": {
        "@type": "ContactPoint",
        "telephone": "+86-10-12345678",
        "contactType": "customer service",
        "availableLanguage": ["Chinese", "English"]
    }
}
</script>

代码示例

示例1：完整的结构化数据配置

以下是一个完整的结构化数据配置示例，包含面包屑导航、文章数据和网站搜索功能：

代码示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flex布局完全指南 - 前端学习网</title>
    <meta name="description" content="从基础概念到高级技巧，全面讲解CSS Flex布局的使用方法和最佳实践。">

    <!-- Open Graph -->
    <meta property="og:title" content="Flex布局完全指南">
    <meta property="og:description" content="从基础概念到高级技巧，全面讲解CSS Flex布局。">
    <meta property="og:image" content="https://example.com/images/flex-guide.jpg">
    <meta property="og:url" content="https://www.example.com/css/flex-guide">
    <meta property="og:type" content="article">

    <!-- Twitter Card -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:site" content="@frontendlearn">

    <!-- ========== 结构化数据 ========== -->

    <!-- 1. 面包屑导航 -->
    <script type="application/ld+json">
    {
        "@context": "https://schema.org",
        "@type": "BreadcrumbList",
        "itemListElement": [
            {
                "@type": "ListItem",
                "position": 1,
                "name": "首页",
                "item": "https://www.example.com/"
            },
            {
                "@type": "ListItem",
                "position": 2,
                "name": "CSS教程",
                "item": "https://www.example.com/css/"
            },
            {
                "@type": "ListItem",
                "position": 3,
                "name": "Flex布局完全指南"
            }
        ]
    }
    </script>

    <!-- 2. 文章结构化数据 -->
    <script type="application/ld+json">
    {
        "@context": "https://schema.org",
        "@type": "Article",
        "headline": "Flex布局完全指南",
        "description": "从基础概念到高级技巧，全面讲解CSS Flex布局的使用方法和最佳实践。",
        "image": "https://example.com/images/flex-guide.jpg",
        "author": {
            "@type": "Person",
            "name": "张三",
            "url": "https://www.example.com/authors/zhangsan"
        },
        "publisher": {
            "@type": "Organization",
            "name": "前端学习网",
            "logo": {
                "@type": "ImageObject",
                "url": "https://www.example.com/logo.png"
            }
        },
        "datePublished": "2026-04-22T08:00:00+08:00",
        "dateModified": "2026-04-22T10:30:00+08:00",
        "mainEntityOfPage": {
            "@type": "WebPage",
            "@id": "https://www.example.com/css/flex-guide"
        }
    }
    </script>

    <!-- 3. 网站搜索功能 -->
    <script type="application/ld+json">
    {
        "@context": "https://schema.org",
        "@type": "WebSite",
        "url": "https://www.example.com/",
        "potentialAction": {
            "@type": "SearchAction",
            "target": "https://www.example.com/search?q={search_term_string}",
            "query-input": "required name=search_term_string"
        }
    }
    </script>
</head>
<body>
    <!-- 页面内容 -->
</body>
</html>

示例2：产品页结构化数据

产品页需要包含产品信息、价格、库存、评分等结构化数据：

代码示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MacBook Pro 16英寸 - Apple Store</title>

    <script type="application/ld+json">
    {
        "@context": "https://schema.org",
        "@type": "Product",
        "name": "MacBook Pro 16英寸",
        "image": [
            "https://example.com/macbook-front.jpg",
            "https://example.com/macbook-side.jpg"
        ],
        "description": "Apple MacBook Pro 16英寸，搭载M3 Pro芯片，18GB统一内存，512GB固态硬盘。",
        "sku": "MK183CH/A",
        "brand": {
            "@type": "Brand",
            "name": "Apple"
        },
        "offers": {
            "@type": "Offer",
            "url": "https://example.com/macbook-pro-16",
            "priceCurrency": "CNY",
            "price": "14999.00",
            "priceValidUntil": "2026-12-31",
            "availability": "https://schema.org/InStock",
            "seller": {
                "@type": "Organization",
                "name": "Apple Store"
            }
        },
        "aggregateRating": {
            "@type": "AggregateRating",
            "ratingValue": "4.8",
            "bestRating": "5",
            "worstRating": "1",
            "reviewCount": "256"
        },
        "review": [
            {
                "@type": "Review",
                "author": {
                    "@type": "Person",
                    "name": "李四"
                },
                "datePublished": "2026-03-15",
                "reviewRating": {
                    "@type": "Rating",
                    "ratingValue": "5",
                    "bestRating": "5"
                },
                "reviewBody": "性能强劲，屏幕出色，非常满意！"
            }
        ]
    }
    </script>
</head>
<body>
    <!-- 产品页面内容 -->
</body>
</html>

浏览器兼容性

结构化数据由搜索引擎爬虫解析，与浏览器无关。以下是各搜索引擎的支持情况：

搜索引擎	JSON-LD	Microdata	RDFa	富媒体结果
Google	推荐	支持	支持	支持
Bing	支持	支持	支持	支持
Yahoo	支持	支持	支持	有限
Yandex	支持	支持	支持	支持
百度	有限	有限	有限	有限

注意事项与最佳实践

1. 使用 JSON-LD 格式

代码示例

<!-- 推荐：JSON-LD -->
<script type="application/ld+json">
{
    "@context": "https://schema.org",
    "@type": "Article",
    "headline": "标题"
}
</script>

<!-- 不推荐：Microdata（代码更冗长） -->
<div itemscope itemtype="https://schema.org/Article">
    <h1 itemprop="headline">标题</h1>
</div>

2. 数据必须与页面可见内容一致

代码示例

<!-- 正确：结构化数据与页面内容匹配 -->
<script type="application/ld+json">
{
    "@type": "Product",
    "name": "MacBook Pro",
    "offers": { "price": "14999" }
}
</script>
<!-- 页面上也显示 MacBook Pro 和 14999 元 -->

<!-- 错误：结构化数据与页面内容不匹配（可能被惩罚） -->
<script type="application/ld+json">
{
    "@type": "Product",
    "name": "MacBook Pro",
    "offers": { "price": "9999" }
}
</script>
<!-- 页面上实际显示 14999 元 -->

3. 不要使用无效或误导性数据

代码示例

<!-- 错误：虚假评分 -->
"aggregateRating": {
    "ratingValue": "5.0",
    "reviewCount": "99999"
}

<!-- 错误：隐藏内容 -->
<!-- 页面上不显示评分，但结构化数据中包含评分 -->

<!-- Google会对误导性数据进行手动惩罚 -->

4. 必填属性不能省略

代码示例

<!-- Article 必填：headline、image、datePublished、author -->
<!-- Product 必填：name、offers（含price、priceCurrency） -->
<!-- 缺少必填属性将无法获得富媒体结果 -->

5. 使用 Google 富媒体结果测试工具

验证URL：https://search.google.com/test/rich-results

代码规范示例

标准项目结构化数据配置

代码示例

<!-- 每个页面根据内容类型配置对应的结构化数据 -->

<!-- 全站：WebSite + Organization -->
<script type="application/ld+json">
{
    "@context": "https://schema.org",
    "@type": "WebSite",
    "url": "https://www.example.com/",
    "name": "前端学习网",
    "potentialAction": {
        "@type": "SearchAction",
        "target": "https://www.example.com/search?q={search_term_string}",
        "query-input": "required name=search_term_string"
    }
}
</script>

<!-- 文章页：Article + BreadcrumbList -->
<!-- 产品页：Product + BreadcrumbList -->
<!-- 首页：WebSite + Organization -->

常见问题与解决方案

常见问题

Q1：添加了结构化数据但没有出现富媒体结果？

解决方案：
1. 使用 Google 富媒体结果测试工具验证
2. 确保所有必填属性都已填写
3. 确保数据与页面可见内容一致
4. 富媒体结果的展示由Google决定，不是保证出现的
5. 可能需要等待Google重新抓取页面

Q2：一个页面可以有多个结构化数据吗？

解决方案：可以。一个页面可以包含多个 <script type="application/ld+json"> 标签，每个描述不同的内容。例如同时包含 Article 和 BreadcrumbList。

Q3：结构化数据对SEO排名有影响吗？

解决方案：结构化数据本身不是排名因素，但间接影响SEO：
1. 富媒体结果提升点击率（CTR）
2. 更高的CTR可能间接提升排名
3. 帮助搜索引擎更好地理解页面内容
4. 语音搜索依赖结构化数据

Q4：JSON-LD 放在 head 还是 body？

解决方案：Google建议放在 <head> 中，但放在 <body> 中也是有效的。推荐放在 <head> 中，确保爬虫尽早解析。

总结

结构化数据是现代SEO的核心组成部分，通过向搜索引擎提供明确的语义信息，可以获得富媒体搜索结果，显著提升点击率和用户体验。

核心要点回顾：

JSON-LD 是推荐格式：Google首选，代码简洁，易于维护
Schema.org 是标准词汇：使用官方类型和属性名
数据必须真实：与页面可见内容一致，否则会被惩罚
必填属性不能省略：缺少必填属性无法获得富媒体结果
常用类型：Article、Product、BreadcrumbList、FAQPage、HowTo
验证工具：使用 Google 富媒体结果测试工具验证配置
多类型组合：一个页面可以包含多个结构化数据块
间接SEO价值：提升CTR，帮助搜索引擎理解内容

合理配置结构化数据，是提升搜索结果展示效果和用户体验的高效手段。

标签：结构化数据 JSON-LD Schema.org 富媒体搜索 SEO优化搜索引擎

本文涉及AI创作

内容由AI创作，请仔细甄别

list快速访问

poll相关推荐

框架集成：01 HTML与前端框架概述 - 详细教程与实战指南

实战项目：项目10：个人作品集网站 - 详细教程与实战指南

实战项目：项目09：任务管理应用 - 详细教程与实战指南

实战项目：项目08：天气应用界面 - 详细教程与实战指南

快速访问

相关推荐