SEO-Optimized HTML Markup — Complete Technical Guide
Technical HTML markup is one of the most impactful and underutilized SEO levers. Proper semantic HTML, structured data (JSON-LD), canonical tags, Open Graph markup, Core Web Vitals optimization, and hreflang for international sites can significantly improve search rankings, click-through rates, and social sharing performance. This guide covers every technical HTML SEO element with complete, copy-paste ready examples and explains the ranking impact of each decision.
Structured data
JSON-LD enables rich snippets in search results
Core Web Vitals
LCP, CLS, FID — Google ranking signals since 2021
Canonical
prevents duplicate content penalties across URLs
Open Graph
controls appearance in social media link previews
1
Essential SEO Meta Tags
The three most impactful meta elements
The <title> tag (directly shown in search results), meta description(controls click-through rate), and canonical (prevents duplicate content penalties) are the three meta elements with the most direct ranking and traffic impact. Every other optimization builds on these foundations.
htmlComplete SEO head section — all critical meta tags
<head>
<!-- ─── Required for all pages ────────────────────────────────────────────── -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Title: 50-60 chars, primary keyword first, unique per page, brand at end -->
<title>Fix CORS Errors in JavaScript — Complete Guide | Unblock Devs</title>
<!-- Description: 150-160 chars. This is the snippet text in search results.
Write for humans — it directly affects click-through rate, not ranking. -->
<meta name="description"
content="Fix every CORS error in JavaScript and Node.js. Step-by-step solutions for preflight requests, missing headers, and proxy configs. Used by 80,000+ developers.">
<!-- Canonical: prevents duplicate content from query params, trailing slashes, etc.
Always self-canonical: the canonical of a page points to itself. -->
<link rel="canonical" href="https://unblockdevs.com/blog/fix-cors-errors-javascript">
<!-- ─── Crawl control ──────────────────────────────────────────────────────── -->
<meta name="robots" content="index, follow">
<!-- Common values:
noindex — exclude from search (thank-you pages, internal search results)
nofollow — don't follow outbound links (untrusted user-generated content)
noarchive — don't show Cached link in search results
nosnippet — no description snippet, no featured snippet eligibility
-->
<!-- ─── Open Graph (Facebook, LinkedIn, WhatsApp, Slack previews) ─────────── -->
<meta property="og:type" content="article">
<meta property="og:title" content="Fix CORS Errors in JavaScript — Complete Guide">
<meta property="og:description" content="Fix every CORS error with working code examples.">
<meta property="og:image" content="https://unblockdevs.com/og/fix-cors-errors.jpg">
<!-- OG image: 1200×630px minimum, 2400×1260px for retina. Under 8MB. -->
<meta property="og:url" content="https://unblockdevs.com/blog/fix-cors-errors-javascript">
<meta property="og:site_name" content="Unblock Devs">
<meta property="article:published_time" content="2024-01-15T08:00:00Z">
<meta property="article:modified_time" content="2024-03-01T12:00:00Z">
<meta property="article:section" content="JavaScript">
<!-- ─── Twitter/X Cards ───────────────────────────────────────────────────── -->
<meta name="twitter:card" content="summary_large_image">
<!-- summary: small image left of text | summary_large_image: full-width image -->
<meta name="twitter:title" content="Fix CORS Errors in JavaScript">
<meta name="twitter:description" content="Every CORS fix with working examples.">
<meta name="twitter:image" content="https://unblockdevs.com/og/fix-cors-errors.jpg">
<meta name="twitter:site" content="@unblockdevs">
<!-- ─── Alternate languages (hreflang) ────────────────────────────────────── -->
<link rel="alternate" hreflang="en" href="https://unblockdevs.com/blog/fix-cors">
<link rel="alternate" hreflang="es" href="https://unblockdevs.com/es/blog/fix-cors">
<link rel="alternate" hreflang="x-default" href="https://unblockdevs.com/blog/fix-cors">
<!-- x-default: fallback for languages not explicitly listed -->
<!-- ─── Performance prefetch hints ───────────────────────────────────────── -->
<link rel="preconnect" href="https://fonts.googleapis.com"> <!-- DNS + TCP + TLS -->
<link rel="dns-prefetch" href="https://analytics.example.com"> <!-- DNS only -->
<link rel="preload" as="image" href="/hero.jpg"> <!-- Load early -->
</head>2
Structured Data (JSON-LD) — Rich Snippets
JSON-LD structured data tells Google exactly what your content is about, enabling rich snippets: star ratings, FAQ dropdowns, how-to steps, breadcrumbs, event dates, and product prices directly in search results. Rich snippets dramatically improve click-through rates — FAQPage markup can increase CTR by 20–30% by showing your content before users even click.
htmlJSON-LD structured data — Article, FAQ, HowTo, BreadcrumbList
<!-- ─── Article / TechArticle ─────────────────────────────────────────────── -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "TechArticle",
"headline": "Fix CORS Errors in JavaScript — Complete Guide",
"description": "Every CORS fix with working code examples.",
"image": ["https://unblockdevs.com/og/fix-cors-errors.jpg"],
"datePublished": "2024-01-15T08:00:00Z",
"dateModified": "2024-03-01T12:00:00Z",
"author": {"@type": "Organization", "name": "Unblock Devs",
"url": "https://unblockdevs.com"},
"publisher": {
"@type": "Organization",
"name": "Unblock Devs",
"logo": {"@type": "ImageObject",
"url": "https://unblockdevs.com/logo.png",
"width": 600, "height": 60}
},
"mainEntityOfPage": {"@type": "WebPage",
"@id": "https://unblockdevs.com/blog/fix-cors-errors-javascript"}
}
</script>
<!-- ─── FAQPage — enables FAQ dropdowns in Google results ──────────────────── -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "FAQPage",
"mainEntity": [
{
"@type": "Question",
"name": "What causes CORS errors in JavaScript?",
"acceptedAnswer": {
"@type": "Answer",
"text": "CORS errors occur when a browser request crosses domain origins (different domain, protocol, or port) and the server doesn't include the required Access-Control-Allow-Origin header."
}
},
{
"@type": "Question",
"name": "How do I fix CORS in Node.js Express?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Install the cors npm package: npm install cors. Then add: app.use(cors({ origin: 'https://yourfrontend.com' })) before your route handlers."
}
}
]
}
</script>
<!-- ─── BreadcrumbList — shows path in search result URL ───────────────────── -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [
{"@type": "ListItem", "position": 1, "name": "Home",
"item": "https://unblockdevs.com"},
{"@type": "ListItem", "position": 2, "name": "Blog",
"item": "https://unblockdevs.com/blog"},
{"@type": "ListItem", "position": 3, "name": "Fix CORS Errors",
"item": "https://unblockdevs.com/blog/fix-cors-errors-javascript"}
]
}
</script>
<!-- ─── HowTo — step-by-step rich results ──────────────────────────────────── -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "HowTo",
"name": "How to Fix CORS Errors in Express.js",
"step": [
{"@type": "HowToStep", "position": 1,
"name": "Install cors package",
"text": "Run: npm install cors in your project directory."},
{"@type": "HowToStep", "position": 2,
"name": "Add cors middleware",
"text": "Add app.use(cors()) before your route definitions."},
{"@type": "HowToStep", "position": 3,
"name": "Configure allowed origins",
"text": "Pass options: app.use(cors({ origin: 'https://yourapp.com' }))"}
]
}
</script>3
Semantic HTML for SEO
htmlSemantic page structure that search engines prefer
<body>
<header>
<nav aria-label="Main navigation">
<ul>
<li><a href="/tools">Tools</a></li>
<li><a href="/blog">Blog</a></li>
</ul>
</nav>
</header>
<main>
<article itemscope itemtype="https://schema.org/TechArticle">
<!-- ONE h1 per page — your primary keyword -->
<h1 itemprop="headline">Fix CORS Errors in JavaScript — Complete Guide</h1>
<div itemprop="author" itemscope itemtype="https://schema.org/Organization">
By <span itemprop="name">Unblock Devs</span>
</div>
<!-- Machine-readable date for Google's freshness signals -->
<time itemprop="datePublished" datetime="2024-01-15">January 15, 2024</time>
<time itemprop="dateModified" datetime="2024-03-01">Updated March 1, 2024</time>
<!-- Breadcrumb navigation for UX and SEO -->
<nav aria-label="Breadcrumb">
<ol itemscope itemtype="https://schema.org/BreadcrumbList">
<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
<a itemprop="item" href="/"><span itemprop="name">Home</span></a>
<meta itemprop="position" content="1">
</li>
<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
<a itemprop="item" href="/blog"><span itemprop="name">Blog</span></a>
<meta itemprop="position" content="2">
</li>
<li>Fix CORS Errors</li>
</ol>
</nav>
<section>
<h2>What Causes CORS Errors?</h2> <!-- h2 for major sections -->
<p>Content with natural keyword usage...</p>
<h3>Same-Origin Policy Explained</h3> <!-- h3 for subsections -->
<p>Subsection content...</p>
</section>
<!-- Internal links: ALWAYS use descriptive anchor text -->
<a href="/blog/fix-cors-node-express">Fix CORS in Node.js Express</a>
<!-- NOT: "click here" or "learn more" — search engines use anchor text -->
<!-- External links to authoritative sources signal quality -->
<a href="https://developer.mozilla.org/cors" rel="noopener">
MDN CORS Documentation
</a>
</article>
<aside aria-label="Related articles">
<h2>Related Articles</h2>
<!-- Related internal links pass PageRank and help Google understand topical relevance -->
</aside>
</main>
<footer>
<nav aria-label="Footer navigation">
<a href="/sitemap.xml">Sitemap</a>
</nav>
</footer>
</body>4
Core Web Vitals Optimization
| Item | Core Web Vital | What It Measures and How to Optimize |
|---|---|---|
| LCP — Largest Contentful Paint | How fast the largest visible element loads. Target: <2.5 seconds | Preload hero image: <link rel="preload" as="image" href="hero.jpg">. Use next/image for auto optimization. Serve images from CDN. |
| CLS — Cumulative Layout Shift | How much layout jumps during load. Target: <0.1 score | Always set width/height on img and video. Reserve space for ads. Avoid inserting DOM content above existing content after load. |
| FID/INP — Interaction Delay | How fast the page responds to user input. Target: <200ms | Break up long JavaScript tasks. Use web workers for heavy computation. Defer non-critical scripts. Avoid blocking the main thread. |
| FCP — First Contentful Paint | When first text or image is painted. Target: <1.8 seconds | Inline critical CSS. Preconnect to font servers. Avoid render-blocking scripts. Use next/font for automatic font optimization. |
Image optimization for rankings
Serve WebP (30–50% smaller than JPEG) with JPEG fallback via <picture>. Use srcset for responsive images. Always lazy-load below-fold images (loading="lazy") and eager-load hero images (loading="eager"). Never serve 2MB+ images for 400px display slots.
Critical CSS inlining
Inline CSS needed for above-the-fold rendering directly in <style> tags in <head>. Defer the full stylesheet with <link rel="stylesheet" media="print" onload="this.media='all'">. Eliminates render-blocking CSS — measurably improves FCP and LCP.
Script loading strategies
<script defer>: downloads in parallel, executes after HTML parsed (use for most scripts). <script async>: downloads in parallel, executes immediately when downloaded (use for independent scripts like analytics). Never use <script> in <head> without defer/async.
Font loading without layout shift
Use font-display: swap in @font-face (shows fallback immediately, swaps when font loads). Preconnect to Google Fonts: <link rel="preconnect" href="https://fonts.googleapis.com">. Use next/font in Next.js for automatic font optimization with zero layout shift.
5
Canonical Tags and URL Canonicalization
Canonical tags prevent duplicate content from splitting ranking signals
Without canonical tags, Google may index multiple URL variations as separate pages: example.com/page, www.example.com/page, example.com/page/, example.com/page?utm_source=email. Each variation splits your page authority. A canonical tag tells Google which URL is the authoritative version, consolidating all ranking signals to that one URL.
htmlCanonical tag patterns
<!-- Always self-canonical: every page points to its own canonical URL -->
<link rel="canonical" href="https://example.com/blog/fix-cors-errors">
<!-- Pagination: canonical points to first page (or use rel="prev"/"next") -->
<!-- Page 2: --> <link rel="canonical" href="https://example.com/blog">
<!-- OR keep page 2 canonical to page 2 — both are valid strategies -->
<!-- HTTP → HTTPS: ensure server redirects + canonical -->
<!-- ❌ Bad: some pages use http:// in canonical while serving https:// -->
<!-- ✅ Good: all canonicals use https:// and 301 redirects enforce https -->
<!-- Cross-domain canonical (syndicated content pointing back to original) -->
<link rel="canonical" href="https://original-site.com/article">
<!-- Used by Medium, LinkedIn Articles — signals original source to Google -->