Feb 1, 2026

Astro 블로그 만들면서 챙긴 검색엔진 최적화(SEO)와 다국어 설정

정성스럽게 기술 블로그 글을 몇 편 적어 올렸는데, 일주일이 지나도 구글이나 네이버 검색 결과에 전혀 나오지 않는다면 얼마나 허탈할까요?

콘텐츠 내용이 아무리 훌륭해도, 검색엔진의 크롤러 로봇이 페이지 구조를 읽지 못하거나 중복 문서로 판정해 색인(Indexing)을 누락시키면 방문자가 들어올 방법이 없습니다. 웹 프론트엔드 개발에서 SEO(검색엔진 최적화)는 선택이 아닌 기본 설계 요건인 이유죠.

이번 글에서는 기술 블로그나 랜딩 페이지를 운영할 때 꼭 알아야 할 렌더링 방식 차이, 필수 메타 태그, 다국어 사이트의 hreflang 설정법, 그리고 Astro 프레임워크에서 실제로 적용한 SEO 체크리스트를 알기 쉽게 정리해 보겠습니다.

1. 렌더링 방식과 검색 봇: CSR, SSR, SSG의 차이

검색 봇이 내 사이트에 방문했을 때 무엇을 보느냐가 색인의 성패를 가릅니다.

CSR (Client-Side Rendering): React나 Vue SPA처럼 빈 HTML 한 장을 먼저 던져주고 자바스크립트로 화면을 채우는 방식입니다. 구글봇은 JS를 실행할 줄 알지만 연산 비용이 크기 때문에 크롤링 주기가 밀리거나, 중소형 검색 봇은 빈 페이지만 보고 돌아가는 문제가 생깁니다.
SSR (Server-Side Rendering): 요청이 올 때마다 서버에서 완성된 HTML을 구워 전달합니다. 검색 봇이 메타 태그와 텍스트를 즉시 읽을 수 있어 색인에 아주 유리합니다.
SSG (Static Site Generation): 빌드할 때 모든 페이지를 정적 HTML로 미리 만들어 CDN에 올려둡니다. SSR만큼이나 검색 봇 친화적이면서, 서버 연산이 전혀 없어서 페이지 로딩 속도가 압도적으로 빠릅니다. Astro가 기술 블로그용으로 각광받는 이유가 바로 이 완벽한 SSG 지원 덕분입니다.

2. 검색 봇이 제일 먼저 보는 필수 메타 태그

HTML의 <head>에 들어가는 메타 정보는 검색 결과창의 첫인상을 결정합니다.

Title (<title>): 검색 결과의 파란색 링크 제목입니다. 60자 이내로 핵심 키워드를 앞쪽에 배치하는 것이 클릭률(CTR)에 유리합니다.
Description (<meta name="description">): 검색 결과 링크 밑에 노출되는 2~~3줄 요약문입니다. 100~~140자 내외로 독자의 클릭을 유도할 수 있는 매력적인 문장을 적어줍니다.
OpenGraph (og:title, og:image): 카카오톡, 슬랙, 트위터에 링크를 공유했을 때 뜨는 미리보기 카드입니다. 썸네일 이미지가 없으면 링크 클릭률이 반토막 나므로 1200x630 비율의 이미지를 반드시 세팅해 둡니다.
시맨틱 태그 구조: 페이지에 <h1>은 메인 제목으로 단 하나만 두고, 하위 본문은 <h2>, <h3> 순서대로 위계를 지켜 작성해야 검색 로봇이 글의 논리 구조를 제대로 파악합니다.

3. 다국어 블로그의 핵심: Canonical과 hreflang

한국어 글과 영어 번역 글을 함께 운영할 때 가장 조심해야 할 것은 “중복 콘텐츠(Duplicate Content)” 패널티입니다. 두 문서의 관계를 명시해 주지 않으면 검색엔진이 서로를 표절로 오해할 수 있거든요.

1) 대표 주소를 알려주는 Canonical 태그

같은 글이라도 추적 파라미터(?utm_source=...) 등이 붙어 주소가 달라질 수 있습니다. 이 글의 진짜 대표 URL이 어디인지 못 박아두는 태그입니다.

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

2) 언어별 대체 주소를 알려주는 hreflang 태그

검색 봇에게 “이 글은 한국어 버전과 영어 버전이 짝을 이루고 있으니, 한국 사용자에겐 한국어 페이지를, 글로벌 사용자에겐 영어 페이지를 보여줘”라고 안내하는 표준 규약입니다.

<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/" />

4. Astro 프로젝트 실전 SEO 체크리스트

Astro 환경에서 블로그를 운영한다면 아래 설정들을 챙겨두세요.

1) 사이트맵(Sitemap) 자동 생성

@astrojs/sitemap 플러그인을 붙여두면 빌드할 때마다 최신 글 목록이 담긴 sitemap-index.xml이 자동으로 뽑혀 나옵니다.

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

export default defineConfig({
  site: 'https://myblog.com', // 내 실서비스 도메인 필수 입력
  integrations: [sitemap()],
});

2) public/robots.txt 파일 세팅

검색 봇에게 내 사이트의 문을 열어주고, 사이트맵의 위치를 알려주는 안내판입니다.

User-agent: *
Allow: /

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

3) 서치 콘솔(Search Console) 소유권 등록

배포 후 구글 서치 콘솔과 네이버 서치어드바이저에 사이트 URL과 sitemap-index.xml을 제출하세요. 며칠 뒤면 크롤링 통계와 유입 키워드를 한눈에 확인할 수 있습니다.

먼저 읽어볼 가이드

검색 유입이 많은 핵심 글부터 이어서 보세요.