HTML5系列（13）-- 微数据与结构化数据指南

前端技术探索系列：HTML5 微数据与结构化数据指南 📊

致读者：探索数据语义化的世界 👋

前端开发者们，

今天我们将深入探讨 HTML5 微数据与结构化数据，学习如何让网页内容更易被搜索引擎理解和解析。

微数据标准实现 🚀

基础微数据标注

<!-- 产品信息示例 -->
<div itemscope itemtype="https://schema.org/Product"><h1 itemprop="name">iPhone 13 Pro</h1><div itemprop="description">新一代 iPhone，搭载 A15 仿生芯片</div><div itemprop="offers" itemscope itemtype="https://schema.org/Offer"><span itemprop="price">7999</span><meta itemprop="priceCurrency" content="CNY"><link itemprop="availability" href="https://schema.org/InStock"><meta itemprop="priceValidUntil" content="2024-12-31"></div><div itemprop="aggregateRating" itemscope itemtype="https://schema.org/AggregateRating"><meta itemprop="ratingValue" content="4.8"><meta itemprop="reviewCount" content="2749"></div>
</div>

复杂数据结构

<!-- 企业信息示例 -->
<div itemscope itemtype="https://schema.org/Organization"><h1 itemprop="name">科技创新有限公司</h1><div itemprop="address" itemscope itemtype="https://schema.org/PostalAddress"><span itemprop="streetAddress">创新路88号</span><span itemprop="addressLocality">深圳市</span><span itemprop="addressRegion">广东省</span><meta itemprop="postalCode" content="518000"><meta itemprop="addressCountry" content="CN"></div><div itemprop="contactPoint" itemscope itemtype="https://schema.org/ContactPoint"><meta itemprop="contactType" content="customer service"><span itemprop="telephone">400-888-8888</span><span itemprop="email">support@example.com</span><meta itemprop="availableLanguage" content="zh-CN"></div>
</div>

结构化数据管理 📝

数据验证工具

class StructuredDataValidator {constructor() {this.schemas = new Map();this.loadSchemas();}async loadSchemas() {try {const response = await fetch('https://schema.org/version/latest/schemaorg-current-https.jsonld');const data = await response.json();this.parseSchemas(data);} catch (error) {console.error('Schema 加载失败:', error);}}parseSchemas(data) {data['@graph'].forEach(item => {if (item['@type'] === 'rdfs:Class') {this.schemas.set(item['@id'], {properties: new Set(),required: new Set()});}});}validateElement(element) {const itemtype = element.getAttribute('itemtype');if (!itemtype) return { valid: false, error: '缺少 itemtype' };const schemaType = this.getSchemaType(itemtype);if (!schemaType) return { valid: false, error: '未知的 Schema 类型' };return this.validateProperties(element, schemaType);}validateProperties(element, schemaType) {const errors = [];const properties = element.querySelectorAll('[itemprop]');// 检查必需属性schemaType.required.forEach(prop => {if (!this.hasProperty(properties, prop)) {errors.push(`缺少必需属性: ${prop}`);}});// 验证属性值properties.forEach(prop => {const propName = prop.getAttribute('itemprop');if (!schemaType.properties.has(propName)) {errors.push(`未知属性: ${propName}`);} else {const valueError = this.validatePropertyValue(prop);if (valueError) errors.push(valueError);}});return {valid: errors.length === 0,errors};}validatePropertyValue(prop) {const value = this.getPropertyValue(prop);const type = prop.getAttribute('itemtype');if (type && !this.schemas.has(type)) {return `无效的属性类型: ${type}`;}if (!value && !prop.hasAttribute('content')) {return `属性 ${prop.getAttribute('itemprop')} 缺少值`;}return null;}getPropertyValue(prop) {if (prop.hasAttribute('content')) {return prop.getAttribute('content');}return prop.textContent.trim();}
}

SEO 优化助手

class SEOStructuredDataHelper {constructor() {this.validator = new StructuredDataValidator();}generateJsonLD(element) {const data = this.parseStructuredData(element);return {'@context': 'https://schema.org',...data};}parseStructuredData(element) {const result = {};const type = element.getAttribute('itemtype');if (type) {result['@type'] = type.split('/').pop();}const properties = element.querySelectorAll('[itemprop]');properties.forEach(prop => {const name = prop.getAttribute('itemprop');const value = this.getPropertyValue(prop);if (prop.hasAttribute('itemscope')) {result[name] = this.parseStructuredData(prop);} else {result[name] = value;}});return result;}injectJsonLD(data) {const script = document.createElement('script');script.type = 'application/ld+json';script.textContent = JSON.stringify(data, null, 2);document.head.appendChild(script);}generateSitemap(data) {return `<?xml version="1.0" encoding="UTF-8"?><urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">${this.generateSitemapUrls(data)}</urlset>`;}generateSitemapUrls(data, baseUrl = '') {let urls = '';if (data['@type'] === 'WebPage') {urls += `<url><loc>${baseUrl}${data.url}</loc><lastmod>${data.dateModified || new Date().toISOString()}</lastmod><changefreq>weekly</changefreq><priority>0.8</priority></url>`;}return urls;}
}

实践项目：企业信息结构化 🏢

完整示例

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><title>企业信息 - 科技创新有限公司</title><script type="application/ld+json">{"@context": "https://schema.org","@type": "Organization","name": "科技创新有限公司","url": "https://example.com","logo": "https://example.com/logo.png","sameAs": ["https://www.facebook.com/company","https://twitter.com/company","https://linkedin.com/company"],"address": {"@type": "PostalAddress","streetAddress": "创新路88号","addressLocality": "深圳市","addressRegion": "广东省","postalCode": "518000","addressCountry": "CN"},"contactPoint": {"@type": "ContactPoint","contactType": "customer service","telephone": "+86-400-888-8888","email": "support@example.com","availableLanguage": ["zh-CN", "en"]},"department": [{"@type": "Organization","name": "研发部","employee": {"@type": "Person","name": "张三","jobTitle": "研发总监"}},{"@type": "Organization","name": "市场部","employee": {"@type": "Person","name": "李四","jobTitle": "市场总监"}}]}</script>
</head>
<body itemscope itemtype="https://schema.org/Organization"><header><h1 itemprop="name">科技创新有限公司</h1><img itemprop="logo" src="logo.png" alt="公司标志"></header><main><section id="about"><h2>关于我们</h2><p itemprop="description">科技创新有限公司成立于2010年，致力于人工智能技术研发与应用。</p></section><section id="contact"><h2>联系方式</h2><div itemprop="address" itemscope itemtype="https://schema.org/PostalAddress"><p>地址：<span itemprop="addressLocality">深圳市</span><span itemprop="addressRegion">广东省</span><span itemprop="streetAddress">创新路88号</span></p></div><div itemprop="contactPoint" itemscope itemtype="https://schema.org/ContactPoint"><p>电话：<span itemprop="telephone">400-888-8888</span><br>邮箱：<span itemprop="email">support@example.com</span></p></div></section><section id="departments"><h2>部门信息</h2><div itemprop="department" itemscope itemtype="https://schema.org/Organization"><h3 itemprop="name">研发部</h3><div itemprop="employee" itemscope itemtype="https://schema.org/Person"><p>负责人：<span itemprop="name">张三</span><span itemprop="jobTitle">研发总监</span></p></div></div></section></main>
</body>
</html>