seo-best-practices

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

SEO Best Practices

SEO最佳实践

Comprehensive SEO patterns for web applications built with React and Laravel. Contains 31 rules across 8 categories covering Core Web Vitals, technical SEO, structured data, performance, social sharing, and mobile-first indexing. Supports both coding reference and audit mode.

针对使用React和Laravel构建的Web应用的全面SEO模式。包含8个分类下的31条规则，覆盖Core Web Vitals、技术SEO、结构化数据、性能优化、社交分享及移动优先索引。支持代码参考和审计模式两种使用方式。

Metadata

元数据

Version: 1.2.0
Scope: Laravel Blade and Laravel + Inertia.js + React
Rule Count: 31 rules across 8 categories
License: MIT

版本: 1.2.0
适用范围: Laravel Blade 及 Laravel + Inertia.js + React
规则数量: 8个分类下共31条规则
许可证: MIT

How to Audit

审计流程

When the user asks to "audit SEO", "check SEO", or "review SEO" — run the checklist below against their codebase.

当用户要求“audit SEO”、“check SEO”或“review SEO”时，对照以下清单对其代码库进行检查。

Audit Step 1: Determine Scope

审计步骤1：确定范围

If arguments provided (
```
$ARGUMENTS
```
): audit only those pages or files
If no arguments: audit all pages and layouts in the codebase

若提供参数（
```
$ARGUMENTS
```
）：仅审计指定页面或文件
若无参数：审计代码库中所有页面和布局

Audit Step 2: Detect Project Type

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

Use the detection logic in "Step 1: Detect Project Type" below to determine Laravel Blade vs Laravel + Inertia + React.

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

Audit Step 3: Run SEO Checklist

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

Work through every item below. For each, output:

PASS — brief confirmation of what was verified
FAIL — exact
```
file:line
```
, description of the issue, and fix recommendation
N/A — if the check does not apply to this project

逐一检查以下每一项，输出结果：

通过 — 简要说明验证内容
失败 — 精确到
```
文件:行号
```
，描述问题并给出修复建议
不适用 — 若该检查项不适用于当前项目

Core Web Vitals

Hero/above-the-fold images use
```
fetchpriority="high"
```
and are preloaded (LCP < 2.5s)
No long-running JavaScript tasks blocking interaction (INP < 200ms)
All images and embeds have explicit
```
width
```
/
```
height
```
attributes (CLS < 0.1)
No dynamically injected content that shifts layout without reserved space

首屏/ above-the-fold图片使用
```
fetchpriority="high"
```
并预加载（LCP < 2.5秒）
无阻塞交互的长时JavaScript任务（INP < 200毫秒）
所有图片和嵌入内容均有明确的
```
width
```
/
```
height
```
属性（CLS < 0.1）
无未预留空间的动态注入内容导致布局偏移

Technical SEO

技术SEO

Every page has a unique
```
<title>
```
tag (50-60 characters)
Every page has a
```
<meta name="description">
```
(150-160 characters)
Every page has a
```
<link rel="canonical">
```
pointing to the correct URL
```
robots.txt
```
exists and does not block important pages
XML sitemap exists and includes all indexable pages
URLs are clean, lowercase, hyphenated — no query params for indexable pages

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

On-Page SEO

页面SEO

One
```
<h1>
```
per page containing the primary keyword
Heading hierarchy is sequential (h1 → h2 → h3) — no skipped levels
Images have descriptive
```
alt
```
text (not empty, not "image", not filename)
Internal links use descriptive anchor text (not "click here")
Semantic HTML used (
```
<article>
```
,
```
<section>
```
,
```
<nav>
```
,
```
<main>
```
)

每个页面仅有一个包含主关键词的
```
<h1>
```
标签
标题层级连续（h1 → h2 → h3）— 无层级跳跃
图片包含描述性
```
alt
```
文本（非空、非“image”、非文件名）
内部链接使用描述性锚文本（非“点击此处”）
使用语义化HTML（
```
<article>
```
、
```
<section>
```
、
```
<nav>
```
、
```
<main>
```
）

Structured Data

结构化数据

JSON-LD structured data present on key pages (Article, Product, FAQ, BreadcrumbList)
JSON-LD uses
```
@graph
```
when combining multiple schema types
Structured data validates with Google Rich Results Test (no errors)
Organization/WebSite schema present on homepage

关键页面存在JSON-LD结构化数据（Article、Product、FAQ、BreadcrumbList类型）
组合多种Schema类型时使用
```
@graph
```
属性
结构化数据通过Google富媒体结果测试（无错误）
首页存在Organization/WebSite类型Schema

Performance SEO

性能SEO

Images use modern formats (WebP/AVIF) with fallbacks
Below-the-fold images use
```
loading="lazy"
```
Fonts use
```
font-display: swap
```
or
```
optional
```

Critical resources use

<link rel="preconnect">

<link rel="preload">

图片使用现代格式（WebP/AVIF）并提供降级方案
首屏以下图片使用
```
loading="lazy"
```
字体使用
```
font-display: swap
```
或
```
optional
```
属性

关键资源使用

<link rel="preconnect">

或

<link rel="preload">

Social Sharing

社交分享

Open Graph tags present (

og:title

og:description

og:image

og:url

og:type

)

```
og:image
```
is at least 1200x630px
Twitter Card tags present (
```
twitter:card
```
, at minimum
```
summary_large_image
```
)

存在Open Graph标签（

og:title

、

og:description

、

og:image

、

og:url

、

og:type

）

```
og:image
```
尺寸至少为1200x630像素
存在Twitter Card标签（至少包含
```
twitter:card
```
的
```
summary_large_image
```
类型）

React/SPA SEO (if applicable)

React/SPA SEO（如适用）

SSR or SSG configured for indexable pages — not client-side only
Meta tags update on route change (via
```
<Head>
```
component or equivalent)
```
head-key
```
attribute used to prevent duplicate meta tags (Inertia.js)

可索引页面配置了SSR或SSG — 非纯客户端渲染
路由切换时元标签自动更新（通过
```
<Head>
```
组件或同类工具）
使用
```
head-key
```
属性防止重复元标签（Inertia.js）

Mobile-First

移动优先

<meta name="viewport" content="width=device-width, initial-scale=1">

present

Content parity between mobile and desktop (no hidden content)
Touch targets are at least 48x48px with adequate spacing

存在

<meta name="viewport" content="width=device-width, initial-scale=1">

标签

移动端与桌面端内容一致（无隐藏内容）
触摸目标尺寸至少为48x48像素且间距充足

Audit Step 4: Summary

审计步骤4：总结

End the audit with:

undefined

审计结尾需输出：

undefined

SEO Audit Summary

SEO审计总结

PASS: X checks
FAIL: X checks
N/A: X checks
Top Priority Fixes: (list the 3 most impactful FAIL items)

---

通过: X项检查
失败: X项检查
不适用: X项检查
最高优先级修复: （列出3个影响最大的失败项）

---

When to Apply

适用场景

Reference these guidelines when:

Running an SEO audit on a codebase
Adding meta tags (
```
<title>
```
, description, canonical, robots)
Implementing structured data (JSON-LD / Schema.org)
Optimizing Core Web Vitals (LCP, INP, CLS)
Setting up Open Graph and Twitter Card meta tags
Creating sitemaps and robots.txt
Building SEO-friendly React SPAs
Configuring Laravel SEO middleware and packages
Optimizing images, fonts, and loading performance for search

在以下场景中参考本指南：

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

Step 1: Detect Project Type

步骤1：检测项目类型

Always check the project stack before giving advice. Different stacks need different SEO approaches.

Check

package.json

and project structure:

Signal	Project Type
`@inertiajs/react` in dependencies	Laravel + Inertia + React
`resources/views/*/.blade.php` only (no React)	Laravel Blade (server-rendered)

If Laravel Blade: Apply

tech-

onpage-

schema-

perf-

social-

mobile-

rules. Meta tags go in Blade layouts. Sitemaps via

spatie/laravel-sitemap

. Skip

spa-

rules — pages are already server-rendered.

If Laravel + Inertia + React: Apply all rules. Meta tags via

@inertiaHead

in Blade layout +

<Head>

component from

@inertiajs/react

in React pages. For SSR, create

resources/js/ssr.jsx

using

createServer

from

@inertiajs/react/server

, add

ssr: 'resources/js/ssr.jsx'

to Vite config, build with

vite build && vite build --ssr

, and run

php artisan inertia:start-ssr

. Use

head-key

attribute on meta tags to prevent duplicates between layout and page. Focus on

schema-

social-

, and

perf-

rules.

在给出建议前务必检查项目技术栈，不同技术栈需要不同的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-

类规则。

Rule Categories by Priority

规则分类优先级


cwv-
tech-
onpage-
schema-
perf-
social-
spa-
mobile-

Priority	Category	Impact	Prefix
1	Core Web Vitals	CRITICAL	`cwv-`
2	Technical SEO	CRITICAL	`tech-`
3	On-Page SEO	HIGH	`onpage-`
4	Structured Data	HIGH	`schema-`
5	Performance SEO	HIGH	`perf-`
6	Social Sharing	HIGH	`social-`
7	React/SPA SEO	HIGH	`spa-`
8	Mobile-First	MEDIUM	`mobile-`


cwv-
tech-
onpage-
schema-
perf-
social-
spa-
mobile-

优先级	分类	影响程度	前缀
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-`

Quick Reference

快速参考

1. Core Web Vitals (CRITICAL)

1. Core Web Vitals（关键）

```
cwv-lcp
```
- Largest Contentful Paint optimization (<2.5s)
```
cwv-inp
```
- Interaction to Next Paint optimization (<200ms)
```
cwv-cls
```
- Cumulative Layout Shift prevention (<0.1)

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

2. Technical SEO (CRITICAL)

2. 技术SEO（关键）

```
tech-meta-tags
```
- Essential HTML meta tags (title, description, canonical)
```
tech-canonical-urls
```
- Canonical URL implementation
```
tech-robots-txt
```
- Robots.txt configuration
```
tech-sitemap-xml
```
- XML sitemap generation
```
tech-url-structure
```
- SEO-friendly URL patterns

```
tech-meta-tags
```
- 必备HTML元标签（标题、描述、canonical）
```
tech-canonical-urls
```
- 规范URL实现
```
tech-robots-txt
```
- Robots.txt配置
```
tech-sitemap-xml
```
- XML站点地图生成
```
tech-url-structure
```
- SEO友好的URL模式

3. On-Page SEO (HIGH)

3. 页面SEO（高）

```
onpage-headings
```
- Heading hierarchy and structure
```
onpage-semantic-html
```
- Semantic HTML for SEO and accessibility
```
onpage-internal-linking
```
- Internal linking strategy
```
onpage-images
```
- Image optimization and alt text

```
onpage-headings
```
- 标题层级与结构
```
onpage-semantic-html
```
- 用于SEO和可访问性的语义化HTML
```
onpage-internal-linking
```
- 内部链接策略
```
onpage-images
```
- 图片优化与alt文本

4. Structured Data (HIGH)

4. 结构化数据（高）

```
schema-json-ld
```
- JSON-LD structured data basics
```
schema-article
```
- Article and BlogPosting markup
```
schema-product
```
- Product schema for e-commerce
```
schema-breadcrumb
```
- BreadcrumbList navigation markup
```
schema-graph
```
- Combining multiple schema types with @graph
```
schema-faq
```
- FAQ page schema markup
```
schema-validation
```
- Structured data validation and monitoring

```
schema-json-ld
```
- JSON-LD结构化数据基础
```
schema-article
```
- 文章与博客文章标记
```
schema-product
```
- 电商产品Schema
```
schema-breadcrumb
```
- 面包屑导航标记
```
schema-graph
```
- 使用@graph组合多种Schema类型
```
schema-faq
```
- FAQ页面Schema标记
```
schema-validation
```
- 结构化数据验证与监控

5. Performance SEO (HIGH)

5. 性能SEO（高）

```
perf-image-formats
```
- Modern image formats (WebP/AVIF)
```
perf-lazy-loading
```
- Lazy loading implementation
```
perf-font-loading
```
- Web font loading strategy
```
perf-resource-hints
```
- Preconnect, preload, and prefetch

```
perf-image-formats
```
- 现代图片格式（WebP/AVIF）
```
perf-lazy-loading
```
- 懒加载实现
```
perf-font-loading
```
- Web字体加载策略
```
perf-resource-hints
```
- 预连接、预加载与预获取

6. Social Sharing (HIGH)

6. 社交分享（高）

```
social-open-graph
```
- Open Graph meta tags
```
social-twitter-cards
```
- Twitter/X Card meta tags

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

7. React/SPA SEO (HIGH)

7. React/SPA SEO（高）

```
spa-rendering-strategy
```
- SSR vs CSR vs SSG for SEO
```
spa-meta-management
```
- Dynamic meta tag management
```
spa-routing
```
- SPA routing and crawlability

```
spa-rendering-strategy
```
- 用于SEO的SSR、CSR与SSG策略
```
spa-meta-management
```
- 动态元标签管理
```
spa-routing
```
- SPA路由与可爬取性

8. Mobile-First (MEDIUM)

8. 移动优先（中）

```
mobile-viewport
```
- Viewport and responsive configuration
```
mobile-content-parity
```
- Content parity between mobile and desktop
```
mobile-ux
```
- Mobile UX requirements for SEO

```
mobile-viewport
```
- 视口与响应式配置
```
mobile-content-parity
```
- 移动端与桌面端内容一致性
```
mobile-ux
```
- SEO相关的移动端用户体验要求

Essential Patterns

核心模式

Meta Tags (HTML)

元标签（HTML）

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

  <!-- Open Graph -->
  <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" />

  <!-- Twitter Card -->
  <meta name="twitter:card" content="summary_large_image" />
</head>

html

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>页面标题 — 站点名称</title>
  <meta name="description" content="150-160字符的页面内容简要描述。" />
  <link rel="canonical" href="https://example.com/page" />

  <!-- Open Graph -->
  <meta property="og:title" content="页面标题" />
  <meta property="og:description" content="用于社交分享的描述。" />
  <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" />
</head>

JSON-LD Structured Data

JSON-LD结构化数据

html

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

html

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "文章标题",
  "author": {
    "@type": "Person",
    "name": "作者名称"
  },
  "datePublished": "2026-03-14",
  "dateModified": "2026-03-14",
  "image": "https://example.com/article-image.jpg",
  "publisher": {
    "@type": "Organization",
    "name": "站点名称",
    "logo": {
      "@type": "ImageObject",
      "url": "https://example.com/logo.png"
    }
  }
}
</script>

React Meta Management (Inertia.js)

React元标签管理（Inertia.js）

tsx

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>
    </>
  )
}

tsx

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} — 博客</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>{/* 内容 */}</article>
    </>
  )
}

Core Web Vitals Quick Checks

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

LCP  < 2.5秒   预加载首屏图片，使用fetchpriority="high"
INP  < 200毫秒 拆分长任务，让出主线程
CLS  < 0.1    为图片设置宽高，为动态内容预留空间

Image Optimization

图片优化

html

<!-- Modern formats with fallback -->
<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>

<!-- Responsive images -->
<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"
/>

html

<!-- 现代格式加降级方案 -->
<picture>
  <source srcset="hero.avif" type="image/avif" />
  <source srcset="hero.webp" type="image/webp" />
  <img
    src="hero.jpg"
    alt="图片的描述性alt文本"
    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="描述性alt文本"
  width="1200"
  height="800"
  loading="lazy"
/>

How to Use

使用方式

Read individual rule files for detailed explanations and code examples:

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

Each rule file contains:

YAML frontmatter with metadata (title, impact, tags)
Brief explanation of why it matters
Incorrect example with explanation
Correct example with explanation
Framework-specific examples (React, Laravel)

阅读单个规则文件获取详细说明和代码示例：

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前置元数据（标题、影响程度、标签）
规则重要性的简要说明
错误示例及解释
正确示例及解释
框架特定示例（React、Laravel）

References

参考资料

Google Search Central - Official Google SEO documentation
web.dev Core Web Vitals - CWV measurement and optimization
Schema.org - Structured data vocabulary
Open Graph Protocol - Social sharing meta tags
Google Rich Results Test - Structured data validation

Google Search Central - Google官方SEO文档
web.dev Core Web Vitals - CWV测量与优化指南
Schema.org - 结构化数据词汇表
Open Graph Protocol - 社交分享元标签协议
Google Rich Results Test - 结构化数据验证工具

Full Compiled Document

完整编译文档

For the complete guide with all rules expanded:

AGENTS.md

包含所有扩展规则的完整指南：

AGENTS.md