SEO Meta标签优化指南 - 标题、描述、结构化数据最佳实践

seo-meta by jezweb/claude-skills

539 周安装量

670 GitHub Stars

GitHub

安装命令

npx skills add https://github.com/jezweb/claude-skills --skill seo-meta

内容创作开发 SEO

🇨🇳中文介绍

SEO Meta 标签

状态 : 生产就绪 ✅ 最后更新 : 2026-01-14 来源 : Schema.org, Open Graph Protocol, Twitter Developer Docs

快速开始

每个页面都需要：

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

广告位招租

在这里展示您的产品或服务

触达数万 AI 开发者，精准高效

联系我们

页面类型	模式	示例
首页	[品牌] - [主要服务] 在 [地点]	Acme Plumbing - 24/7 紧急水管工悉尼
服务页面	[服务] 在 [地点]	[品牌]
地点页面	[服务] [郊区]	[品牌]
关于页面	关于 [品牌] - [标语/独特卖点]	About Acme - Licensed Plumbers Since 1995
联系页面	联系 [品牌] - [地点]	[电话]

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

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

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": "info@acmeplumbing.com.au",
  "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）：

Plumber, Electrician, Locksmith, HVAC (HVACBusiness)
Dentist, Attorney, Accountant
Restaurant, Cafe, FoodEstablishment
Store, AutoRepair, BeautySalon

用于服务页面：

{
  "@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"
    }
  ]
}

每个页面都应有一个自引用的规范链接
重复内容（分页、筛选、打印版本）
联合发布的内容
跨域重复内容

自引用规范链接 :

<!-- 始终包含，即使没有重复内容 -->
<link rel="canonical" href="https://example.com/page" />

<!-- 在第 2 页及以后 -->
<link rel="canonical" href="https://example.com/services" />
<!-- 不是 https://example.com/services?page=2 -->

❌ 缺少规范链接（Google 会为你选择）
❌ 相对 URL（使用绝对 URL）
❌ 规范链接指向不同内容
❌ 多个规范链接（每页只能有一个）

检查你的实现 :

工具	用途	URL
Google 富媒体搜索结果测试	测试结构化数据	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-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 模式（除首页外的所有页面）
移动端视口 meta 标签
字符集 meta 标签（UTF-8）

❌ 跨页面使用重复标题
❌ 在标题中使用"欢迎来到..."
❌ 省略 og:image（对社交分享至关重要）
❌ 使用通用的 @type（使用 Plumber 而不是 LocalBusiness）
❌ 在 meta 描述中省略行动号召

问题	原因	修复方法
搜索结果中无富媒体摘要	JSON-LD 无效	使用 validator.schema.org，检查逗号/引号
社交分享显示错误图片	og:image 缺失或尺寸错误	使用 1200x630 像素，用 Facebook Debugger 测试
搜索结果中标题被截断	太长	保持在 60 个字符以内
描述被截断	太长	保持在 160 个字符以内
多个页面针对相同关键词排名	重复标题	使每个标题唯一

验证 HTML : 使用 W3C 验证器
测试结构化数据 : Google 富媒体搜索结果测试
测试社交分享 : Facebook Debugger + Twitter Card Validator
移动端预览 : Google Search Console URL 检查
跨浏览器检查 : 在 Chrome/Firefox/Safari 中测试 meta 标签渲染

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

最多 150-160 个字符
包含价值主张 + 差异化 + 行动号召
为人类而非搜索引擎撰写
每个页面都需要唯一的描述

始终包含 og:image（1200x630 像素）
使用绝对 URL
保持 og:title 在 60 个字符以内
上线前用 Facebook Debugger 测试

使用特定的 @type（Plumber，而非 LocalBusiness）
包含所有联系信息（电话、地址、邮箱）
添加 openingHoursSpecification 以获得更好的显示效果
使用 schema.org 验证器验证

每个页面都需要规范链接
始终使用绝对 URL
自引用是良好实践
每页只能有一个规范链接

生产注意事项 :

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

🇺🇸English

SEO Meta Tags

Status : Production Ready ✅ Last Updated : 2026-01-14 Source : Schema.org, Open Graph Protocol, Twitter Developer Docs

Quick Start

Every page needs:

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

Title Tag Patterns

Character Limits :

Google: 50-60 characters (desktop), 78 (mobile)
Social: 60-70 characters

Page Type Formulas :

Page Type	Pattern	Example
Home	[Brand] - [Primary Service] in [Location]	Acme Plumbing - 24/7 Emergency Plumber Sydney
Service	[Service] in [Location]	[Brand]
Location	[Service] [Suburb]	[Brand]
About	About [Brand] - [Tagline/USP]	About Acme - Licensed Plumbers Since 1995
Contact	Contact [Brand] - [Location]	[Phone]

Title Modifiers (add credibility):

24/7 Emergency
Licensed & Insured
Free Quotes
Same Day Service
Family Owned
Award Winning

Anti-Patterns (avoid):

❌ "Welcome to..." (wastes characters)
❌ Keyword stuffing (plumber plumbing plumbers)
❌ ALL CAPS (looks spammy)
❌ Special characters (★ § ¶)

Meta Description Patterns

Character Limits :

Desktop: 155-160 characters
Mobile: 120-130 characters

Formula :

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

Examples by Page Type :

Home Page :

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

Service Page :

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.

Location Page :

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

Power Words (use sparingly):

Trust: Licensed, Certified, Insured, Guaranteed, Trusted
Speed: Fast, Quick, Same Day, Emergency, 24/7, Instant
Value: Affordable, Competitive, Upfront, No Hidden Fees, Free Quote
Local: Local, Nearby, Your Area, [Suburb Name]
Quality: Expert, Professional, Experienced, Award Winning

Open Graph Tags

Required Tags :

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

Image Requirements :

Dimensions: 1200x630px (1.91:1 ratio)
Format: JPG or PNG (JPG preferred for file size)
File size: <1MB (ideally <300KB)
Text overlay: Keep important text center (safe zone: 1000x530)

og:type Values by Page Type :

Page Type	og:type
Home, Service, Location	website
Blog Post	article
Business Profile	business.business

Optional but Recommended :

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

Twitter Cards

Card Types :

Type	Use Case
summary	Small square image (1:1), basic info
summary_large_image	Large image (1.91:1), most common

Required Tags :

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

Optional :

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

Fallback Behavior :

If twitter:title missing, uses og:title
If twitter:description missing, uses og:description
If twitter:image missing, uses og:image

Best Practice : Define og:* tags first, only add twitter:* if values differ.

JSON-LD Structured Data

LocalBusiness Schema (Most Important)

Use for homepage and contact page:

{
  "@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": "info@acmeplumbing.com.au",
  "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"
  ]
}

Specific Business Types (instead of generic LocalBusiness):

Plumber, Electrician, Locksmith, HVAC (HVACBusiness)
Dentist, Attorney, Accountant
Restaurant, Cafe, FoodEstablishment
Store, AutoRepair, BeautySalon

Service Schema

Use for service pages:

{
  "@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 Schema (Rich Snippets)

Use for FAQ sections:

{
  "@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 Schema

Use on all pages except homepage:

{
  "@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"
    }
  ]
}

Canonical URLs

When to Use :

Every page should have a self-referencing canonical
Duplicate content (pagination, filters, print versions)
Syndicated content
Cross-domain duplicates

Self-Referencing Canonical :

<!-- Always include, even if no duplicates -->
<link rel="canonical" href="https://example.com/page" />

Pagination :

<!-- On page 2+ -->
<link rel="canonical" href="https://example.com/services" />
<!-- Not https://example.com/services?page=2 -->

Common Mistakes :

❌ Missing canonical (Google chooses for you)
❌ Relative URLs (use absolute URLs)
❌ Canonical pointing to different content
❌ Multiple canonicals (only one per page)

Validation Tools

Check Your Implementation :

Tool	Purpose	URL
Google Rich Results Test	Test structured data	search.google.com/test/rich-results
Schema Markup Validator	Validate JSON-LD	validator.schema.org
Facebook Debugger	Test Open Graph tags	developers.facebook.com/tools/debug
Twitter Card Validator	Test Twitter Cards	cards-dev.twitter.com/validator
Screaming Frog	Audit all pages	screamingfrog.co.uk/seo-spider

Browser Extensions :

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

Quick Reference Checklist

For every page, include:

<title> (50-60 chars, unique per page)
<meta name="description"> (150-160 chars, unique per page)
<link rel="canonical"> (absolute URL)
Open Graph tags (og:title, og:description, og:image, og:url, og:type)
Twitter Card tags (twitter:card, twitter:title, twitter:description, twitter:image)
JSON-LD structured data (LocalBusiness on homepage, Service on service pages)
BreadcrumbList schema (all pages except homepage)
Mobile viewport meta tag
Charset meta tag (UTF-8)

Never :

❌ Duplicate titles across pages
❌ Use "Welcome to..." in titles
❌ Omit og:image (critical for social sharing)
❌ Use generic @type (LocalBusiness instead of Plumber)
❌ Skip CTA in meta description

Error Prevention

Common Issues

Issue	Cause	Fix
No rich snippets in search	Invalid JSON-LD	Use validator.schema.org, check commas/quotes
Social share shows wrong image	og:image missing or wrong size	Use 1200x630px, test with Facebook Debugger
Title truncated in search	Too long	Keep under 60 chars
Description truncated	Too long	Keep under 160 chars
Multiple pages rank for same keyword	Duplicate titles	Make each title unique

Testing Workflow

Validate HTML : Use W3C validator
Test Structured Data : Google Rich Results Test
Test Social Sharing : Facebook Debugger + Twitter Card Validator
Mobile Preview : Google Search Console URL Inspection
Cross-Browser Check : Test meta rendering in Chrome/Firefox/Safari

Best Practices Summary

Title Tags :

50-60 characters maximum
Include primary keyword + location + brand
Unique for every page
Use modifiers (24/7, Licensed, Free) sparingly

Meta Descriptions :

150-160 characters maximum
Include value prop + differentiator + CTA
Write for humans, not search engines
Every page needs unique description

Open Graph :

Always include og:image (1200x630px)
Use absolute URLs
Keep og:title under 60 chars
Test with Facebook Debugger before launch

JSON-LD :

Use specific @type (Plumber, not LocalBusiness)
Include all contact info (phone, address, email)
Add openingHoursSpecification for better display
Validate with schema.org validator

Canonical URLs :

Every page needs canonical
Always use absolute URLs
Self-referencing is good practice
Only one canonical per page

Production Notes :

Use react-helmet-async for React apps (SSR-safe)
Generate JSON-LD dynamically from CMS/database
Cache meta tag components for performance
Monitor Search Console for indexing issues
Update structured data when business details change

Weekly Installs

539

Repository

jezweb/claude-skills

GitHub Stars

652

First Seen

Jan 20, 2026

Security Audits

Gen Agent Trust HubPass SocketPass SnykPass

Installed on

claude-code419

opencode377

gemini-cli367

codex335

antigravity319

cursor314

React 组合模式指南：Vercel 组件架构最佳实践，提升代码可维护性

106,200 周安装

SEO Meta标签优化指南 - 标题、描述、结构化数据最佳实践

🇨🇳中文介绍

SEO Meta 标签

快速开始

相关 Skills

标题标签模式

Meta 描述模式

Open Graph 标签

Twitter 卡片