seo-best-practices

SEO 最佳实践

适用于使用 React 和 Laravel 构建的 Web 应用的全面 SEO 模式。包含 8 个类别中的 31 条规则，涵盖 Core Web Vitals、技术 SEO、结构化数据、性能、社交分享和移动优先索引。支持编码参考和审计模式。

元数据

• 版本： 1.2.0
• 范围： Laravel Blade 和 Laravel + Inertia.js + React
• 规则数量： 8 个类别中的 31 条规则
• 许可证： MIT

如何审计

当用户要求“审计 SEO”“检查 SEO”或“审查 SEO”时，针对其代码库运行以下检查清单。

审计步骤 1：确定范围

• 如果提供了参数（$ARGUMENTS）：仅审计指定的页面或文件
• 如果未提供参数：审计代码库中的所有页面和布局

审计步骤 2：检测项目类型

使用下方“步骤 1：检测项目类型”中的检测逻辑，判断项目使用的是 Laravel Blade 还是 Laravel + Inertia + React。

审计步骤 3：运行 SEO 检查清单

逐项检查以下内容。对于每一项，输出：

• 通过 — 简要确认已验证的内容
• 未通过 — 精确的 file:line、问题描述和修复建议
• 不适用 — 如果该检查不适用于此项目

Core Web Vitals

• 首屏/首屏以上图片使用 fetchpriority="high" 并进行预加载（LCP < 2.5s）
• 没有阻塞交互的长时间运行 JavaScript 任务（INP < 200ms）
• 所有图片和嵌入内容都显式设置了 width/height 属性（CLS < 0.1）
• 没有未预留空间却会改变布局的动态注入内容

技术 SEO

• 每个页面都有唯一的 <title> 标签（50-60 个字符）
• 每个页面都有 <meta name="description">（150-160 个字符）
• 每个页面都有指向正确 URL 的 <link rel="canonical">
• 存在 robots.txt，且未屏蔽重要页面
• 存在 XML 站点地图，且包含所有可编入索引的页面
• URL 格式简洁、全小写并使用连字符 — 可编入索引的页面不使用查询参数

页面 SEO

• 每个页面只有一个 <h1>，且包含主要关键词
• 标题层级连续（h1 → h2 → h3）— 不跳过级别
• 图片具有描述性 alt 文本（不为空、不为“image”、不使用文件名）
• 内部链接使用描述性锚文本（不使用“点击这里”）
• 使用语义化 HTML（<article>、<section>、<nav>、<main>）

结构化数据

• 关键页面包含 JSON-LD 结构化数据（Article、Product、FAQ、BreadcrumbList）
• 组合多种架构类型时，JSON-LD 使用 @graph
• 结构化数据通过 Google Rich Results Test 验证（无错误）
• 首页包含 Organization/WebSite 架构

性能 SEO

• 图片使用现代格式（WebP/AVIF），并提供备用格式
• 首屏以下的图片使用 loading="lazy"
• 字体使用 font-display: swap 或 optional
• 关键资源使用 <link rel="preconnect"> 或 <link rel="preload">

社交分享

• 存在 Open Graph 标签（og:title、og:description、og:image、og:url、og:type）
• og:image 至少为 1200x630px
• 存在 Twitter Card 标签（twitter:card，至少为 summary_large_image）

React/SPA SEO（如适用）

• 为可编入索引的页面配置了 SSR 或 SSG — 不仅限于客户端渲染
• 路由切换时会更新元标签（通过 <Head> 组件或等效方式）
• 使用 head-key 属性防止重复元标签（Inertia.js）

移动优先

• 存在 <meta name="viewport" content="width=device-width, initial-scale=1">
• 移动端和桌面端的内容一致（没有隐藏内容）
• 触控目标至少为 48x48px，且间距充足

审计步骤 4：总结

以以下内容结束审计：

## SEO Audit Summary
- **PASS**: X checks
- **FAIL**: X checks
- **N/A**: X checks
- **Top Priority Fixes**: (list the 3 most impactful FAIL items)

---

适用场景

在以下情况下参考这些指南：

• 对代码库执行 SEO 审计
• 添加元标签（<title>、description、canonical、robots）
• 实现结构化数据（JSON-LD / Schema.org）
• 优化 Core Web Vitals（LCP、INP、CLS）
• 设置 Open Graph 和 Twitter Card 元标签
• 创建站点地图和 robots.txt
• 构建 SEO 友好的 React SPA
• 配置 Laravel SEO 中间件和软件包
• 优化图片、字体和加载性能，以便搜索引擎发现

第 1 步：识别项目类型

提供建议前，务必先检查项目技术栈。 不同技术栈需要采用不同的 SEO 方法。

检查 package.json 和项目结构：

信号	项目类型
依赖项中包含 @inertiajs/react	Laravel + Inertia + React
仅有 resources/views/**/*.blade.php（没有 React）	Laravel Blade（服务端渲染）

如果是 Laravel Blade： 应用 tech-、onpage-、schema-、perf-、social- 和 mobile- 规则。将元标签放在 Blade 布局中。使用 spatie/laravel-sitemap 生成站点地图。跳过 spa- 规则 — 页面已经由服务端渲染。

如果是 Laravel + Inertia + React： 应用所有规则。通过 Blade 布局中的 @inertiaHead 和 React 页面中的 @inertiajs/react 的 <Head> 组件添加元标签。若要启用 SSR，请使用 @inertiajs/react/server 中的 createServer 创建 resources/js/ssr.jsx，在 Vite 配置中添加 ssr: 'resources/js/ssr.jsx'，使用 vite build && vite build --ssr 构建，并运行 php artisan inertia:start-ssr。在元标签上使用 head-key 属性，避免布局和页面之间出现重复标签。重点关注 schema-、social- 和 perf- 规则。

按优先级划分的规则类别

优先级	类别	影响	前缀
1	Core Web Vitals	严重	cwv-
2	技术 SEO	严重	tech-
3	页面 SEO	高	onpage-
4	结构化数据	高	schema-
5	性能 SEO	高	perf-
6	社交分享	高	social-
7	React/SPA SEO	高	spa-
8	移动优先	中	mobile-

快速参考

1. Core Web Vitals（严重）

• cwv-lcp - 最大内容绘制优化（<2.5s）
• cwv-inp - 交互到下一次绘制优化（<200ms）
• cwv-cls - 累积布局偏移预防（<0.1）

2. 技术 SEO（严重）

• tech-meta-tags - 必需的 HTML 元标签（title、description、canonical）
• tech-canonical-urls - 规范 URL 实现
• tech-robots-txt - Robots.txt 配置
• tech-sitemap-xml - XML 站点地图生成
• tech-url-structure - SEO 友好的 URL 格式

3. 页面 SEO（高）

• onpage-headings - 标题层级和结构
• onpage-semantic-html - 用于 SEO 和无障碍访问的语义化 HTML
• onpage-internal-linking - 内部链接策略
• onpage-images - 图片优化和替代文本

4. 结构化数据（高）

• schema-json-ld - JSON-LD 结构化数据基础
• schema-article - Article 和 BlogPosting 标记
• schema-product - 适用于电子商务的 Product schema
• schema-breadcrumb - BreadcrumbList 导航标记
• schema-graph - 使用 @graph 组合多种 schema 类型
• schema-faq - FAQ 页面 schema 标记
• schema-validation - 结构化数据验证和监控

5. 性能 SEO（高）

• perf-image-formats - 现代图片格式（WebP/AVIF）
• perf-lazy-loading - 懒加载实现
• perf-font-loading - Web 字体加载策略
• perf-resource-hints - Preconnect、preload 和 prefetch

6. 社交分享（高）

• social-open-graph - Open Graph 元标签
• social-twitter-cards - Twitter/X Card 元标签

7. React/SPA SEO（高）

• spa-rendering-strategy - 用于 SEO 的 SSR 与 CSR、SSG 对比
• spa-meta-management - 动态元标签管理
• spa-routing - SPA 路由和抓取能力

8. 移动优先（中）

• mobile-viewport - 视口和响应式配置
• mobile-content-parity - 移动端与桌面端的内容一致性
• mobile-ux - SEO 的移动端 UX 要求

必备模式

Meta 标签（HTML）

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Page Title — Site Name</title>
  <meta name="description" content="Concise 150-160 character description of page content." />
  <link rel="canonical" href="https://example.com/page" />

  
  <meta property="og:title" content="Page Title" />
  <meta property="og:description" content="Description for social sharing." />
  <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" />

  
  <meta name="twitter:card" content="summary_large_image" />
</head>

JSON-LD 结构化数据

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "Article Title",
  "author": {
    "@type": "Person",
    "name": "Author Name"
  },
  "datePublished": "2026-03-14",
  "dateModified": "2026-03-14",
  "image": "https://example.com/article-image.jpg",
  "publisher": {
    "@type": "Organization",
    "name": "Site Name",
    "logo": {
      "@type": "ImageObject",
      "url": "https://example.com/logo.png"
    }
  }
}
</script>

React Meta 管理（Inertia.js）

import { Head } from '@inertiajs/react'

interface Post {
  title: string;
  slug: string;
  excerpt: string;
  image: string;
}

function BlogPost({ post }: { post: Post }) {
  return (
    <>
      <Head>
        <title>{post.title} — Blog</title>
        <meta head-key="description" name="description" content={post.excerpt} />
        <link rel="canonical" href={`https://example.com/blog/${post.slug}`} />
        <meta property="og:title" content={post.title} />
        <meta property="og:description" content={post.excerpt} />
        <meta property="og:image" content={post.image} />
        <meta property="og:type" content="article" />
        <meta name="twitter:card" content="summary_large_image" />
      </Head>
      <article>{/* content */}</article>
    </>
  )
}

Core Web Vitals 快速检查

LCP  < 2.5s   Preload hero image, use fetchpriority="high"
INP  < 200ms  Break long tasks, yield to main thread
CLS  < 0.1    Set width/height on images, reserve space for dynamic content

图片优化

<picture>
  <source srcset="hero.avif" type="image/avif" />
  <source srcset="hero.webp" type="image/webp" />
  <img
    src="hero.jpg"
    alt="Descriptive alt text for the image"
    width="1200"
    height="630"
    fetchpriority="high"
  />
</picture>


<img
  srcset="photo-400.webp 400w, photo-800.webp 800w, photo-1200.webp 1200w"
  sizes="(max-width: 600px) 400px, (max-width: 900px) 800px, 1200px"
  src="photo-800.webp"
  alt="Descriptive alt text"
  width="1200"
  height="800"
  loading="lazy"
/>

使用方法

阅读各规则文件，了解详细说明和代码示例：

rules/tech-meta-tags.md
rules/schema-json-ld.md
rules/cwv-lcp.md
rules/spa-rendering-strategy.md
rules/social-open-graph.md

每个规则文件都包含：

• 带有元数据（标题、影响、标签）的 YAML frontmatter
• 简要说明其重要性
• 错误示例及说明
• 正确示例及说明
• 框架专属示例（React、Laravel）

参考资料

• Google Search Central - Google 官方 SEO 文档
• web.dev Core Web Vitals - CWV 测量和优化
• Schema.org - 结构化数据词汇表
• Open Graph Protocol - 社交分享 Meta 标签
• Google Rich Results Test - 结构化数据验证

完整合并文档

如需查看包含所有完整规则的指南：AGENTS.md