Feb 1, 2026

Technical SEO for Modern Web Apps: SSR vs SSG, hreflang, and Astro Setup

You spend days researching and drafting a high-quality technical article, push it live, and a week later, it’s completely invisible on Google and search engines.

It doesn’t matter how solid your code or content is: if crawlers cannot parse your HTML structure, or if duplicate URLs split your ranking authority, your organic traffic will stay at zero. Technical SEO is an architectural requirement, not an afterthought.

In this guide, we’ll cut through the marketing noise and look at the engineering fundamentals: rendering tradeoffs, essential meta tags, handling multilingual hreflang setups, and practical optimizations used in production Astro blogs.

1. How Search Bots View Rendering: CSR vs SSR vs SSG

What a search engine crawler sees on its first HTTP GET request dictates how easily your content gets indexed.

CSR (Client-Side Rendering): The server sends down an almost-empty HTML shell with a bundled JavaScript tag. While Googlebot executes JS, it queues rendering in a secondary pass that can take days or weeks, and smaller crawlers often record a blank page.
SSR (Server-Side Rendering): The server renders full HTML on every incoming request. Crawlers get complete textual markup and metadata immediately.
SSG (Static Site Generation): HTML is pre-rendered at build time and cached on CDN edge nodes. It offers the crawler-friendly benefits of SSR with lightning-fast load times and zero runtime compute costs. This is why Astro is so popular for content-heavy sites and blogs.

2. Essential Metadata Crawlers Look For

Head metadata directly controls how your link appears on search engine result pages (SERPs) and social previews.

Title (<title>): Keep it under 60 characters and place high-intent keywords near the front to improve click-through rates.
Description (<meta name="description">): A concise 120–150 character summary that functions as your ad copy on Google search results.
OpenGraph (og:title, og:image): Displayed when links are shared on Slack, Discord, or LinkedIn. Always configure a 1200x630px thumbnail; posts with missing preview images see significantly lower click engagement.
Semantic Hierarchy: Use exactly one <h1> per page for the primary headline, followed by logical <h2> and <h3> subheadings. Skipping heading levels confuses crawler parsers trying to build a topical outline.

3. Multilingual SEO: Canonical and hreflang

If you publish versions of your content in both Korean and English, search engines might treat them as duplicate or competing pages unless you explicitly declare their relationship.

Canonical Tag: The Source of Truth

Declare the authoritative URL for the current document so query parameters (like ?ref=...) don’t dilute page rank:

<link rel="canonical" href="https://myblog.com/blog/web-seo-optimization-guide/" />

hreflang: Connecting Language Variants

Tell crawlers which page to serve based on the user’s browser language:

<link rel="alternate" hreflang="ko" href="https://myblog.com/blog/web-seo-optimization-guide/" />
<link rel="alternate" hreflang="en" href="https://myblog.com/en/blog/web-seo-optimization-guide/" />
<link rel="alternate" hreflang="x-default" href="https://myblog.com/blog/web-seo-optimization-guide/" />

The x-default fallback ensures international visitors with unspecified locales are directed to your primary global page.

4. Production Checklist for Astro Blogs

If you’re running on Astro, set up these three foundational pieces:

1) Automated Sitemap Generation

Install @astrojs/sitemap so every production build automatically updates your sitemap-index.xml:

// astro.config.mjs
import { defineConfig } from 'astro/config';
import sitemap from '@astrojs/sitemap';

export default defineConfig({
  site: 'https://myblog.com', // Must be your live production domain
  integrations: [sitemap()],
});

2) robots.txt Setup

Place a robots.txt in your public/ folder to instruct crawlers where your sitemap lives:

User-agent: *
Allow: /

Sitemap: https://myblog.com/sitemap-index.xml

3) Google Search Console Verification

Add your site verification token into the root layout’s <head> and submit your sitemap URL. Within a few days, you’ll see exact indexing metrics and search query impressions directly from Google.

Start Here

Continue with the core guides that pull steady search traffic.