7.3 SEO友好的产品设计

✅ 博客文章：
/blog/how-to-learn-ai-coding
/blog/chrome-extension-tutorial
/blog/nextjs-getting-started

✅ 工具页面：
/tools/pdf-to-markdown
/tools/image-compressor
/tools/color-picker

✅ 分类页面：
/category/tutorials
/category/tools
/category/resources

✅ 文档：
/docs/getting-started
/docs/api-reference
/docs/examples

❌ /page?id=123
❌ /post/2024/01/15/p12345
❌ /%E6%95%99%E7%A8%8B  (中文URL)
❌ /a/b/c/d/e/f/very-long-url

首页 (/)
  ├─ 分类页 (/category/tools)
  │    ├─ 工具1 (/tools/tool-1)
  │    ├─ 工具2 (/tools/tool-2)
  │    └─ 工具3 (/tools/tool-3)
  │
  ├─ 博客 (/blog)
  │    ├─ 文章1 (/blog/post-1)
  │    ├─ 文章2 (/blog/post-2)
  │    └─ 文章3 (/blog/post-3)
  │
  └─ 关于 (/about)

// app/tools/[slug]/page.tsx
import { Metadata } from 'next'
 
type Props = {
  params: { slug: string }
}
 
export async function generateMetadata({ params }: Props): Promise<Metadata> {
  const tool = await getTool(params.slug)
 
  return {
    title: `${tool.name} - Free Online ${tool.category} Tool`,
    description: `${tool.description} Fast, secure, and completely free. No signup required.`,
    keywords: [tool.name, tool.category, 'online tool', 'free', ...tool.tags],
    openGraph: {
      title: `${tool.name} - Free Online Tool`,
      description: tool.description,
      url: `https://example.com/tools/${params.slug}`,
      images: [
        {
          url: tool.image,
          width: 1200,
          height: 630,
          alt: tool.name,
        },
      ],
    },
  }
}

标题格式：
[工具名] - Free Online [类型] Tool | [网站名]

描述格式：
[功能描述]. [特点1], [特点2], and [特点3]. [CTA].

示例：
标题：PDF to Markdown - Free Online Converter | ToolBox
描述：Convert PDF files to Markdown format instantly. Fast, secure, and no signup required. Works with any PDF document.

                  ╱╲
                 ╱  ╲  核心产品页 (1页)
                ╱────╲  "AI Banner Generator"
               ╱      ╲
              ╱ 支柱文章 ╲ (5-10篇)
             ╱──────────╲ "10 Best Banner Makers"
            ╱            ╲ "Banner Design Guide"
           ╱   长尾内容   ╲ (50-100篇)
          ╱────────────────╲ "How to create Facebook banner"
         ╱                  ╲ "Instagram story size guide"
        ╱──────────────────────╲