SEO Best Practices for Developers: A Technical Guide

Dynamic Meta Tags for Blog Posts

// app/blog/[slug]/page.tsx
export async function generateMetadata({ params }): Promise<Metadata> {
  const post = await getPostBySlug(params.slug);

  return {
    title: post.title,
    description: post.excerpt,
    openGraph: {
      title: post.title,
      description: post.excerpt,
      type: "article",
      publishedTime: post.publishedAt.toISOString(),
      authors: ["Hardik Kanajariya"],
      images: [{ url: post.thumbnail, width: 1200, height: 630 }],
    },
    twitter: {
      card: "summary_large_image",
      title: post.title,
      description: post.excerpt,
      images: [post.thumbnail],
    },
  };
}

Structured Data (JSON-LD)

Add structured data for rich search results:

// Blog post with Article schema
function BlogPost({ post }) {
  const jsonLd = {
    "@context": "https://schema.org",
    "@type": "Article",
    headline: post.title,
    description: post.excerpt,
    image: post.thumbnail,
    author: {
      "@type": "Person",
      name: "Hardik Kanajariya",
      url: "https://hardikkanajariya.in",
      sameAs: [
        "https://www.linkedin.com/in/hardik-kanajariya/",
        "https://x.com/hardik_web",
        "https://www.instagram.com/kanajariyahardik/",
      ],
    },
    publisher: {
      "@type": "Organization",
      name: "Hardik Kanajariya",
    },
    datePublished: post.publishedAt,
    dateModified: post.updatedAt,
  };

  return (
    <>
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
      />
      <article>{/* Post content */}</article>
    </>
  );
}

// Product with Product schema
function ProductPage({ product }) {
  const jsonLd = {
    "@context": "https://schema.org",
    "@type": "Product",
    name: product.name,
    description: product.description,
    image: product.images[0],
    offers: {
      "@type": "Offer",
      price: product.price,
      priceCurrency: "USD",
      availability: "https://schema.org/InStock",
    },
  };

  return (
    <script
      type="application/ld+json"
      dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
    />
  );
}

Sitemap Generation

// app/sitemap.ts
import type { MetadataRoute } from "next";

export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
  const posts = await prisma.post.findMany({
    where: { published: true, deletedAt: null },
    select: { slug: true, updatedAt: true },
  });

  const products = await prisma.product.findMany({
    where: { published: true, deletedAt: null },
    select: { slug: true, updatedAt: true },
  });

  return [
    { url: "https://hardikkanajariya.in", lastModified: new Date(), priority: 1 },
    { url: "https://hardikkanajariya.in/blog", lastModified: new Date(), priority: 0.8 },
    { url: "https://hardikkanajariya.in/store", lastModified: new Date(), priority: 0.8 },
    ...posts.map((post) => ({
      url: `https://hardikkanajariya.in/blog/${post.slug}`,
      lastModified: post.updatedAt,
      priority: 0.6,
    })),
    ...products.map((product) => ({
      url: `https://hardikkanajariya.in/store/${product.slug}`,
      lastModified: product.updatedAt,
      priority: 0.7,
    })),
  ];
}

Core Web Vitals Optimization

Google uses Core Web Vitals as a ranking signal:

Key implementation details in our React 19 Performance Optimization guide.

Image SEO

import Image from "next/image";

<Image
  src="/uploads/2026/02/project-screenshot.webp"
  alt="Developer Portfolio SaaS Platform dashboard showing analytics"
  width={1200}
  height={630}
  priority={isAboveFold}
  loading={isAboveFold ? undefined : "lazy"}
  sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
/>

Always include:

• Descriptive alt text — tell search engines what the image shows
• Proper dimensions — prevents CLS
• WebP format — our platform auto-converts using saveOptimizedImage()
• Lazy loading — for below-the-fold images
• sizes attribute — responsive loading

Internal Linking Strategy

Link between related content to build topical authority:

• Next.js 16 Complete Guide links to Tailwind, React, Prisma guides
• Product posts link to technical guides that explain the underlying tech
• Portfolio posts link to products that powered the projects
• This creates a web of interconnected content that search engines value

Technical SEO Checklist

• Meta title and description on every page
• Open Graph and Twitter Card tags
• Structured data (JSON-LD)
• XML sitemap (auto-generated)
• robots.txt configured
• Canonical URLs set
• Core Web Vitals passing
• Mobile-responsive design
• HTTPS enabled
• Internal linking implemented
• Image alt texts added
• Heading hierarchy (H1 → H6)
• Clean URL structure
• 404 page configured
• Page speed optimized

SEO Built Into Our Platform

All of these SEO patterns are implemented in our Developer Portfolio & SaaS Platform. You get:

• Automatic meta tag generation
• Built-in JSON-LD structured data
• Dynamic sitemap generation
• Core Web Vitals optimized
• SEO-friendly URLs
• Image optimization pipeline
• Blog with SEO features

Related articles:

• Why Every Business Needs a Website
• React 19 Performance Optimization
• Deploying Next.js to Production

Find us on Sulekha and HotFrog — because SEO includes business directories too!

SEO-optimized from the ground up. Our Developer Portfolio & SaaS Platform handles technical SEO so you can focus on content — starting at $299.