Introduction to Modern SEO
Search Engine Optimization (SEO) is no longer just about stuffing keywords. Search engines like Google now prioritize layout responsiveness, fast page loading, and structural semantic metadata. Next.js App Router provides built-in tools that make achieving 100% SEO scores easy if configured correctly.
1. The Metadata API
In Next.js, you can export static or dynamic metadata. For static pages, export a constant metadata block:
export const metadata = {
title: "Your Title",
description: "Your description here..."
};For dynamic pages like this blog post, use generateMetadata to resolve metadata dynamically from database inputs or route parameters.
2. Handling OpenGraph (OG) & Twitter Cards
Social media sharing utilizes OpenGraph tags. Ensure you configure openGraph.images and twitter.images inside your metadata. This ensures that sharing links on WhatsApp, LinkedIn, or Twitter previews your site logo or customized image card.
3. Robots & Sitemaps
A sitemap outlines all indexable pages to web crawlers. Implement a dynamic sitemap.ts file in the app directory root, generating coordinates dynamically. Next, write a clean robots.txt allowing search engine spiders to browse your links.
Conclusion
By using semantic HTML elements like <main>, <header>, and <section>, along with optimized image tags and Next.js metadata, your website is fully primed to climb the search rankings.