# Examples > Complete SEO recipes and implementation examples for Next.js App Router. This skill should be used when the user asks for "SEO example", "blog SEO setup", "e-commerce SEO", "landing page SEO", "SaaS SEO", "full SEO implementation", "SEO recipe", "SEO template", or needs a complete, copy-paste ready SEO implementation for a specific page type. - Skill: `agents-store/examples-4` (Agent Skill) - Install (CLI): `npx skillmds@latest add agents-store/examples-4` - Raw SKILL.md: https://api.skillmd.com/api/skills/agents-store/examples-4/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Marketing & Growth - Author: agents-store (https://skillmd.com/u/agents-store) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/agents-store/examples-4 --- # SEO Examples & Recipes Complete, production-ready SEO implementations for common page types. Each recipe includes metadata, structured data, and component patterns. ## Recipe 1: Blog with Article Schema ### Root Layout (Sitewide SEO) ```tsx // app/layout.tsx import type { Metadata } from 'next' import { Inter } from 'next/font/google' import { JsonLd } from '@/components/json-ld' import { createOrganization, createWebSite } from '@/lib/schema' const inter = Inter({ subsets: ['latin'], display: 'swap', variable: '--font-sans' }) const SITE_URL = process.env.NEXT_PUBLIC_SITE_URL || 'https://yourblog.com' export const metadata: Metadata = { metadataBase: new URL(SITE_URL), title: { template: '%s | Your Blog', default: 'Your Blog' }, description: 'Insights on web development, SEO, and modern tooling.', openGraph: { type: 'website', siteName: 'Your Blog', locale: 'en_US', }, twitter: { card: 'summary_large_image' }, alternates: { types: { 'application/rss+xml': '/feed.xml' } }, } export default function RootLayout({ children }: { children: React.ReactNode }) { return ( {children} ) } ``` ### Blog Post Page ```tsx // app/blog/[slug]/page.tsx import type { Metadata } from 'next' import Image from 'next/image' import { JsonLd } from '@/components/json-ld' import { createArticle, createBreadcrumbList } from '@/lib/schema' import { Breadcrumbs } from '@/components/breadcrumbs' const SITE_URL = process.env.NEXT_PUBLIC_SITE_URL! interface Props { params: Promise<{ slug: string }> } export async function generateMetadata({ params }: Props): Promise { const { slug } = await params const post = await getPost(slug) if (!post) return {} return { title: post.title, description: post.excerpt, openGraph: { title: post.title, description: post.excerpt, url: `/blog/${slug}`, type: 'article', publishedTime: post.publishedAt, modifiedTime: post.updatedAt, authors: [post.author.name], images: [{ url: post.image, width: 1200, height: 630, alt: post.title }], }, alternates: { canonical: `/blog/${slug}` }, } } export async function generateStaticParams() { const posts = await getAllPostSlugs() return posts.map((slug) => ({ slug })) } export default async function BlogPost({ params }: Props) { const { slug } = await params const post = await getPost(slug) return ( <>

{post.title}

{new Date(post.publishedAt).toLocaleDateString()} {post.title}

) } ``` ### Blog Sitemap ```tsx // app/blog/sitemap.ts import type { MetadataRoute } from 'next' const SITE_URL = process.env.NEXT_PUBLIC_SITE_URL! export default async function sitemap(): Promise { const posts = await getAllPosts() return posts.map((post) => ({ url: `${SITE_URL}/blog/${post.slug}`, lastModified: new Date(post.updatedAt), changeFrequency: 'weekly', priority: 0.7, })) } ``` ## Recipe 2: E-commerce Product Page ```tsx // app/products/[slug]/page.tsx import type { Metadata } from 'next' import Image from 'next/image' import { JsonLd } from '@/components/json-ld' import { createProduct, createBreadcrumbList } from '@/lib/schema' const SITE_URL = process.env.NEXT_PUBLIC_SITE_URL! interface Props { params: Promise<{ slug: string }> } export async function generateMetadata({ params }: Props): Promise { const { slug } = await params const product = await getProduct(slug) if (!product) return {} return { title: `${product.name} — ${product.brand}`, description: `${product.name} by ${product.brand}. ${product.shortDescription}. $${product.price}.`, openGraph: { title: product.name, description: product.shortDescription, url: `/products/${slug}`, type: 'website', images: product.images.map((img) => ({ url: img, width: 1200, height: 630, alt: product.name, })), }, alternates: { canonical: `/products/${slug}` }, } } export default async function ProductPage({ params }: Props) { const { slug } = await params const product = await getProduct(slug) return ( <>

{product.name}

${product.price}

{product.description}

) } ``` ## Recipe 3: Landing Page ```tsx // app/page.tsx import type { Metadata } from 'next' import Image from 'next/image' export const metadata: Metadata = { title: 'Your Product — Tagline in 60 chars', description: 'Clear value proposition in 150-160 characters. Explain what the product does and who it is for.', openGraph: { title: 'Your Product — Tagline', description: 'Clear value proposition for social sharing.', url: '/', type: 'website', images: [{ url: '/og/home.png', width: 1200, height: 630, alt: 'Your Product' }], }, alternates: { canonical: '/' }, } export default function Home() { return ( <>

Your Product Headline

Value proposition paragraph explaining the core benefit.

Features

{/* Feature blocks with H3 subheadings */}

How It Works

{/* Step-by-step with numbered items */}

) } ``` ## Recipe 4: SaaS Pricing Page ```tsx // app/pricing/page.tsx import type { Metadata } from 'next' import type { SoftwareApplication, WithContext } from 'schema-dts' import { JsonLd } from '@/components/json-ld' export const metadata: Metadata = { title: 'Pricing', description: 'Simple, transparent pricing. Free tier available. Pro from $29/mo. Enterprise custom.', openGraph: { title: 'Pricing — Your Product', description: 'Simple, transparent pricing for teams of all sizes.', url: '/pricing', type: 'website', }, alternates: { canonical: '/pricing' }, } export default function PricingPage() { const softwareSchema: WithContext = { '@context': 'https://schema.org', '@type': 'SoftwareApplication', name: 'Your Product', operatingSystem: 'Web', applicationCategory: 'BusinessApplication', offers: [ { '@type': 'Offer', name: 'Free', price: '0', priceCurrency: 'USD', }, { '@type': 'Offer', name: 'Pro', price: '29', priceCurrency: 'USD', billingIncrement: 'P1M', }, ], } return ( <>

Simple Pricing for Every Team

{/* Pricing cards */} ) } ``` ## Recipe 5: Dynamic OG Image for Any Page ```tsx // app/blog/[slug]/opengraph-image.tsx import { ImageResponse } from 'next/og' import { readFile } from 'node:fs/promises' import { join } from 'node:path' export const alt = 'Blog post preview' export const size = { width: 1200, height: 630 } export const contentType = 'image/png' export default async function Image({ params }: { params: Promise<{ slug: string }> }) { const { slug } = await params const post = await getPost(slug) const font = await readFile(join(process.cwd(), 'public/fonts/Inter-Bold.ttf')) return new ImageResponse( (

{post.title}

{post.excerpt}

{post.author.name} {new Date(post.publishedAt).toLocaleDateString()}

), { ...size, fonts: [{ name: 'Inter', data: font, style: 'normal', weight: 700 }] } ) } ``` ## Common Utility: schema.ts See the `structured-data` skill for the complete `lib/schema.ts` factory functions. All recipes above import from this shared file. ## Common Utility: json-ld.tsx ```tsx // components/json-ld.tsx import type { Thing, WithContext } from 'schema-dts' export function JsonLd({ data }: { data: WithContext }) { return (