문서 / SSR과 SEO

SSR과 SEO

검색에 필요한 콘텐츠와 메타데이터를 첫 HTML 응답에 담습니다.

공개 콘텐츠는 SSR을 적극 활용하세요

소개·상품·게시글처럼 검색 유입이 필요한 페이지는 서버에서 주요 제목·본문·링크를 HTML로 만들어 반환하는 SSR을 우선 권장합니다. 자바스크립트 실행 전에도 내용과 상태 코드가 전달되어 검색 수집과 첫 화면 표시를 돕습니다. 내용이 거의 바뀌지 않으면 미리 HTML을 생성하는 SSG도 적합합니다.

로그인 후 대시보드의 필터·차트처럼 상호작용이 많은 부분은 클라이언트 렌더링을 함께 사용하세요. SSR 자체가 검색 노출이나 순위를 보장하는 것은 아닙니다. Google의 JavaScript SEO 안내

HTML과 메타데이터

Hono 예제는 DB 상품을 조회해 제목, 설명과 본문을 한 HTML 응답에 담습니다. 아래 레이아웃의 문자열은 Hono가 이스케이프합니다. 사용자 데이터를 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>`;
}

공개 화면에는 고유한 title·description·h1과 필요에 맞는 Open Graph·canonical을 추가합니다. canonical과 공유 이미지 URL은 신뢰하는 서비스 주소를 기준으로 절대 URL을 만들고, 임의의 Host 헤더를 그대로 반영하지 마세요.

공개 상품 head 예시

<link rel="canonical" href="https://YOUR_DOMAIN/products/1">
<meta property="og:type" content="product">
<meta property="og:title" content="예제 상품">
<meta property="og:url" content="https://YOUR_DOMAIN/products/1">

개인화된 HTML은 Cache-Control: private, no-store로 응답합니다. 사용자별 내용을 공유 캐시에 넣지 마세요.

독립 화면은 독립 URL로 구성하세요

/products/1, /posts/hello처럼 각 주요 화면에 직접 접근·새로고침 가능한 URL을 부여하세요. 화면 전체를 바꾸면서 주소는 그대로 두는 구조를 피합니다. 문서 내 이동은 #installation처럼 영어 앵커를 사용합니다.

존재하지 않는 문서는 404, 이전 주소는 적절한 리다이렉트, 공개 정상 문서는 200을 반환합니다. sitemap.xml에는 공개 canonical URL만 넣으세요. 로그인·결제 결과·관리 화면에는 noindex를 적용하되, noindex나 robots.txt를 접근 권한 검사 대신 사용하지 마세요.

robots.txt 예시

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

배포 후 검증

브라우저의 페이지 소스 보기에서 상품 제목·본문·링크가 이미 있는지 확인합니다.
개별 URL 직접 접근·새로고침, 잘못된 URL의 404와 리다이렉트를 확인합니다.
Google Search Console에 소유권을 확인하고 사이트맵·URL 검사 결과를 확인합니다.
모바일 레이아웃, 이미지 크기·대체 텍스트, 키보드 이동, 로딩 속도를 확인합니다.

문서 전체 보기 프로젝트 열기