Introduction
Metadata is your content's first impression in search results and social shares. A compelling title and description can double your click-through rate even at the same ranking position.
SEO metadata includes title tags, meta descriptions, and Open Graph / Twitter Card tags for social sharing.
This guide covers crafting effective metadata with modern framework implementations.
Key Concepts
Title Tags
Title tags are the most important on-page SEO element. Keep 50-60 characters, include primary keyword near the beginning, make them compelling.
html
<!-- Good -->
<title>Core Web Vitals Guide: LCP, INP & CLS Optimization</title>
<!-- Bad -->
<title>Home</title>
Open Graph Tags
html
<meta property="og:title" content="Core Web Vitals Guide">
<meta property="og:description" content="Master LCP, INP, and CLS.">
<meta property="og:image" content="https://example.com/og.jpg">
<meta name="twitter:card" content="summary_large_image">
Practical Examples
1. Next.js Metadata API
typescript
export async function generateMetadata({ params }) {
const guide = await getGuide(params.slug);
return {
title: guide.seoTitle,
description: guide.metaDescription,
openGraph: {
title: guide.seoTitle,
images: [{ url: guide.ogImage, width: 1200, height: 630 }],
},
twitter: { card: 'summary_large_image' },
};
}
2. Dynamic OG Image Generation
typescript
// app/api/og/route.tsx
import { ImageResponse } from 'next/og';
export async function GET(request) {
const { searchParams } = new URL(request.url);
const title = searchParams.get('title');
return new ImageResponse(
<div style={{ fontSize: 48, background: '#000', color: '#fff',
width: '100%', height: '100%', display: 'flex', alignItems: 'center',
justifyContent: 'center' }}>{title}</div>,
{ width: 1200, height: 630 }
);
}
Best Practices
- ✅ Keep title tags 50-60 characters with keyword near start
- ✅ Write unique meta descriptions for every page
- ✅ Include Open Graph and Twitter Card tags
- ✅ Create OG images at 1200x630px
- ✅ Use template patterns for consistent branding
- ❌ Don't duplicate title tags across pages
- ❌ Don't stuff keywords
Common Pitfalls
- 🚫 Missing meta descriptions — Google generates a worse one
- 🚫 Duplicate titles across pages
- 🚫 OG image too small
- 🚫 Truncated titles — keep under 60 chars