seo-meta

SEO 元标签

状态：已可用于生产环境 ✅ 最后更新：2026-01-14 来源：Schema.org、Open Graph Protocol、Twitter 开发者文档

---

快速入门

每个页面都需要：

<head>
  {/* Basic SEO */}
  <title>Service in Location | Brand Name</title>
  <meta name="description" content="Value prop. Differentiator. Call to action." />
  <link rel="canonical" href="https://example.com/page" />

  {/* Open Graph */}
  <meta property="og:title" content="Service in Location" />
  <meta property="og:description" content="Value prop. Differentiator. CTA." />
  <meta property="og:image" content="https://example.com/og-image.jpg" />
  <meta property="og:url" content="https://example.com/page" />
  <meta property="og:type" content="website" />

  {/* Twitter Card */}
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:title" content="Service in Location" />
  <meta name="twitter:description" content="Value prop. Differentiator. CTA." />
  <meta name="twitter:image" content="https://example.com/og-image.jpg" />

  {/* JSON-LD Structured Data */}
  <script type="application/ld+json">
    {JSON.stringify({
      "@context": "https://schema.org",
      "@type": "LocalBusiness",
      "name": "Business Name",
      "description": "What we do",
      "@id": "https://example.com",
      "url": "https://example.com",
      "telephone": "+61-XXX-XXX-XXX",
      "address": {
        "@type": "PostalAddress",
        "streetAddress": "123 Main St",
        "addressLocality": "Sydney",
        "addressRegion": "NSW",
        "postalCode": "2000",
        "addressCountry": "AU"
      }
    })}
  </script>
</head>

---

标题标签模式

字符数限制：

• Google：50-60 个字符（桌面端），78 个字符（移动端）
• 社交媒体：60-70 个字符

页面类型公式：

页面类型	模式	示例
首页	[Brand] - [Primary Service] in [Location]	Acme Plumbing - 24/7 Emergency Plumber Sydney
服务页	[Service] in [Location] | [Brand]	Hot Water Repairs Sydney | Acme Plumbing
地区页	[Service] [Suburb] | [Brand]	Plumber Bondi | Acme Plumbing
关于页	About [Brand] - [Tagline/USP]	About Acme - Licensed Plumbers Since 1995
联系页	Contact [Brand] - [Location] | [Phone]	Contact Acme Plumbing - Sydney | 1300 XXX XXX

标题修饰语（增加可信度）：

• 24/7 紧急服务
• 持证并投保
• 免费报价
• 当天服务
• 家族经营
• 获奖企业

反模式（避免使用）：

• ❌ “欢迎来到……”（浪费字符）
• ❌ 关键词堆砌（plumber plumbing plumbers）
• ❌ 全部大写（看起来像垃圾信息）
• ❌ 特殊字符（★ § ¶）

---

元描述模式

字符数限制：

• 桌面端：155-160 个字符
• 移动端：120-130 个字符

公式：

[Value prop] [Service] in [Location]. [Differentiator]. [CTA].

按页面类型划分的示例：

首页：

Fast, reliable plumbing services in Sydney. 24/7 emergency response, licensed plumbers, upfront pricing. Call 1300 XXX XXX for same-day service.

服务页：

Expert hot water repairs in Sydney. Fix or replace electric, gas & solar systems. Licensed technicians, 1-year warranty. Book online or call 1300 XXX XXX.

地区页：

Trusted plumber in Bondi. Blocked drains, leaks, hot water, gas fitting. Same-day service, upfront quotes. Call your local plumber on 1300 XXX XXX.

有说服力的词语（谨慎使用）：

• 信任：Licensed、Certified、Insured、Guaranteed、Trusted
• 速度：Fast、Quick、Same Day、Emergency、24/7、Instant
• 价值：Affordable、Competitive、Upfront、No Hidden Fees、Free Quote
• 本地：Local、Nearby、Your Area、[Suburb Name]
• 品质：Expert、Professional、Experienced、Award Winning

---

Open Graph 标签

必需标签：

<meta property="og:title" content="Service in Location" />
<meta property="og:description" content="Value prop. Differentiator. CTA." />
<meta property="og:image" content="https://example.com/og-image.jpg" />
<meta property="og:url" content="https://example.com/page" />
<meta property="og:type" content="website" />

图片要求：

• 尺寸：1200x630px（1.91:1 比例）
• 格式：JPG 或 PNG（为控制文件大小，优先使用 JPG）
• 文件大小：<1MB（理想情况下 <300KB）
• 叠加文字：重要文字应置于中央（安全区域：1000x530）

按页面类型划分的 og:type 值：

页面类型	og:type
首页、服务页、地区页	website
博客文章	article
商家资料	business.business

可选但建议添加：

<meta property="og:site_name" content="Brand Name" />
<meta property="og:locale" content="en_AU" />

---

Twitter Cards

卡片类型：

类型	用途
summary	小型方形图片（1:1），基本信息
summary_large_image	大图（1.91:1），最常见

必需标签：

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Service in Location" />
<meta name="twitter:description" content="Value prop. Differentiator. CTA." />
<meta name="twitter:image" content="https://example.com/og-image.jpg" />

可选：

<meta name="twitter:site" content="@yourbrand" />
<meta name="twitter:creator" content="@authorhandle" />

回退行为：

• 如果缺少 twitter:title，则使用 og:title
• 如果缺少 twitter:description，则使用 og:description
• 如果缺少 twitter:image，则使用 og:image

最佳实践：先定义 og:* 标签，仅在值不同时添加 twitter:* 标签。

---

JSON-LD 结构化数据

LocalBusiness 架构（最重要）

用于首页和联系页：

{
  "@context": "https://schema.org",
  "@type": "Plumber",
  "name": "Acme Plumbing",
  "description": "Licensed plumbing services in Sydney",
  "@id": "https://acmeplumbing.com.au",
  "url": "https://acmeplumbing.com.au",
  "logo": "https://acmeplumbing.com.au/logo.png",
  "image": "https://acmeplumbing.com.au/og-image.jpg",
  "telephone": "+61-XXX-XXX-XXX",
  "email": "[email protected]",
  "priceRange": "$$",
  "address": {
    "@type": "PostalAddress",
    "streetAddress": "123 Main Street",
    "addressLocality": "Sydney",
    "addressRegion": "NSW",
    "postalCode": "2000",
    "addressCountry": "AU"
  },
  "geo": {
    "@type": "GeoCoordinates",
    "latitude": -33.8688,
    "longitude": 151.2093
  },
  "openingHoursSpecification": [
    {
      "@type": "OpeningHoursSpecification",
      "dayOfWeek": ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday"],
      "opens": "07:00",
      "closes": "17:00"
    }
  ],
  "sameAs": [
    "https://facebook.com/acmeplumbing",
    "https://instagram.com/acmeplumbing"
  ]
}

具体商家类型（替代通用的 LocalBusiness）：

• 水管工、电工、锁匠、HVAC（HVACBusiness）
• 牙医、律师、会计师
• 餐厅、咖啡馆、餐饮场所（FoodEstablishment）
• 商店、汽车维修店（AutoRepair）、美容院（BeautySalon）

Service 架构

用于服务页：

{
  "@context": "https://schema.org",
  "@type": "Service",
  "name": "Hot Water Repairs",
  "description": "Fast hot water system repairs in Sydney",
  "provider": {
    "@type": "Plumber",
    "name": "Acme Plumbing",
    "url": "https://acmeplumbing.com.au"
  },
  "areaServed": {
    "@type": "City",
    "name": "Sydney"
  },
  "availableChannel": {
    "@type": "ServiceChannel",
    "serviceUrl": "https://acmeplumbing.com.au/hot-water-repairs",
    "servicePhone": "+61-XXX-XXX-XXX"
  }
}

FAQ 架构（富媒体摘要）

用于 FAQ 区块：

{
  "@context": "https://schema.org",
  "@type": "FAQPage",
  "mainEntity": [
    {
      "@type": "Question",
      "name": "How much does a plumber cost in Sydney?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Plumbing rates in Sydney typically range from $100-$150 per hour for standard work. Emergency callouts may incur higher rates. We provide upfront quotes before starting work."
      }
    },
    {
      "@type": "Question",
      "name": "Do you offer same-day service?",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "Yes, we offer same-day plumbing service across Sydney for urgent repairs. Call us before 2pm for same-day availability."
      }
    }
  ]
}

BreadcrumbList 架构

用于除首页以外的所有页面：

{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "Home",
      "item": "https://acmeplumbing.com.au"
    },
    {
      "@type": "ListItem",
      "position": 2,
      "name": "Services",
      "item": "https://acmeplumbing.com.au/services"
    },
    {
      "@type": "ListItem",
      "position": 3,
      "name": "Hot Water Repairs",
      "item": "https://acmeplumbing.com.au/hot-water-repairs"
    }
  ]
}

---

规范 URL

使用场景：

• 每个页面都应有指向自身的规范 URL
• 重复内容（分页、筛选、打印版本）
• 联合发布的内容
• 跨域重复内容

指向自身的规范 URL：

<link rel="canonical" href="https://example.com/page" />

分页：

<link rel="canonical" href="https://example.com/services" />

常见错误：

• ❌ 缺少规范 URL（由 Google 替你选择）
• ❌ 使用相对 URL（应使用绝对 URL）
• ❌ 规范 URL 指向不同内容
• ❌ 存在多个规范 URL（每个页面只能有一个）

---

验证工具

检查你的实现：

工具	用途	URL
Google Rich Results Test	测试结构化数据	search.google.com/test/rich-results
Schema Markup Validator	验证 JSON-LD	validator.schema.org
Facebook Debugger	测试 Open Graph 标签	developers.facebook.com/tools/debug
Twitter Card Validator	测试 Twitter Cards	cards-dev.twitter.com/validator
Screaming Frog	审核所有页面	screamingfrog.co.uk/seo-spider

浏览器扩展：

• SEO Meta in 1 Click (Chrome)
• META SEO inspector (Firefox)

---

快速参考清单

每个页面都应包含：

• <title>（50-60 个字符，每个页面都要唯一）
• <meta name="description">（150-160 个字符，每个页面都要唯一）
• <link rel="canonical">（绝对 URL）
• Open Graph 标签（og:title、og:description、og:image、og:url、og:type）
• Twitter Card 标签（twitter:card、twitter:title、twitter:description、twitter:image）
• JSON-LD 结构化数据（首页使用 LocalBusiness，服务页面使用 Service）
• BreadcrumbList 架构（除首页外的所有页面）
• 移动设备 viewport meta 标签
• Charset meta 标签（UTF-8）

切勿：

• ❌ 在多个页面使用重复的标题
• ❌ 在标题中使用“欢迎来到……”
• ❌ 省略 og:image（这对社交分享至关重要）
• ❌ 使用通用的 @type（应使用 Plumber，而非 LocalBusiness）
• ❌ 在 meta description 中省略 CTA

---

错误预防

常见问题

问题	原因	解决方法
搜索结果中没有丰富摘要	JSON-LD 无效	使用 validator.schema.org，检查逗号和引号
社交分享显示了错误图片	og:image 缺失或尺寸不正确	使用 1200x630px 图片，并使用 Facebook Debugger 测试
搜索结果中的标题被截断	标题过长	控制在 60 个字符以内
描述被截断	描述过长	控制在 160 个字符以内
多个页面针对同一关键词获得排名	标题重复	确保每个标题都不相同

测试工作流

1. 验证 HTML：使用 W3C validator
2. 测试结构化数据：Google Rich Results Test
3. 测试社交分享：Facebook Debugger + Twitter Card Validator
4. 移动设备预览：Google Search Console URL Inspection
5. 跨浏览器检查：测试 Chrome/Firefox/Safari 中的 meta 渲染效果

---

最佳实践总结

标题标签：

• 最多 50-60 个字符
• 包含主要关键词 + 地点 + 品牌
• 每个页面的标题都要唯一
• 谨慎使用修饰词（24/7、Licensed、Free）

Meta 描述：

• 最多 150-160 个字符
• 包含价值主张 + 差异化优势 + CTA
• 面向用户撰写，而非面向搜索引擎
• 每个页面都需要唯一的描述

Open Graph：

• 始终包含 og:image（1200x630px）
• 使用绝对 URL
• og:title 控制在 60 个字符以内
• 发布前使用 Facebook Debugger 测试

JSON-LD：

• 使用具体的 @type（Plumber，而非 LocalBusiness）
• 包含所有联系信息（电话、地址、电子邮件）
• 添加 openingHoursSpecification，以获得更好的展示效果
• 使用 schema.org validator 验证

Canonical URL：

• 每个页面都需要 canonical
• 始终使用绝对 URL
• 使用自引用 canonical 是一种良好实践
• 每个页面只能有一个 canonical

---

生产注意事项：

• React 应用使用 react-helmet-async（支持 SSR）
• 从 CMS/数据库动态生成 JSON-LD
• 缓存 meta 标签组件以提升性能
• 在 Search Console 中监控索引问题
• 业务详情变更时更新结构化数据