SEO in Next.js: The 2025 Edition

~ Index Introduction Meta Tags with next/head OpenGraph & Social Sharing Structured Data with JSON-LD Canonical URLs & Duplicate Prevention Sitemaps and Robots.txt 2 Bonus Tips Conclusion ~ Introduction So your website loads fast, well that's cute. But can it rank? If your site is invisible to Google or looks like trash when someone shares it on social media, you're leaving traffic (and maybe $$$) on the table. And no, just adding keywords isn't enough anymore. SEO in 2025 is a whole different kind of monster, you need: structured data, social previews, canonical URLs, sitemap hygiene the whole f*ing toolbox. Good news: Next.js gives us a solid SEO foundation out of the box. But if you want to go from meh to damn, you gotta level up and get a little technical. In this post, I’ll show you how to max out SEO in your Next.js app with: Meta tags using next/head OpenGraph tags for beautiful link previews JSON-LD structured data for rich results Canonical tags to prevent duplicates Auto-generated sitemaps and robots.txt And of course — a couple extra sauce tips at the end. Let’s dive in!!! ~ Meta Tags with next/head Google ain’t that smart, you gotta tell it what your page is about. Meta tags are like a short level up for each page. You use next/head to inject those tags into your . It’s simple but really important. Example: import Head from 'next/head'; export default function Page() { return ( Save this post! Hello Guys! ); } No need for external libraries. Just remember to write custom titles and descriptions per route if you don't put the Head component into the layout.tsx file like I just did. Resources and more Information ~ OpenGraph & Social Sharing Ever shared a link and it shows a broken image or weird title? That’s because you forgot OpenGraph tags. These tags control what platforms like Twitter, LinkedIn, WhatsApp, Discord etc. show when someone shares your site. Get these right and people will actually want to click. Minimal OG Setup: Bonus: Add Twitter tags too OG Docs if you’re bored ~ Structured Data with JSON-LD Wanna show up with FAQ boxes, star ratings, breadcrumbs in search results?Structured data is your secret weapon. And Google wants it in JSON-LD format. You can just type it in manually via next/head. Injecting Schema Markup: Real-world tip: Use schema.org to find types that fit your content (e.g., BlogPosting, Product, Course, FAQPage, etc.) ~ Canonical URLs & Duplicate Prevention Google gets confused when the same content is available under multiple URLs. (With or without www, trailing slashes, etc.). That’s why you gotta use canonical URLs, they tell Google “yo, THIS is the real one”. Setup: This is especially important for paginated content, sort filters, or marketing UTM links that technically generate duplicate content. more Information ~ Sitemaps and Robots.txt Sitemaps = helping Google crawl your site Robots.txt = telling Google what NOT to crawl Let’s automate this stuff. Step 1: Install next-sitemap npm install next-sitemap Step 2: Create next-sitemap.config.js module.exports = { siteUrl: 'https://mysite.com', generateRobotsTxt: true, }; Step 3: Add to your package.json "scripts": { "postbuild": "next-sitemap" } Now every time you build, you’ll get /public/sitemap.xml + /public/robots.txt for free. Full next-sitemap docs ~ 2 Bonus Tips Little things, big impact. 1. Avoid Indexing Draft Routes Preview routes, internal tools, staging pages? You don’t want them on Google. Use this on /drafts, /preview, /dashboard, etc. 2. Always Use Absolute URLs in Metadata Relative paths like /preview.png might break previews. Always use full URLs for og:image, canonical, etc. ~ Conclusion SEO in Next.js isn't about tricking the System, but to know it. You tell search engines what your site is, how to read it, and how to show it off to the world. Here’s a quick recap of what we covered: Meta tags for content and previews OpenGraph for rich social shares Structured data for sexy SERPs Canonicals to avoid duplicate hell Auto-sitemaps and robots.txt Bonus tips to keep it clean and pro Don’t wait until your site is live to think about SEO! build it in from day one. Got any questions or SEO tricks? Then comment bro, don't waste your time. NOW! ~ Luan

import Head from 'next/head';

export default function Page() {
  return (
    <>
      <Head>
        <title>Save this post!title>
        <meta name="description" content="Like this post!" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
      Head>
      <main>
        <h1>Hello Guys!h1>
      main>
    
  );
}

<Head>
  <meta property="og:title" content="Check this out!" />
  <meta property="og:description" content="The best SEO guide for Next.js in 2025." />
  <meta property="og:image" content="https://mycdn.com/preview.png" />
  <meta property="og:url" content="https://dev.to/luan_dev" />
  <meta property="og:type" content="website" />
Head>

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:creator" content="@luan_ajeti" />

<Head>
  <script
    type="application/ld+json"
    dangerouslySetInnerHTML={{
      __html: JSON.stringify({
        "@context": "https://schema.org",
        "@type": "Article",
        headline: "Next.js SEO Guide 2025",
        author: {
          "@type": "Person",
          name: "Luan aka. the best Dev",
        },
        datePublished: "2025-04-23",
      }),
    }}
  />
Head>

<Head>
  <link rel="canonical" href="https://mysite.com/blog/seo-2025" />
Head>

npm install next-sitemap

module.exports = {
  siteUrl: 'https://mysite.com',
  generateRobotsTxt: true,
};

"scripts": {
  "postbuild": "next-sitemap"
}

<Head>
  <meta name="robots" content="noindex, nofollow" />
Head>

<meta property="og:image" content="https://mysite.com/og-image.png" />