linou518

Posted on Mar 6

The Technical SEO Trio: Core Web Vitals, Schema Markup, and Sitemaps

#webdev #tutorial #javascript #seo

Here's a harsh reality: you could spend three hours writing an excellent article, but if the page takes 5 seconds to load, shows no rich results in search, and Google's crawler doesn't even know the article exists — the search traffic will be disappointing.

That's exactly why technical SEO exists.

It's not mysterious dark magic, nor something only large companies need. For anyone serious about running a blog, three foundational components are unavoidable: Core Web Vitals, Structured Data (Schema), and XML Sitemaps.

This article breaks down all three, with a focus on what you actually need to do — no fluff.

Part 1: Core Web Vitals — Google's "Experience Score"

Google began including page experience as a ranking factor in 2021. The core of this is three metrics collectively known as Core Web Vitals (CWV):

Metric	What It Measures	Target
LCP (Largest Contentful Paint)	Time for main content to load	< 2.5 seconds
INP (Interaction to Next Paint)	How fast the page responds after user interaction	< 200ms
CLS (Cumulative Layout Shift)	How much page elements unexpectedly move	< 0.1

LCP: The Most Common Failure Point

The stats are alarming: 40% of websites fail the LCP threshold — it's the biggest weakness across all three metrics.

Common causes of poor LCP:

Hero images loaded dynamically via CSS or JavaScript, making them "invisible" to the browser initially
Images not compressed, resulting in large file sizes
Slow server response times (high TTFB)

The most effective fix: Change cover images to HTML <img> tags with fetchpriority="high" and WebP format. One change, significant impact.

<img src="/hero.webp" fetchpriority="high" loading="eager" alt="..." width="1200" height="630">

INP: The New Metric That Replaced FID in 2024

INP officially replaced FID as Core Web Vitals' third metric in March 2024. It measures how long it takes for the page to respond and render after a user interaction (click, keyboard input).

For tech blogs, code highlighting libraries (Prism.js, highlight.js) are a hidden INP killer — loading them fully creates large JS long tasks that block the main thread.

Solution: Lazy-load code highlighting, triggering only when a code block enters the viewport.

CLS: The Layout Shift You Might Not Notice

Most common CLS sources:

Images without width/height attributes
Lazy-loaded ads or embeds with no placeholder
FOUT (Flash of Unstyled Text) during font loading

Diagnostic tool: PageSpeed Insights — free, analyzes your live pages, and provides specific recommendations.

Part 2: Structured Data (Schema) — Making Google "Understand" Your Content

Why do some pages in search results show star ratings, publication dates, expanded FAQs, and author photos?

That's not magic — it's structured data at work.

What Is It?

Using standardized JSON code (JSON-LD format), you tell Google the "identity" of your content — whether it's an article, FAQ, who the author is, when it was published, which image represents it.

This standard comes from Schema.org, jointly maintained by Google, Microsoft, and Yahoo.

Is It Worth Doing?

Short answer: Yes — especially in 2026.

Two reasons:

Rich Snippets boost CTR: Displaying breadcrumbs, author info, and FAQ expansions in search results. Research shows CTR improvements of 20-30%.
GEO (Generative Engine Optimization): When users search via ChatGPT, Perplexity, or Google AI Overviews, content with structured data is easier for AI to understand and cite.

The Two Essential Schemas for Tech Blogs

Article Schema (every article page):

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "TechArticle",
  "headline": "Your Article Title",
  "author": {
    "@type": "Person",
    "name": "Your Name"
  },
  "datePublished": "2026-03-06",
  "dateModified": "2026-03-06",
  "description": "Article summary, under 150 words",
  "image": "https://yoursite.com/og-image.jpg"
}
</script>

FAQPage Schema (articles with Q&A sections):

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "FAQPage",
  "mainEntity": [{
    "@type": "Question",
    "name": "Your question here",
    "acceptedAnswer": {
      "@type": "Answer",
      "text": "Answer content here"
    }
  }]
}
</script>

Validation is mandatory: After deploying, always test with the Google Rich Results Test. Skipping validation is flying blind.

Part 3: XML Sitemaps — Helping Crawlers "Find" You

Sitemaps don't make Google crawl faster — they prevent Google from missing your content.

For new blogs and sites with few inbound links, pages without a sitemap might go weeks without being indexed. With a Sitemap submitted to Google Search Console, indexing typically happens within 1-2 days.

Key Principle: Keep Your Sitemap Clean

Don't dump every URL in. Low-quality URLs in your Sitemap dilute crawl budget, causing Google to waste time on pages that don't deserve attention.

URL types to exclude:

noindex pages (duplicate content, tag aggregation pages, etc.)
Parameter URLs (e.g., ?sort=date&page=2)
404 pages
Low-quality draft pages

Sitemap Structure for Larger Blogs

sitemap-index.xml
├── sitemap-posts.xml    <!-- All published articles -->
├── sitemap-tags.xml     <!-- Tag pages (can be excluded if low value) -->
└── sitemap-pages.xml    <!-- Static pages: About, Contact, etc. -->

One Important Misconception

The <priority> and <changefreq> tags are basically ignored by Google. Don't waste time configuring them. Just make sure your URLs are correct and that <lastmod> only updates when content is genuinely modified.

Implementation Priority: Where to Start?

If you can only do one thing right now, follow this order:

Run PageSpeed Insights once — Diagnose first. Know your current LCP/INP/CLS scores.
Add Article Schema — Configurable in under 30 minutes per article, with immediate search visibility impact.
Verify your Sitemap is submitted in Google Search Console — 10 minutes of work that many people forget to do.
Fix LCP issues — Usually image format and loading order problems. Fix based on PageSpeed's specific recommendations.

Conclusion: The Foundation Comes First

Writing great content is only the beginning. Technical SEO is the infrastructure that ensures that content gets discovered, understood, and properly displayed.

Core Web Vitals determine Google's experience score for your site, structured data shapes how you appear in search results, and Sitemaps determine whether your content is even considered.

All three are achievable without being an engineer. Start with the simplest step: open PageSpeed Insights, enter your blog URL, and check your score.

That number will tell you exactly what to do next.

DEV Community