5강. SEO 설정과 배포 - 구글·네이버에 검색되게 만들기

사이트를 만들었다면 이제 세상에 공개할 차례입니다. 이번 강의에서는 Astro 사이트가 구글과 네이버 검색에 잘 노출되도록 SEO를 설정하고, 무료 호스팅에 배포한 뒤, 검색엔진에 사이트를 등록하는 과정을 처음부터 끝까지 따라 합니다.

1. 기본 메타 태그

검색엔진과 SNS는 <head> 안의 메타 태그를 읽어 사이트를 이해합니다. 3강에서 만든 레이아웃의 <head>에 다음을 추가합니다.

---
interface Props {
  title: string;
  description: string;
}
const { title, description } = Astro.props;
const canonical = new URL(Astro.url.pathname, Astro.site);
---

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width" />
  <title>{title}</title>
  <meta name="description" content={description} />
  <link rel="canonical" href={canonical} />

  <!-- SNS 공유 미리보기 (카카오톡, 페이스북, 네이버 등) -->
  <meta property="og:title" content={title} />
  <meta property="og:description" content={description} />
  <meta property="og:url" content={canonical} />
  <meta property="og:image" content={new URL('/og-default.png', Astro.site)} />
</head>

주의할 점이 두 가지 있습니다. description은 검색 결과에 그대로 보이므로 페이지마다 다르게, 1~2문장으로 씁니다. og:image는 반드시 PNG나 JPG(1200×630 권장)를 쓰세요. SVG는 카카오톡과 페이스북에서 표시되지 않습니다.

site 주소 설정

Astro.site가 동작하려면 astro.config.mjs에 실제 배포 도메인을 적어야 합니다.

export default defineConfig({
  site: 'https://my-astro-site.com',
});

이 값이 사이트맵, RSS, canonical URL 생성에 모두 쓰이므로 틀리면 SEO 전체가 어긋납니다.

2. 사이트맵과 RSS

사이트맵은 “우리 사이트에 이런 페이지들이 있다”고 검색엔진에 알려주는 목록입니다. Astro 공식 통합으로 자동 생성할 수 있습니다.

npx astro add sitemap

이 명령 하나로 패키지 설치와 설정이 끝나며, 빌드하면 sitemap-index.xml이 생성됩니다.

RSS는 네이버 서치어드바이저가 별도로 받는 항목이므로 함께 만들어 둡니다.

npm install @astrojs/rss

src/pages/rss.xml.ts:

import rss from '@astrojs/rss';
import { getCollection } from 'astro:content';

export async function GET(context) {
  const posts = await getCollection('blog');
  return rss({
    title: 'My Astro Site',
    description: 'Astro 강의 블로그',
    site: context.site,
    items: posts.map((post) => ({
      title: post.data.title,
      description: post.data.description,
      pubDate: post.data.pubDate,
      link: `/blog/${post.id}/`,
    })),
  });
}

3. robots.txt

public/robots.txt에 사이트맵 위치를 알려줍니다.

User-agent: *
Allow: /

Sitemap: https://my-astro-site.com/sitemap-index.xml

4. 구조화 데이터 (JSON-LD)

구조화 데이터를 넣으면 검색 결과에 작성일, 작성자 등이 풍부하게 표시될 수 있습니다. 블로그 글 페이지 <head>에 추가합니다.

<script type="application/ld+json" set:html={JSON.stringify({
  '@context': 'https://schema.org',
  '@type': 'BlogPosting',
  headline: post.data.title,
  description: post.data.description,
  datePublished: post.data.pubDate.toISOString(),
  author: { '@type': 'Person', name: '작성자 이름' },
})} />

5. 배포하기

Astro는 정적 파일을 만들기 때문에 무료 호스팅 서비스 어디든 올릴 수 있습니다. 세 곳 모두 방법이 같습니다.

프로젝트를 GitHub 저장소에 올립니다 (node_modules, dist는 .gitignore로 제외).
호스팅 서비스에 로그인해 저장소를 연결합니다.
빌드 설정을 확인합니다. 보통 자동으로 Astro를 감지합니다.

서비스	빌드 명령	출력 폴더
Vercel	`npm run build`	`dist`
Netlify	`npm run build`	`dist`
Cloudflare Pages	`npm run build`	`dist`

배포가 끝나면 xxx.vercel.app 같은 임시 주소가 발급됩니다. 자기 도메인이 있다면 서비스 설정에서 연결할 수 있습니다. 이후에는 GitHub에 push 할 때마다 자동으로 다시 배포됩니다.

6. 검색엔진에 등록하기

배포만으로는 검색에 바로 나오지 않습니다. 검색엔진에 사이트를 직접 알려야 합니다.

구글 서치 콘솔

search.google.com/search-console에서 사이트를 등록합니다.
소유 확인 방법 중 HTML 태그를 선택하면 <meta name="google-site-verification" content="..."> 태그를 줍니다. 이 태그를 레이아웃 <head>에 넣고 다시 배포합니다.
확인이 끝나면 왼쪽 메뉴 사이트맵에서 sitemap-index.xml을 제출합니다.

네이버 서치어드바이저

searchadvisor.naver.com에서 사이트를 등록합니다.
마찬가지로 HTML 태그 방식으로 <meta name="naver-site-verification" content="..."> 태그를 넣고 재배포합니다.
요청 → 사이트맵 제출에 sitemap-index.xml, RSS 제출에 rss.xml을 등록합니다.

등록 후 실제 검색에 반영되기까지는 며칠에서 몇 주가 걸립니다. 서치 콘솔의 “URL 검사” 기능으로 개별 페이지 색인을 요청하면 조금 빨라집니다.

7. 배포 후 점검

pagespeed.web.dev에서 속도·접근성·SEO 점수를 확인합니다. Astro 사이트는 보통 90점 이상이 나옵니다.
카카오톡 채팅창에 사이트 주소를 보내 미리보기 이미지와 제목이 잘 나오는지 확인합니다.
없는 주소를 입력해 404 페이지가 정상적으로 나오는지 확인합니다.

정리

페이지마다 다른 title·description 과 canonical, OG 이미지(PNG/JPG)를 넣습니다.
사이트맵·RSS·robots.txt 를 만들고, astro.config.mjs 의 site 에 실제 도메인을 적습니다.
GitHub 저장소를 Vercel·Netlify·Cloudflare Pages 에 연결하면 push 할 때마다 자동 배포됩니다.
배포 후 구글 서치 콘솔과 네이버 서치어드바이저에 등록하고 사이트맵(네이버는 RSS 도)을 제출합니다.

다음 강의는 마지막 강의입니다. 배포한 사이트를 꾸준히 운영하는 방법 — 글 추가와 재배포, 색인 상태 점검, 방문자 분석, 업데이트와 백업 — 을 다룹니다.