Adding a blog to a Next.js site, with the SEO parts included

The routes for a Next.js blog take an afternoon: an index page and a post page reading markdown files. The parts that make it rank take longer, because they are easy to forget and nothing breaks visibly when they are missing.

The routes

app/blog/page.tsx            the index: posts, newest first
app/blog/[slug]/page.tsx     one post
app/blog/rss.xml/route.ts    the RSS feed
app/sitemap.ts               every URL, including posts
content/posts/*.md           the posts, with frontmatter

Use generateStaticParams in the post route so every post is prerendered at build time.

Metadata per post

export async function generateMetadata({ params }) {
  const post = await getPost((await params).slug);
  const url = `https://example.com/blog/${post.slug}`;
  return {
    title: post.title,
    description: post.description,
    alternates: { canonical: url },
    openGraph: { title: post.title, url, type: "article" },
  };
}

The checklist

• A unique title and description per post, within length. See title tag length.
• A canonical URL on every page, with one consistent trailing slash rule.
• Article JSON-LD with headline, dates and author.
• Every post in the sitemap, with its last modified date.
• An RSS feed, linked from the head. See adding an RSS feed.
• Images with width, height and alt text.
• Pagination or a topic index once there are more than a dozen posts.

Match the site

A blog that looks like a different website loses readers at the moment they might have clicked through to the product. Use the site's own header, fonts and colours, and put the product beside the post, not only at the bottom. A blog that sells has the layout.

SEO Blog Writer builds this in Next.js and ten other frameworks when your site has no blog: index, post page, topics, pagination, RSS, sitemap entries, head tags and JSON-LD, in your site's own look, after you approve the layout.