跳到主要内容

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%

推荐范围​

关键词密度 = 2-3%

如果一篇1000字的文章，主关键词出现20-30次（包括变体形式）。

怎么自然地使用关键词​

# 主关键词：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？​

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

或者用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标签

进阶检查（推荐）​