Docs / SSR and SEO

SSR and SEO

Include searchable content and metadata in the initial HTML response.

Use SSR for public content

For landing pages, products and posts that should be discoverable, render the main heading, body and links on the server. Search crawlers and visitors then receive meaningful content and the correct status code before JavaScript runs. Static generation is also suitable for content that rarely changes.

Use client rendering for highly interactive authenticated dashboards. SSR alone does not guarantee search visibility or ranking. See Google’s JavaScript SEO guidance.

HTML and metadata

The Hono example queries a product and returns its title, description and body in one HTML response. Escape user data and never insert it as raw HTML.

src/views/layout.ts
import { html } from 'hono/html';

export function layout(title: string, description: string, body: ReturnType<typeof html>) {
  return html`<!doctype html>
<html lang="ko"><head><meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>${title}</title><meta name="description" content="${description}">
</head><body><header><a href="/">상품 목록</a></header>
<main>${body}</main></body></html>`;
}

Give every public page a unique title, description and h1, plus appropriate Open Graph and canonical metadata. Build absolute URLs from a trusted service origin, not an arbitrary Host header.

Public product head example
<link rel="canonical" href="https://YOUR_DOMAIN/products/1">
<meta property="og:type" content="product">
<meta property="og:title" content="Example product">
<meta property="og:url" content="https://YOUR_DOMAIN/products/1">

Return personalized HTML with Cache-Control: private, no-store so user-specific data never enters a shared cache.

Give each screen its own URL

Use directly accessible URLs such as /products/1 and /posts/hello. Avoid changing the whole screen while leaving the address unchanged. Use stable English fragment IDs such as #installation for in-page navigation.

Return 404 for missing content, an appropriate redirect for moved pages and 200 for valid public pages. Include only public canonical URLs in sitemap.xml. Apply noindex to login, payment-result and administration pages, but never use noindex or robots.txt as access control.

robots.txt example
User-agent: *
Allow: /
Sitemap: https://YOUR_DOMAIN/sitemap.xml

Verify after deployment

  1. Use View Source to confirm the product title, body and links are already present.
  2. Open and refresh each URL directly; verify 404 and redirect behavior for invalid or moved URLs.
  3. Verify ownership in Google Search Console and inspect sitemap and URL results.
  4. Check mobile layout, image dimensions and alt text, keyboard navigation and loading performance.
View all docsOpen projects