Next.js 博客文章页 SEO Checklist：标题、canonical、OG、JSON-LD 一次到位

English TL;DR: For blog posts, SEO is mostly technical hygiene: canonical URLs, per-post metadata (Open Graph + Twitter), and BlogPosting JSON-LD. This post gives a copy‑paste checklist for Next.js App Router.

如果你的网站已经有了 sitemap.xml / robots.txt / RSS（见这篇：/blog/indie-seo-minimal-nextjs-vercel），下一步最划算的 SEO 投资通常是：

• 把文章页的元信息做“每篇文章独立”
• 加上结构化数据（JSON-LD）

这样 Google（以及各种 AI/答案引擎）会更容易理解：

• 这是文章（不是随机页面）
• 文章的标题/摘要/作者/发布日期是什么

1) Checklist（建议直接贴到 PR 里逐条过）

每篇文章页至少要有：

• <title>：独立且准确（不要全站一个 title）
• <meta name="description">：来自 summary（不要留空）
• canonical：稳定的唯一 URL
• Open Graph：title/description/url/type=article
• Twitter card：title/description/card
• JSON-LD：BlogPosting（headline/datePublished/author/url）

可选增强：

• og:image（默认图或动态生成）
• dateModified
• keywords（谨慎使用；现代 SEO 权重不高）

2) Next.js App Router 实现思路

我推荐用 App Router 的 generateMetadata()：

• 文章内容来自 markdown frontmatter：title/date/summary
• generateMetadata() 根据 slug 读取文章 meta
• 页面 body 内注入 JSON-LD

这样你不会把 SEO 逻辑散落在各种组件里。

3) JSON-LD（BlogPosting）模板

你可以用这个模板（根据自己的站点字段改一下）：

{
  "@context": "https://schema.org",
  "@type": "BlogPosting",
  "headline": "...",
  "description": "...",
  "datePublished": "2026-02-05",
  "dateModified": "2026-02-05",
  "author": {
    "@type": "Person",
    "name": "jqz"
  },
  "mainEntityOfPage": {
    "@type": "WebPage",
    "@id": "https://example.com/blog/slug"
  },
  "url": "https://example.com/blog/slug"
}

注意：你不需要一次性做成“完美 schema”。 先把类型对上、字段齐了，就已经能吃到大部分收益。

4) 一个常见坑：canonical 不统一会稀释权重

如果你同时存在：

• 带/不带 trailing slash
• www / non-www
• query 参数

那就很容易出现“同一篇文章有多个 URL”，这会稀释权重。

最小解决：

• 强制跳转到一个主域名
• 每页设置稳定 canonical

5) 做完怎么验证？

最小验证清单：

1. 打开文章页，看页面 source 里是否有：title/description/canonical
2. 用 Open Graph 调试工具检查预览（Slack/Telegram/X）
3. 用 Google 的 Rich Results Test 看 JSON-LD 是否解析成功

如果你愿意，我也建议你把“文章内部链接”做起来：

• 新文章链接到旧文章
• 旧文章末尾加“相关阅读”

它对 SEO 的收益，往往比你想象的大。

（我在另一篇里写了自动发推的工程闭环：/blog/x-autopost-cron-system）