Next.js Blog SEO: How to Implement Metadata for Maximum Visibility

Metadata is crucial for improving SEO and ensuring your blog appears attractive when shared on social media platforms. In this guide, we’ll walk through implementing the generateMetadata function in Next.js to enhance your blog's visibility and engagement.

Step 1: Understanding generateMetadata

In Next.js 13+ with the App Router, generateMetadata is a special function used to dynamically generate metadata for a page. This function is ideal for blog posts as it allows customization based on the content.

Why Use generateMetadata?

• Improves SEO ranking by providing structured metadata.

• Enhances social sharing with Open Graph and Twitter metadata.

• Helps search engines and social platforms understand the page content.

Step 2: Fetch Blog Data in generateMetadata

To generate metadata dynamically, we need to fetch the blog data from the database using Prisma.

export async function generateMetadata({ params }, parent) {
  const previousImages = (await parent).openGraph?.images || [];
  const blogUrl = `https://sagarsangwan.vercel.app/blogs/${params.slug}`;
// Fetch blog details from Prisma
  const currentBlog = await prisma.Blog.findUnique({
    where: { slug: params.slug },
    select: {
      title: true,
      description: true,
      coverImage: true,
      createdAt: true,
      updatedAt: true,
      author: { select: { name: true } },
    },
  });
  if (!currentBlog) {
    return {
      title: "Blog Not Found",
      description: "This blog post is not available.",
    };
  }
  const blogTags = await prisma.BlogTag.findMany({
    where: { blogId: currentBlog.id },
    select: { tag: { select: { name: true } } },
  });

Step 3: Setting Up Open Graph Metadata

Open Graph tags improve how your blog appears when shared on Facebook, LinkedIn, and other platforms.

return {
    title: currentBlog.title,
    description: currentBlog.description,
    alternates: { canonical: blogUrl },
    openGraph: {
      type: "article",
      url: blogUrl,
      title: currentBlog.title,
      description: currentBlog.description,
      images: [
        {
          url: currentBlog.coverImage,
          width: 1200,
          height: 630,
          alt: currentBlog.title,
        },
      ],
      siteName: "Blogs By Sagar Sangwan",
      article: {
        publishedTime: currentBlog.createdAt.toISOString(),
        modifiedTime: currentBlog.updatedAt.toISOString(),
        authors: [currentBlog.author.name],
        tags: blogTags.map((tag) => tag.tag.name),
      },
    },

Step 4: Adding Twitter Card Metadata

Twitter cards ensure that your blog appears well-formatted when shared on Twitter.

twitter: {
      card: "summary_large_image",
      site: "@yourTwitterHandle",
      title: currentBlog.title,
      description: currentBlog.description,
      image: currentBlog.coverImage,
    },

Step 5: Adding JSON-LD Structured Data

Structured data helps search engines like Google understand the blog content better, improving SEO.

other: {
      "application/ld+json": JSON.stringify({
        "@context": "https://schema.org",
        "@type": "BlogPosting",
        headline: currentBlog.title,
        description: currentBlog.description,
        image: currentBlog.coverImage,
        author: {
          "@type": "Person",
          name: currentBlog.author.name,
        },
        publisher: {
          "@type": "Organization",
          name: "Sagar Sangwan",
          logo: {
            "@type": "ImageObject",
            url: "https://sagarsangwan.vercel.app/logo.png",
          },
        },
        datePublished: currentBlog.createdAt.toISOString(),
        dateModified: currentBlog.updatedAt.toISOString(),
        url: blogUrl,
        mainEntityOfPage: {
          "@type": "WebPage",
          "@id": blogUrl,
        },
      }),
    },
  };
}

Conclusion

By implementing generateMetadata, we ensure that each blog post has optimized metadata for search engines and social platforms. This enhances discoverability, increases engagement, and improves the overall user experience.

🔥 Found this blog post helpful? 🔥

If you enjoyed this article and found it valuable, please show your support by clapping 👏 and subscribing to my blog for more in-depth insights on web development and Next.js!

Subscribe here: click me

Your encouragement helps me continue creating high-quality content that can assist you on your development journey. 🚀