个人网站 SEO 实战：让搜索引擎正确收录你的内容

个人博客也要做 SEO——不是为了排名第一，而是让搜索引擎正确理解并收录你的内容。这套清单按优先级排列，全是能直接落地的动作。

第一优先级：让页面可被索引

1. 服务端渲染或静态生成

搜索引擎爬虫执行 JS 的能力有限（尤其处理大量页面时）。Next.js 默认 SSR/SSG，天然占优；纯 CSR 的 SPA 最容易收录不全。

// Next.js：给内容页设置动态渲染或静态生成
export const dynamic = "force-dynamic"; // 或 SSG

2. 唯一且准确的 <title> 和 description

每个页面都要有，且针对该页内容写，不要全站统一：

export async function generateMetadata({ params }) {
  const { slug } = await params;
  const post = await getPostBySlug(slug);
  return {
    title: `${post.title} - 我的博客`,
    description: post.description,
  };
}

3. 语义化 HTML

用正确的标签：<article>、<h1>（每页一个）、<nav>、<time>。这是免费的 SEO——搜索引擎靠结构理解内容。

第二优先级：帮助爬虫找到所有页面

4. 站点地图（sitemap.xml）

告诉搜索引擎你有哪些页面、什么时候更新：

// app/sitemap.ts（Next.js App Router）
export default async function sitemap() {
  const posts = getAllPosts();
  return [
    { url: "https://example.com", lastModified: new Date() },
    ...posts.map((p) => ({
      url: `https://example.com/posts/${p.slug}`,
      lastModified: new Date(p.date),
    })),
  ];
}

5. robots.txt

控制爬虫访问范围：

User-agent: *
Allow: /
Disallow: /admin
Sitemap: https://example.com/sitemap.xml

6. 内链

文章之间互相链接（相关文章、标签页），爬虫顺着链接爬全站，用户也提升阅读深度。

第三优先级：让展示更吸引点击

7. Open Graph / Twitter Card

社交分享时显示标题、描述、图片：

export const metadata = {
  openGraph: {
    title: "...",
    description: "...",
    images: ["/og-image.png"],
    type: "article",
  },
};

8. 结构化数据（JSON-LD）

用 Schema.org 的 Article 类型，让搜索结果可能显示富摘要：

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "文章标题",
  "datePublished": "2026-08-14",
  "author": { "@type": "Person", "name": "作者" }
}
</script>

提交与验证

本地做了不算完，要主动告诉搜索引擎：

1. Google Search Console：提交 sitemap 地址，用 URL 检查工具验证收录；
2. Bing Webmaster：同样提交；
3. 百度搜索资源平台：国内站点必做。

常见误区

误区	正解
堆砌关键词	自然写作，标题准确即可
全站统一 title	每页唯一，含页面主题
图片不带 alt	加描述性 alt，爬虫靠它理解图片
忽略移动端	移动优先索引，响应式是底线

小结

个人站 SEO 不用迷信黑科技，做好这五步就赢过大多数站点：

1. SSR/SSG 让页面可索引；
2. 每页唯一 title/description；
3. sitemap + robots.txt；
4. OG 标签 + 结构化数据；
5. 主动提交搜索引擎。

内容质量永远是第一位的——SEO 只是让好内容被看见的工具。