6.4 On-Page SEO：上线前必做的优化

"网站上线了，但Google还不知道你存在。On-Page SEO就是告诉Google：嘿，我这里有好内容，快来收录我。"

什么是On-Page SEO？

On-Page SEO = 在你自己网站页面上做的优化，目的是让Google理解你的页面内容，从而在搜索结果中给你更好的排名。

和它对应的是 Off-Page SEO（外链建设等），但On-Page是基础，先做好这个。

1. Title标签优化

Title是Google搜索结果中显示的蓝色标题，是SEO最重要的元素之一。

规则

<!-- ❌ 错误写法 -->
<title>My Website</title>
<title>Home Page</title>
<title>Tools - Best - Free - Online - 2024</title>

<!-- ✅ 正确写法 -->
<title>PDF to Word Converter - Free Online Tool | YourSite</title>
<title>Best AI Resume Builder 2024 - Free & Instant | YourSite</title>

要点

长度：50-60个字符（太长会被截断）
关键词在前：把主要关键词放在最前面
包含品牌名：放在最后，用 | 或 - 分隔
每页唯一：每个页面的title都不同

Next.js中设置Title

// app/tools/pdf-to-word/page.tsx

// 方式一：直接在layout中设置
export const metadata = {
  title: 'PDF to Word Converter - Free Online Tool | MyToolSite',
  description: 'Convert PDF to Word instantly...',
};

// 方式二：动态生成
export function generateMetadata({ params }) {
  return {
    title: `${params.toolName} - Free Online Tool | MyToolSite`,
  };
}

2. Meta Description

Meta Description是搜索结果中标题下面的灰色描述文字。虽然不直接影响排名，但影响点击率（CTR）。

规则

<meta name="description" content="Convert PDF to Word online for free. 
No registration required. Fast, accurate, and works on any device. 
Supports PDF to DOC, DOCX, and more." />

要点

长度：150-160个字符
包含关键词：自然地融入关键词
有行动号召：用 "Free", "No registration", "Instant" 等词
每页唯一：每页的描述都不同
描述真实内容：不要夸大，否则用户跳出率高

Next.js中设置

export const metadata = {
  title: 'PDF to Word Converter - Free Online Tool | MyToolSite',
  description: 'Convert PDF to Word instantly for free. No sign-up needed. 
    Supports PDF to DOC, DOCX. Works on Mac, Windows, and mobile.',
};

3. H1-H3层级结构

标题层级就像文章的骨架，Google通过它理解你的内容结构。

正确的层级

<h1>PDF to Word Converter</h1>           <!-- 只用一个H1 -->
  <h2>How to Convert PDF to Word</h2>     <!-- 主要章节 -->
    <h3>Step 1: Upload Your PDF</h3>      <!-- 子章节 -->
    <h3>Step 2: Choose Output Format</h3>
    <h3>Step 3: Download Result</h3>
  <h2>Why Choose Our Tool</h2>
    <h3>Fast Conversion</h3>
    <h3>100% Free</h3>
    <h3>Privacy Protected</h3>
  <h2>Frequently Asked Questions</h2>
    <h3>Is it really free?</h3>
    <h3>What file formats are supported?</h3>

核心规则

规则	说明
H1只有一个	每页只有一个H1，包含主关键词
H2做章节标题	对应文章的大段落
H3做子标题	对应大段落中的小节
不要跳级	不要从H1直接跳到H3
包含关键词	在H2/H3中自然使用相关关键词

常见错误

<!-- ❌ 错误：多个H1 -->
<h1>PDF Converter</h1>
<h1>Free Online Tool</h1>
<h1>How to Use</h1>

<!-- ❌ 错误：用标题标签做样式 -->
<h1 style="font-size: 14px;">Copyright 2024</h1>

<!-- ✅ 正确：一个H1，层级清晰 -->
<h1>PDF to Word Converter - Free Online Tool</h1>
<h2>How to Convert PDF to Word Online</h2>
<h3>Supported File Formats</h3>

4. 关键词密度

关键词密度 = 关键词出现次数 / 总字数 × 100%

怎么自然地使用关键词

# 主关键词：PDF to Word converter

❌ 关键词堆砌（会被Google惩罚）：
"Our PDF to Word converter is the best PDF to Word converter 
for converting PDF to Word. Use our PDF to Word converter today."

✅ 自然使用（Google喜欢）：
"Our online converter makes it easy to turn PDF files into 
editable Word documents. Just upload your PDF, and within seconds 
you'll have a DOCX file ready to edit. No software installation 
required — it works directly in your browser."

关键词变体

不要只重复一个词，使用同义词和相关词：

主关键词：PDF to Word converter
变体：
- PDF to DOC converter
- convert PDF to Word
- PDF to Word online
- turn PDF into Word document
- PDF to editable Word file

5. 面包屑导航

面包屑导航让用户和Google都能理解页面层级关系。

首页 > 工具 > PDF工具 > PDF转Word

实现

// components/Breadcrumb.tsx
export default function Breadcrumb({ items }) {
  return (
    <nav aria-label="breadcrumb">
      <ol className="flex gap-2 text-sm text-gray-600">
        {items.map((item, index) => (
          <li key={index} className="flex items-center">
            {index > 0 && <span className="mx-2">›</span>}
            {index < items.length - 1 ? (
              <a href={item.href} className="hover:text-blue-600">
                {item.label}
              </a>
            ) : (
              <span className="text-gray-900">{item.label}</span>
            )}
          </li>
        ))}
      </ol>
    </nav>
  );
}

// 使用
<Breadcrumb items={[
  { label: 'Home', href: '/' },
  { label: 'Tools', href: '/tools' },
  { label: 'PDF Tools', href: '/tools/pdf' },
  { label: 'PDF to Word' },
]} />

为什么重要？

帮助Google理解网站结构
搜索结果中可能显示面包屑路径
提升用户体验，降低跳出率

6. 图片Alt标签

Alt标签告诉Google图片内容是什么，也帮助视障用户理解页面。

规则

<!-- ❌ 错误 -->
<img src="image1.jpg" />
<img src="screenshot.png" alt="image" />
<img src="tool.png" alt="tool tool free tool online tool best tool" />

<!-- ✅ 正确 -->
<img src="pdf-converter-screenshot.png" 
     alt="PDF to Word converter interface showing upload button" />
<img src="before-after.png" 
     alt="Comparison of PDF file before and after conversion to Word" />

要点

描述图片内容：准确描述图片展示了什么
包含关键词：自然融入，不要堆砌
简洁：一般10-15个词以内
装饰图片：纯装饰图片用 alt="" 空值

Next.js中的Image组件

import Image from 'next/image';

<Image
  src="/images/pdf-converter-demo.png"
  alt="Online PDF to Word converter tool interface"
  width={800}
  height={450}
  priority  // 首屏图片用priority
/>

7. 内部链接策略

内部链接 = 你网站内页面之间的互相链接。这对SEO极其重要。

为什么重要？

帮助Google发现和索引所有页面
传递页面权重（PageRank）
让用户在网站内停留更久
降低跳出率

链接策略

实操规则

<!-- 每篇内容包含3-5个内部链接 -->

## How to Convert PDF to Word

You can use our [free PDF to Word converter](/tools/pdf-to-word) 
to instantly convert your files. If you need to 
[compress your PDF](/tools/pdf-compressor) first, we have 
that tool too.

For batch conversions, check out our guide on 
[bulk PDF processing](/blog/bulk-pdf-conversion).

锚文本技巧

<!-- ❌ 错误 -->
<a href="/tools/pdf-to-word">click here</a>
<a href="/tools/pdf-to-word">this link</a>

<!-- ✅ 正确 -->
<a href="/tools/pdf-to-word">PDF to Word converter</a>
<a href="/tools/pdf-to-word">convert PDF to Word online</a>

锚文本应该描述目标页面的内容，而不是用"点击这里"。

8. URL结构

好的URL应该简短、可读、包含关键词。

对比

❌ 不好的URL：
/example.com/page?id=123&cat=tools
/example.com/2024/01/15/my-new-blog-post-about-tools
/example.com/p/dXf3gH7kL

✅ 好的URL：
/example.com/tools/pdf-to-word
/example.com/blog/best-pdf-converters
/example.com/convert/pdf-to-word-online

规则

规则	说明	示例
用连字符分隔	不要用下划线	`/pdf-to-word` ✅ `/pdf_to_word` ❌
全小写	避免大小写混合	`/tools` ✅ `/Tools` ❌
简短	3-5个词最佳	`/pdf-to-word` ✅ `/best-free-online-pdf-to-word-converter-tool` ❌
包含关键词	放入目标关键词	`/pdf-to-word` ✅ `/tool-123` ❌
避免日期	除非是新闻站	`/blog/topic` ✅ `/blog/2024/01/topic` ❌

Next.js中的URL结构

app/
├── tools/
│   ├── pdf-to-word/
│   │   └── page.tsx        → /tools/pdf-to-word
│   ├── image-compressor/
│   │   └── page.tsx        → /tools/image-compressor
│   └── page.tsx             → /tools
├── blog/
│   ├── best-pdf-tools/
│   │   └── page.tsx        → /blog/best-pdf-tools
│   └── page.tsx             → /blog
└── page.tsx                 → /

9. Schema标记（结构化数据）

Schema标记是一种特殊的HTML代码，帮助Google更好地理解你的内容，并在搜索结果中展示富文本片段（Rich Snippets）。

常用Schema类型

类型	用途	搜索结果效果
FAQ	常见问题	展开式问答
HowTo	操作步骤	步骤卡片
Product	产品信息	价格、评分
Article	文章	作者、日期
BreadcrumbList	面包屑	显示路径
SoftwareApplication	应用	评分、价格

FAQ Schema示例（必加！）

// components/FAQSchema.tsx
export default function FAQSchema({ questions }) {
  const schema = {
    "@context": "https://schema.org",
    "@type": "FAQPage",
    "mainEntity": questions.map(q => ({
      "@type": "Question",
      "name": q.question,
      "acceptedAnswer": {
        "@type": "Answer",
        "text": q.answer
      }
    }))
  };

  return (
    <script
      type="application/ld+json"
      dangerouslySetInnerHTML={{ __html: JSON.stringify(schema) }}
    />
  );
}

// 使用
<FAQSchema questions={[
  {
    question: "Is this PDF to Word converter free?",
    answer: "Yes, our converter is 100% free with no hidden charges..."
  },
  {
    question: "What file formats are supported?",
    answer: "We support PDF to DOC, DOCX, and RTF formats..."
  }
]} />

HowTo Schema示例

{
  "@context": "https://schema.org",
  "@type": "HowTo",
  "name": "How to Convert PDF to Word Online",
  "step": [
    {
      "@type": "HowToStep",
      "name": "Upload PDF",
      "text": "Click the upload button and select your PDF file."
    },
    {
      "@type": "HowToStep",
      "name": "Convert",
      "text": "Click the Convert button and wait a few seconds."
    },
    {
      "@type": "HowToStep",
      "name": "Download",
      "text": "Download your converted Word document."
    }
  ]
}

怎么验证Schema？

打开 schema.org/validator
输入你的页面URL
检查是否有错误

或者用Google的 Rich Results Test。

10. 实操Checklist：上线前必做的10项检查

打印这个清单，上线前逐条检查：

## 🔍 On-Page SEO 上线前检查清单

### 基础Meta
□ 1. 每个页面都有唯一的title标签（50-60字符）
□ 2. 每个页面都有唯一的meta description（150-160字符）
□ 3. 所有页面的canonical标签正确

### 内容结构
□ 4. 每页只有一个H1，H2/H3层级清晰
□ 5. 主关键词密度在2-3%之间
□ 6. 关键词出现在title、H1、第一段、URL中

### 链接与导航
□ 7. 面包屑导航已添加（带Schema标记）
□ 8. 每页有3-5个内部链接
□ 9. 所有链接可点击，无死链

### 图片优化
□ 10. 所有图片都有描述性的alt标签

什么是On-Page SEO？​

1. Title标签优化​

规则​

要点​

Next.js中设置Title​

2. Meta Description​

规则​

要点​

Next.js中设置​

3. H1-H3层级结构​

正确的层级​

核心规则​

常见错误​

4. 关键词密度​

推荐范围​

怎么自然地使用关键词​

关键词变体​

5. 面包屑导航​

实现​

为什么重要？​

6. 图片Alt标签​

规则​

要点​

Next.js中的Image组件​

7. 内部链接策略​

为什么重要？​

链接策略​

实操规则​

锚文本技巧​

8. URL结构​

对比​

规则​

Next.js中的URL结构​

9. Schema标记（结构化数据）​

常用Schema类型​

FAQ Schema示例（必加！）​

HowTo Schema示例​

怎么验证Schema？​

10. 实操Checklist：上线前必做的10项检查​

进阶检查（推荐）​

什么是On-Page SEO？

1. Title标签优化

规则

要点

Next.js中设置Title

2. Meta Description

规则

要点

Next.js中设置

3. H1-H3层级结构

正确的层级

核心规则

常见错误

4. 关键词密度

推荐范围

怎么自然地使用关键词

关键词变体

5. 面包屑导航

实现

为什么重要？

6. 图片Alt标签

规则

要点

Next.js中的Image组件

7. 内部链接策略

为什么重要？

链接策略

实操规则

锚文本技巧

8. URL结构

对比

规则

Next.js中的URL结构

9. Schema标记（结构化数据）

常用Schema类型

FAQ Schema示例（必加！）

HowTo Schema示例

怎么验证Schema？

10. 实操Checklist：上线前必做的10项检查

进阶检查（推荐）