SEONext.jsBest Practices

Building SEO-Ready Next.js Apps from Day One

3 May 2026 · by Yunmin Shin

Why Does Technical SEO Matter at the Code Level?

SEO is not just about content and backlinks — it starts with how your website is built. A technically sound website gives search engines the signals they need to index and rank your pages correctly. Next.js, when configured properly, produces some of the best technical SEO output of any web framework.

Getting SEO right at the start of a project costs very little. Retrofitting SEO into a poorly structured codebase is expensive and often incomplete.

How Do You Handle Metadata in Next.js?

Next.js App Router provides a typed Metadata API. Export a metadata object or a generateMetadata function from any page.tsx file:

export async function generateMetadata({ params }): Promise<Metadata> {
  const product = await getProduct(params.slug);
  return {
    title: `${product.name} | YourStore`,
    description: product.description.slice(0, 155),
    openGraph: {
      images: [product.imageUrl],
    },
    alternates: {
      canonical: `https://yoursite.com/products/${params.slug}`,
    },
  };
}

Always include: title, description (under 160 characters), openGraph images, and canonical URLs. The canonical URL prevents duplicate content penalties when the same page is accessible via multiple URLs.

How Do You Add Structured Data?

Structured data (JSON-LD) helps search engines understand your content and enables rich results — star ratings, prices, event dates — in search listings. Add a <script type="application/ld+json"> tag in your page component:

const jsonLd = {
  "@context": "https://schema.org",
  "@type": "Product",
  name: product.name,
  offers: { "@type": "Offer", price: product.price, priceCurrency: "THB" },
};

Use schema types appropriate to your content: Product, Article, LocalBusiness, FAQPage. For Bangkok local businesses, LocalBusiness with a Thai address and Google Maps coordinates improves local search visibility.

How Do You Generate a Sitemap?

Create a app/sitemap.ts file that exports a default function returning your sitemap entries:

export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
  const posts = await getAllPosts();
  return posts.map((post) => ({
    url: `https://yoursite.com/blog/${post.slug}`,
    lastModified: post.updatedAt,
    changeFrequency: "weekly",
    priority: 0.8,
  }));
}

Next.js serves this at /sitemap.xml automatically. Submit the URL in Google Search Console after deployment.

What About Page Speed and SEO?

Core Web Vitals are a confirmed Google ranking signal. Pages with poor LCP, INP, or CLS scores rank lower than equivalent pages with good scores. The Next.js Image component, font optimization (next/font), and avoiding render-blocking scripts are the three highest-impact technical SEO improvements you can make to any Bangkok website.

Enable next/font to serve fonts from Vercel's CDN, eliminating the layout shift and latency of Google Fonts.