SEO isn't just for marketers—developers control many factors that determine search rankings. Understanding technical SEO helps you build sites that rank well from the start.
Why Developers Should Care#
- Performance affects rankings directly
- Technical issues block crawling
- Proper markup enables rich results
- Good architecture aids discoverability
- Mistakes are expensive to fix later
Essential Meta Tags#
Basic Tags#
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <!-- Character encoding (must be in first 1024 bytes) -->
5 <meta charset="UTF-8">
6
7 <!-- Viewport for mobile -->
8 <meta name="viewport" content="width=device-width, initial-scale=1">
9
10 <!-- Page title (50-60 characters) -->
11 <title>Primary Keyword - Secondary Keyword | Brand</title>
12
13 <!-- Meta description (150-160 characters) -->
14 <meta name="description" content="Compelling description with keywords that encourages clicks from search results.">
15
16 <!-- Canonical URL -->
17 <link rel="canonical" href="https://example.com/page">
18
19 <!-- Robots directives -->
20 <meta name="robots" content="index, follow">
21</head>Open Graph (Social Sharing)#
1<meta property="og:title" content="Page Title">
2<meta property="og:description" content="Description for social sharing">
3<meta property="og:image" content="https://example.com/image.jpg">
4<meta property="og:url" content="https://example.com/page">
5<meta property="og:type" content="website">
6<meta property="og:site_name" content="Site Name">Twitter Cards#
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@username">
<meta name="twitter:title" content="Page Title">
<meta name="twitter:description" content="Description for Twitter">
<meta name="twitter:image" content="https://example.com/image.jpg">Structured Data#
JSON-LD Format#
1<script type="application/ld+json">
2{
3 "@context": "https://schema.org",
4 "@type": "Article",
5 "headline": "Article Title",
6 "author": {
7 "@type": "Person",
8 "name": "Author Name"
9 },
10 "datePublished": "2024-01-15",
11 "dateModified": "2024-01-20",
12 "image": "https://example.com/image.jpg",
13 "publisher": {
14 "@type": "Organization",
15 "name": "Company Name",
16 "logo": {
17 "@type": "ImageObject",
18 "url": "https://example.com/logo.png"
19 }
20 }
21}
22</script>Common Schema Types#
1// Product
2{
3 "@type": "Product",
4 "name": "Product Name",
5 "image": "https://example.com/product.jpg",
6 "description": "Product description",
7 "brand": { "@type": "Brand", "name": "Brand" },
8 "offers": {
9 "@type": "Offer",
10 "price": "99.99",
11 "priceCurrency": "USD",
12 "availability": "https://schema.org/InStock"
13 },
14 "aggregateRating": {
15 "@type": "AggregateRating",
16 "ratingValue": "4.5",
17 "reviewCount": "100"
18 }
19}
20
21// FAQ
22{
23 "@type": "FAQPage",
24 "mainEntity": [
25 {
26 "@type": "Question",
27 "name": "Question text?",
28 "acceptedAnswer": {
29 "@type": "Answer",
30 "text": "Answer text."
31 }
32 }
33 ]
34}
35
36// Breadcrumbs
37{
38 "@type": "BreadcrumbList",
39 "itemListElement": [
40 { "@type": "ListItem", "position": 1, "name": "Home", "item": "https://example.com" },
41 { "@type": "ListItem", "position": 2, "name": "Category", "item": "https://example.com/category" },
42 { "@type": "ListItem", "position": 3, "name": "Page" }
43 ]
44}URL Structure#
Best Practices#
Good URLs:
✓ https://example.com/blog/seo-guide
✓ https://example.com/products/blue-widget
✓ https://example.com/category/subcategory
Bad URLs:
✗ https://example.com/p?id=123
✗ https://example.com/blog/2024/01/15/post
✗ https://example.com/products/product_name_with_underscores
Handling URL Changes#
1<!-- 301 redirect for permanent moves -->
2<!-- In Next.js -->
3// next.config.js
4module.exports = {
5 async redirects() {
6 return [
7 {
8 source: '/old-page',
9 destination: '/new-page',
10 permanent: true, // 301
11 },
12 ];
13 },
14};Technical Requirements#
Robots.txt#
# robots.txt
User-agent: *
Allow: /
Disallow: /admin/
Disallow: /api/
Disallow: /private/
Sitemap: https://example.com/sitemap.xml
XML Sitemap#
1<?xml version="1.0" encoding="UTF-8"?>
2<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
3 <url>
4 <loc>https://example.com/</loc>
5 <lastmod>2024-01-15</lastmod>
6 <changefreq>daily</changefreq>
7 <priority>1.0</priority>
8 </url>
9 <url>
10 <loc>https://example.com/about</loc>
11 <lastmod>2024-01-10</lastmod>
12 <changefreq>monthly</changefreq>
13 <priority>0.8</priority>
14 </url>
15</urlset>Dynamic Sitemap (Next.js)#
1// app/sitemap.ts
2import { getAllPosts, getAllProducts } from '@/lib/data';
3
4export default async function sitemap() {
5 const posts = await getAllPosts();
6 const products = await getAllProducts();
7
8 const postUrls = posts.map((post) => ({
9 url: `https://example.com/blog/${post.slug}`,
10 lastModified: post.updatedAt,
11 }));
12
13 const productUrls = products.map((product) => ({
14 url: `https://example.com/products/${product.slug}`,
15 lastModified: product.updatedAt,
16 }));
17
18 return [
19 { url: 'https://example.com', lastModified: new Date() },
20 { url: 'https://example.com/about', lastModified: new Date() },
21 ...postUrls,
22 ...productUrls,
23 ];
24}Performance and SEO#
Core Web Vitals Impact#
Google uses Core Web Vitals as ranking factors:
- LCP (Largest Contentful Paint): < 2.5s
- FID/INP (Interaction to Next Paint): < 200ms
- CLS (Cumulative Layout Shift): < 0.1
Mobile-First Indexing#
1<!-- Mobile-friendly viewport -->
2<meta name="viewport" content="width=device-width, initial-scale=1">
3
4<!-- Responsive images -->
5<img srcset="small.jpg 400w, medium.jpg 800w, large.jpg 1200w"
6 sizes="(max-width: 400px) 400px, (max-width: 800px) 800px, 1200px"
7 src="medium.jpg" alt="Description">JavaScript SEO#
Server-Side Rendering#
1// Next.js - pages are SSR by default
2export async function getServerSideProps() {
3 const data = await fetchData();
4 return { props: { data } };
5}
6
7// Or static generation
8export async function getStaticProps() {
9 const data = await fetchData();
10 return { props: { data }, revalidate: 3600 };
11}Dynamic Rendering#
1// Serve pre-rendered HTML to bots
2// Detect in middleware
3export function middleware(request) {
4 const userAgent = request.headers.get('user-agent');
5 const isBot = /googlebot|bingbot|yandex/i.test(userAgent);
6
7 if (isBot) {
8 // Serve cached/pre-rendered version
9 }
10}International SEO#
Hreflang Tags#
<link rel="alternate" hreflang="en" href="https://example.com/page">
<link rel="alternate" hreflang="es" href="https://example.com/es/page">
<link rel="alternate" hreflang="fr" href="https://example.com/fr/page">
<link rel="alternate" hreflang="x-default" href="https://example.com/page">URL Structures#
Subdirectories (recommended):
example.com/en/page
example.com/es/page
Subdomains:
en.example.com/page
es.example.com/page
ccTLDs (for country targeting):
example.com (US)
example.co.uk (UK)
Common Mistakes#
Blocking Resources#
❌ Blocking CSS/JS in robots.txt
❌ Using noindex on important pages
❌ Incorrect canonical tags
❌ Missing alt text on images
❌ Duplicate content without canonicals
Technical Issues#
❌ Slow page speed
❌ Non-mobile-friendly pages
❌ Broken links (404s)
❌ Redirect chains
❌ Missing HTTPS
Testing and Validation#
Tools#
- Google Search Console (index status, errors)
- Google Rich Results Test (structured data)
- PageSpeed Insights (performance)
- Mobile-Friendly Test
- Screaming Frog (crawl analysis)
Validation Checklist#
□ All pages have unique titles and descriptions
□ Structured data validates without errors
□ No crawl errors in Search Console
□ Sitemap is submitted and valid
□ Core Web Vitals pass
□ Mobile usability is good
□ No broken links
□ HTTPS is enforced
Conclusion#
Technical SEO is about making your site easy for search engines to crawl, understand, and rank. Get the fundamentals right—proper meta tags, structured data, clean URLs, fast performance—and you've laid the foundation for organic growth.
SEO isn't magic; it's engineering. Apply the same rigor you bring to code, and your sites will rank.