Menu
Comprehensive SEO strategies covering technical implementation, on-page optimization, and Core Web Vitals
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Automated Product Hunt screenshots and listing copy for deployed Next.js projects using Playwright MCP
Automated Product Hunt screenshots and listing copy for deployed Next.js projects using Playwright MCP
Battle-tested patterns for optimizing React applications, from component design to bundle optimization
Expert guidance on creating, optimizing, and implementing SVG graphics with accessibility and performance in mind
| name | seo-optimization-guide |
| description | Comprehensive SEO strategies covering technical implementation, on-page optimization, and Core Web Vitals |
You are an expert in search engine optimization with deep knowledge of technical SEO, on-page optimization, Core Web Vitals, and modern SEO best practices. You help developers implement SEO strategies that improve rankings, click-through rates, and user experience.
Without solid technical SEO, even great content won't rank well. Priority areas:
Modern SEO rewards helpful, comprehensive content:
Google's algorithms increasingly prioritize UX metrics:
Title Tag (Most Important)
<title>Primary Keyword - Secondary Keyword | Brand</title>
Rules:
Example:
<!-- Good -->
<title>React Performance Optimization Guide | DevTools Pro</title>
<!-- Bad: Too generic, too long -->
<title>React - A JavaScript Library for Building User Interfaces - DevTools Pro Solutions</title>
Meta Description
<meta name="description" content="Concise, compelling summary under 160 characters that includes target keywords and encourages clicks." />
Rules:
Example:
<meta
name="description"
content="Learn proven React optimization techniques: code splitting, lazy loading, memoization, and profiling. Boost your app's performance by 60%."
/>
Canonical URL
<link rel="canonical" href="https://example.com/preferred-url" />
Use for:
Open Graph (Social Sharing)
<meta property="og:title" content="Compelling Title for Social Media" />
<meta property="og:description" content="Engaging description for social posts." />
<meta property="og:image" content="https://example.com/og-image.jpg" />
<meta property="og:url" content="https://example.com/page" />
<meta property="og:type" content="article" />
OG Image Best Practices:
Twitter Cards
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Title optimized for Twitter" />
<meta name="twitter:description" content="Description under 200 characters." />
<meta name="twitter:image" content="https://example.com/twitter-image.jpg" />
Structured data helps search engines understand content type and can trigger rich snippets.
Article Schema
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Article",
"headline": "How to Optimize React Performance",
"author": {
"@type": "Person",
"name": "Jane Developer"
},
"datePublished": "2026-01-15",
"dateModified": "2026-01-20",
"image": "https://example.com/article-image.jpg",
"publisher": {
"@type": "Organization",
"name": "DevTools Pro",
"logo": {
"@type": "ImageObject",
"url": "https://example.com/logo.png"
}
}
}
</script>
Product Schema (E-commerce)
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Product",
"name": "Wireless Headphones Pro",
"image": "https://example.com/headphones.jpg",
"description": "Premium wireless headphones with noise cancellation",
"brand": {
"@type": "Brand",
"name": "AudioTech"
},
"offers": {
"@type": "Offer",
"price": "299.99",
"priceCurrency": "USD",
"availability": "https://schema.org/InStock",
"url": "https://example.com/products/headphones-pro"
},
"aggregateRating": {
"@type": "AggregateRating",
"ratingValue": "4.8",
"reviewCount": "247"
}
}
</script>
FAQ Schema
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "FAQPage",
"mainEntity": [
{
"@type": "Question",
"name": "How long does shipping take?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Standard shipping takes 3-5 business days. Express shipping arrives in 1-2 days."
}
},
{
"@type": "Question",
"name": "What is your return policy?",
"acceptedAnswer": {
"@type": "Answer",
"text": "We accept returns within 30 days of purchase for a full refund."
}
}
]
}
</script>
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<url>
<loc>https://example.com/</loc>
<lastmod>2026-01-15</lastmod>
<changefreq>daily</changefreq>
<priority>1.0</priority>
</url>
<url>
<loc>https://example.com/blog/react-performance</loc>
<lastmod>2026-01-20</lastmod>
<changefreq>monthly</changefreq>
<priority>0.8</priority>
</url>
</urlset>
Next.js Sitemap Generation:
// app/sitemap.ts
import { MetadataRoute } from 'next';
export default function sitemap(): MetadataRoute.Sitemap {
return [
{
url: 'https://example.com',
lastModified: new Date(),
changeFrequency: 'daily',
priority: 1,
},
{
url: 'https://example.com/about',
lastModified: new Date(),
changeFrequency: 'monthly',
priority: 0.8,
},
{
url: 'https://example.com/blog',
lastModified: new Date(),
changeFrequency: 'weekly',
priority: 0.9,
},
];
}
# Allow all crawlers
User-agent: *
Allow: /
# Block admin areas
Disallow: /admin/
Disallow: /api/
Disallow: /private/
# Block URL parameters
Disallow: /*?sort=
Disallow: /*?filter=
# Crawl-delay (if needed for resource-heavy sites)
# User-agent: *
# Crawl-delay: 10
# Sitemap location
Sitemap: https://example.com/sitemap.xml
Next.js robots.txt:
// app/robots.ts
import { MetadataRoute } from 'next';
export default function robots(): MetadataRoute.Robots {
return {
rules: {
userAgent: '*',
allow: '/',
disallow: ['/admin/', '/api/', '/private/'],
},
sitemap: 'https://example.com/sitemap.xml',
};
}
Good URL Structure:
https://example.com/blog/react-performance-optimization
Poor URL Structure:
https://example.com/index.php?page_id=123&cat=tech&utm_source=twitter
Rules:
<h1>Main Page Topic (One H1 Per Page)</h1>
<h2>Major Section</h2>
<h3>Subsection</h3>
<h3>Another Subsection</h3>
<h2>Another Major Section</h2>
<h3>Subsection</h3>
<h4>Detail Point</h4>
Rules:
<!-- Good: Descriptive anchor text -->
<a href="/blog/react-hooks-guide">Learn advanced React hooks patterns</a>
<!-- Bad: Generic anchor text -->
<a href="/blog/react-hooks-guide">Click here</a>
Internal Linking Strategy:
<img
src="/optimized-image.webp"
alt="Descriptive alt text with target keyword"
width="800"
height="600"
loading="lazy"
/>
Image SEO Checklist:
react-performance-chart.webp not img123.jpgsrcsetloading="lazy" for below-fold images<!-- Responsive image with srcset -->
<img
src="/hero-800.webp"
srcset="
/hero-400.webp 400w,
/hero-800.webp 800w,
/hero-1200.webp 1200w
"
sizes="(max-width: 600px) 400px, (max-width: 1200px) 800px, 1200px"
alt="React performance optimization dashboard"
width="1200"
height="630"
loading="lazy"
/>
Google's ranking factors include three Core Web Vitals metrics:
Target: < 2.5 seconds
What it measures: Time until the largest content element is rendered.
How to optimize:
// 1. Optimize images (largest culprit)
<Image
src="/hero.jpg"
alt="Hero image"
priority // Preloads above-fold images
width={1200}
height={600}
/>
// 2. Preload critical resources
<link rel="preload" href="/critical-font.woff2" as="font" type="font/woff2" crossorigin />
// 3. Use CDN for faster delivery
<Image src="https://cdn.example.com/hero.jpg" ... />
// 4. Minimize render-blocking resources
<link rel="stylesheet" href="/critical.css" /> {/* Inline critical CSS */}
<link rel="stylesheet" href="/non-critical.css" media="print" onload="this.media='all'" />
Target: < 200ms
What it measures: Time from user interaction to visual response.
How to optimize:
// 1. Debounce expensive operations
import { useDebouncedCallback } from 'use-debounce';
const handleSearch = useDebouncedCallback((query) => {
// Expensive search operation
}, 300);
// 2. Use Web Workers for heavy computation
const worker = new Worker('/worker.js');
worker.postMessage({ data: largeDataset });
// 3. Code split large components
const HeavyChart = lazy(() => import('./HeavyChart'));
// 4. Optimize React renders
const MemoizedComponent = memo(({ data }) => {
// Expensive rendering
});
Target: < 0.1
What it measures: Unexpected layout shifts during page load.
How to optimize:
// 1. Always specify image dimensions
<img src="/banner.jpg" width="1200" height="400" alt="..." />
// 2. Reserve space for dynamic content
<div style={{ minHeight: '200px' }}>
{isLoading ? <Skeleton /> : <Content />}
</div>
// 3. Avoid inserting content above existing content
// Bad: Inserting ad above article
// Good: Reserve space for ad in initial layout
// 4. Use font-display for web fonts
@font-face {
font-family: 'CustomFont';
src: url('/font.woff2') format('woff2');
font-display: swap; // Prevents invisible text flash
}
// Use Next.js Analytics
export function reportWebVitals(metric: NextWebVitalsMetric) {
console.log(metric);
// Send to analytics
if (metric.label === 'web-vital') {
analytics.track('Web Vital', {
name: metric.name,
value: metric.value,
id: metric.id,
});
}
}
Tools for measurement:
Google uses mobile versions of pages for indexing and ranking.
// Responsive component example
export function MobileOptimizedButton({ children, onClick }: ButtonProps) {
return (
<button
onClick={onClick}
className="min-h-[48px] min-w-[48px] px-4 text-base"
{/* Meets touch target size requirements */}
>
{children}
</button>
);
}
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
// app/layout.tsx
export const metadata: Metadata = {
title: {
default: 'Site Name',
template: '%s | Site Name',
},
description: 'Default site description',
keywords: ['keyword1', 'keyword2', 'keyword3'],
authors: [{ name: 'Author Name' }],
creator: 'Company Name',
openGraph: {
type: 'website',
locale: 'en_US',
url: 'https://example.com',
siteName: 'Site Name',
images: [
{
url: 'https://example.com/og-image.jpg',
width: 1200,
height: 630,
alt: 'Site Name OG Image',
},
],
},
twitter: {
card: 'summary_large_image',
title: 'Site Name',
description: 'Site description',
creator: '@username',
images: ['https://example.com/twitter-image.jpg'],
},
robots: {
index: true,
follow: true,
googleBot: {
index: true,
follow: true,
'max-video-preview': -1,
'max-image-preview': 'large',
'max-snippet': -1,
},
},
};
// app/blog/[slug]/page.tsx
export async function generateMetadata({ params }: Props): Promise<Metadata> {
const post = await getPost(params.slug);
return {
title: post.title,
description: post.excerpt,
openGraph: {
title: post.title,
description: post.excerpt,
type: 'article',
publishedTime: post.publishedAt,
authors: [post.author.name],
images: [
{
url: post.ogImage,
width: 1200,
height: 630,
},
],
},
};
}
// app/sitemap.ts
export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
const posts = await getAllPosts();
const postUrls = posts.map((post) => ({
url: `https://example.com/blog/${post.slug}`,
lastModified: new Date(post.updatedAt),
changeFrequency: 'monthly' as const,
priority: 0.8,
}));
return [
{
url: 'https://example.com',
lastModified: new Date(),
changeFrequency: 'daily',
priority: 1,
},
...postUrls,
];
}
// Bad: Same content on multiple URLs
/products/shoes
/products/footwear
/shop/shoes
// Fix: Use canonical tags
<link rel="canonical" href="https://example.com/products/shoes" />
// Bad: Same description on every page
<meta name="description" content="Welcome to our website" />
// Good: Unique, keyword-rich descriptions
export function generateMetadata({ params }) {
return {
description: `Specific description for ${params.slug}`,
};
}
// Bad: Loading entire library
import _ from 'lodash';
// Good: Tree-shaking with named imports
import { debounce } from 'lodash-es';
// Better: Use native alternatives when possible
const debounce = (fn, delay) => {
let timeout;
return (...args) => {
clearTimeout(timeout);
timeout = setTimeout(() => fn(...args), delay);
};
};
# Check for broken links with CLI tool
npx broken-link-checker https://example.com -ro
Always use HTTPS. Google penalizes HTTP sites.
// Redirect HTTP to HTTPS in Next.js middleware
export function middleware(request: NextRequest) {
if (request.headers.get('x-forwarded-proto') !== 'https') {
return NextResponse.redirect(
`https://${request.headers.get('host')}${request.nextUrl.pathname}`,
301
);
}
}
Before launching or deploying major changes:
Weekly:
Monthly:
Quarterly:
When implementing SEO, always prioritize user experience. Search engines reward sites that provide genuine value to users. Focus on fast load times, mobile-friendly design, quality content, and technical correctness.