Technical SEO Patterns
Essential Meta Tags
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Page Title — Brand (50-60 chars)</title>
<meta name="description" content="Page description 150-160 chars, includes primary keyword.">
<link rel="canonical" href="https://example.com/page/">
<!-- OpenGraph -->
<meta property="og:type" content="website">
<meta property="og:title" content="Page Title">
<meta property="og:description" content="Description">
<meta property="og:image" content="https://example.com/og-image.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:url" content="https://example.com/page/">
<meta property="og:site_name" content="Brand">
<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@handle">
<meta name="twitter:title" content="Page Title">
<meta name="twitter:image" content="https://example.com/og-image.jpg">
</head>
Structured Data (JSON-LD)
<!-- Article -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Article",
"headline": "Article Title",
"description": "Article description",
"image": "https://example.com/article-image.jpg",
"author": { "@type": "Person", "name": "Author Name" },
"publisher": {
"@type": "Organization",
"name": "Brand",
"logo": { "@type": "ImageObject", "url": "https://example.com/logo.png" }
},
"datePublished": "2024-01-15",
"dateModified": "2024-01-20"
}
</script>
<!-- Product -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Product",
"name": "Product Name",
"image": "https://example.com/product.jpg",
"description": "Product description",
"offers": {
"@type": "Offer",
"price": "29.99",
"priceCurrency": "USD",
"availability": "https://schema.org/InStock"
},
"aggregateRating": { "@type": "AggregateRating", "ratingValue": "4.8", "reviewCount": "342" }
}
</script>
<!-- BreadcrumbList -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [
{ "@type": "ListItem", "position": 1, "name": "Home", "item": "https://example.com/" },
{ "@type": "ListItem", "position": 2, "name": "Blog", "item": "https://example.com/blog/" },
{ "@type": "ListItem", "position": 3, "name": "Post Title" }
]
}
</script>
Sitemap
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
xmlns:image="http://www.google.com/schemas/sitemap-image/1.1">
<url>
<loc>https://example.com/</loc>
<lastmod>2024-01-20</lastmod>
<changefreq>weekly</changefreq>
<priority>1.0</priority>
</url>
</urlset>
robots.txt
User-agent: *
Allow: /
Disallow: /admin/
Disallow: /api/
Disallow: /*.json$
Crawl-delay: 1
Sitemap: https://example.com/sitemap.xml
Hreflang (Multilingual)
<link rel="alternate" hreflang="en" href="https://example.com/en/page/">
<link rel="alternate" hreflang="es" href="https://example.com/es/page/">
<link rel="alternate" hreflang="x-default" href="https://example.com/en/page/">
Next.js Metadata API
// app/page.tsx
import { Metadata } from 'next';
export const metadata: Metadata = {
title: { default: 'Brand', template: '%s | Brand' },
description: 'Site description',
openGraph: { images: [{ url: '/og.jpg', width: 1200, height: 630 }] },
robots: { index: true, follow: true },
alternates: { canonical: 'https://example.com/page/' },
};
Core Web Vitals SEO Impact
- LCP > 4s → ranking penalty — optimize hero image, TTFB
- CLS > 0.25 → ranking penalty — reserve layout space
- INP > 500ms → ranking penalty — reduce JS blocking
Mattakushi432