Astro SEO: Astro 사이트를 Google 상위에 노출하고 AI에 인용되는 방법

간단 퀴즈

SEO가 맞습니까? 어떻게 시작해야 합니까?

4개 중 1번째 질문25%

사람들이 귀사가 파는 것을 Google에서 검색합니까?

네, 그럴 것 같음아니요, 새롭거나 아주 틈새임모름

Astro SEO는 이 깔끔한 HTML을 실제로 순위가 오르는 페이지로 만드는 작업입니다. Google의 JavaScript SEO 기본 가이드는 JavaScript 사이트가 크롤링, 렌더링, 색인 생성의 세 단계로 처리된다고 설명하며, 모든 봇이 JavaScript를 실행하지는 못하므로 서버 측 렌더링이나 사전 렌더링이 여전히 좋은 선택이라고 밝힙니다. Astro는 기본 설정부터 이 위치에서 출발합니다. 이 가이드는 나머지 설정을 하나씩 다루며, 모든 동작을 Astro 공식 문서로 확인했습니다. 참고로 지금 읽고 계신 sorank.com도 Astro로 운영됩니다.

Astro는 SEO에 좋을까요?

기술적인 면에서는 그렇습니다. Astro는 빌드 시점에 컴포넌트를 HTML로 렌더링하고, React나 Vue 같은 프레임워크가 보통 브라우저로 보내는 JavaScript를 제거합니다. 덕분에 JavaScript SEO 가이드에서 설명한 전형적인 문제, 즉 비어 있는 HTML 껍데기, 렌더링 후에야 나타나는 콘텐츠, 실제 앵커 태그가 아닌 링크를 피할 수 있습니다. 싱글 페이지 애플리케이션의 라우팅 함정도 없습니다. Astro의 모든 라우트는 자체 HTML 파일을 가진 실제 URL이기 때문입니다.

Astro가 하지 않는 일도 그만큼 중요합니다. 내장 SEO 플러그인, 자동 메타 설명, 자동 canonical 태그, 구조화 데이터는 모두 없습니다. 아래 표는 기본으로 얻는 것과 직접 만들어야 하는 것을 나눕니다.

정적 렌더링과 서버 렌더링, SEO에는 어느 쪽이 좋을까요?

주문형 렌더링에 관한 Astro 문서는 분명합니다. 기본적으로 페이지, 라우트, API 엔드포인트는 빌드 시점에 정적 페이지로 사전 렌더링됩니다. SEO 관점에서 정적 출력이 가장 안전한 기본값입니다. 각 URL은 CDN에서 제공되는 완성된 HTML 파일이어서 빠르고, 모든 방문자와 모든 봇에게 동일합니다.

주문형(서버) 렌더링에는 호스팅에 맞는 어댑터(예: Node, Netlify, Vercel, Cloudflare)가 필요합니다. 그다음 export const prerender = false로 특정 라우트만 사전 렌더링에서 제외하거나, output: 'server'로 프로젝트 전체를 전환한 뒤 정적 페이지를 하나씩 되돌립니다. 두 모드 모두 완전한 HTML을 출력하므로 Google이 보는 내용은 같습니다. 차이는 다른 곳에 있습니다.

• 속도: 정적 파일은 즉시 제공되지만, 서버에서 렌더링하는 페이지는 서버 응답 시간에 좌우되며 이는 Largest Contentful Paint에 영향을 줍니다.
• 최신성: 재고, 가격, 검색 결과처럼 계속 바뀌는 페이지에는 사이트 전체를 다시 빌드하는 것보다 서버 렌더링이 적합합니다.
• 도구: 사이트맵 같은 일부 통합은 서버의 동적 라우트를 인식하지 못합니다(아래 참고).

실무 원칙은 마케팅 페이지, 블로그 글, 문서는 정적으로 유지하고, 실시간 데이터가 필요한 라우트만 주문형으로 렌더링하는 것입니다. Astro 문서도 대부분의 페이지가 주문형 렌더링을 필요로 할 때까지 기본 정적 모드를 유지하라고 권장합니다.

Astro에서 메타 태그와 canonical URL은 어떻게 설정할까요?

SEO 컴포넌트를 하나 만들고(보통 BaseHead 또는 Seo라고 부릅니다) 모든 레이아웃의 head에 포함합니다. 제목, 설명, 선택적 이미지, 선택적 noindex 플래그를 받아 다음을 출력합니다.

1. 페이지마다 고유한 title 태그(주요 키워드를 앞쪽에 배치)
2. 페이지마다 직접 작성하는 메타 설명(검색 결과의 스니펫이 됩니다)
3. Astro.url.pathname과 설정의 site 값으로 만든 절대 URL 형태의 canonical 태그
4. 링크 미리보기를 위한 Open Graph 및 소셜 태그(제목, 설명, 이미지, URL)
5. 색인에서 제외해야 하는 페이지를 위한 robots 메타 태그

먼저 astro.config.mjs에서 site 옵션을 설정하십시오. canonical, 사이트맵, 소셜 태그가 모두 이 값에 의존합니다. 이어서 trailingSlash 정책('always' 또는 'never')을 정해 지키면 /blog/post와 /blog/post/가 같은 페이지의 두 버전으로 경쟁하는 일이 없습니다. 추적 매개변수가 중복 페이지를 만들지 않도록 canonical에서 쿼리 문자열을 제거합니다.

Astro로 사이트맵과 robots.txt는 어떻게 만들까요?

@astrojs/sitemap 문서에 설명된 공식 통합을 사용합니다. npx astro add sitemap을 실행하면 설치와 설정 추가가 함께 이루어집니다. site 옵션이 필수이며, 빌드 시 번호가 붙은 파일(sitemap-0.xml, 대형 사이트는 그 이상)을 가리키는 sitemap-index.xml 파일을 생성합니다. 파일당 기본 최대 45,000개 항목이며 entryLimit 옵션으로 조정합니다. 이 형식이 처음이라면 용어집의 XML 사이트맵 항목에서 Google이 이를 어떻게 활용하는지 확인하십시오.

SEO에 중요한 설정은 세 가지입니다.

• filter: 각 페이지 URL을 받는 함수입니다. 감사 페이지, 사이트 내 검색, 초안, noindex 페이지에는 false를 반환해 사이트맵에 색인 가능한 URL만 남깁니다.
• i18n: 언어 폴더를 언어 코드와 연결하고 각 항목에 hreflang 대체 URL을 추가합니다.
• customPages: 통합이 스스로 찾지 못하는 URL을 추가합니다.

robots.txt는 대부분의 사이트에서 public 폴더의 정적 파일로 충분합니다. 스테이징과 운영 환경에서 내용이 달라야 한다면 엔드포인트(src/pages/robots.txt.ts)로 생성하는 편이 낫습니다. 어느 경우든 sitemap-index.xml을 가리키는 Sitemap 줄을 추가하고, 출시 전에 robots.txt 검사 도구로 결과를 확인하십시오. 같은 엔드포인트 방식으로 llms.txt 파일도 만들 수 있으며, 내용은 llms.txt 파일 설치 가이드에서 설명합니다.

Astro에서 hreflang과 다국어 사이트는 어떻게 다룰까요?

Astro에 내장된 i18n 라우팅이 URL 쪽을 처리합니다. 설정에서 defaultLocale과 locales 목록을 선언하고, 기본 언어에도 접두사를 붙일지(prefixDefaultLocale) 선택합니다. getRelativeLocaleUrl 같은 도우미 함수가 현지화된 링크를 만들고, Astro.currentLocale이 각 페이지에 현재 언어를 알려 줍니다.

라우팅 가이드는 head 안의 hreflang 태그를 다루지 않으므로 SEO 컴포넌트에서 직접 작성할 계획을 세우십시오. 페이지마다 언어 버전별 alternate 링크 하나와 x-default를 모두 절대 URL로 출력하고, 각 버전은 다른 모든 버전을 나열해야 합니다(상호 링크). 라우팅과 같은 언어 목록에서 생성하면 존재하지 않는 페이지를 가리키는 대체 링크라는 가장 흔한 오류를 막을 수 있습니다. 몇몇 URL로 로직을 점검하려면 hreflang 생성기로 한 페이지의 전체 태그 세트를 출력해 보십시오. 그다음 두 번째 신호로 사이트맵의 i18n 옵션을 켭니다.

이미지와 아일랜드는 속도와 Core Web Vitals에 어떤 영향을 줄까요?

속도는 Astro가 가장 크게 앞서는 영역이며, 이는 Core Web Vitals에서 드러납니다. Astro 이미지 가이드에 따르면 astro:assets의 Image 컴포넌트는 로컬 이미지를 최적화하고 형식을 변환하며, 지연 로딩과 비동기 디코딩을 적용하고, 이미지 크기를 추론해 Cumulative Layout Shift를 방지합니다. alt 속성이 필수이므로 이미지 SEO의 기본 규칙이 자연스럽게 지켜집니다. Picture 컴포넌트는 한 걸음 더 나아가 대체 형식과 함께 AVIF나 WebP를 제공합니다.

두 가지 습관이 더해지면 완성입니다. 최적화가 필요한 이미지는 src에 두십시오(public의 파일은 처리 없이 그대로 제공됩니다). 그리고 페이지 상단의 주요 이미지는 지연 로딩하지 말고 즉시 불러와 Largest Contentful Paint가 늦어지지 않게 하십시오.

아일랜드 아키텍처는 JavaScript를 통제합니다. 컴포넌트는 클라이언트 지시어를 추가하기 전까지 정적 HTML입니다. client:load는 즉시, client:idle은 브라우저가 한가할 때, client:visible은 화면에 들어왔을 때만 하이드레이션합니다. 즉시 반응해야 하는 요소(메뉴, 장바구니)에만 client:load를 쓰는 것이 Interaction to Next Paint를 지키는 가장 간단한 방법입니다. 서버 아일랜드(server:defer)는 캐시된 페이지 다음에 개인화 블록을 불러오므로 주요 콘텐츠를 늦추지 않습니다.

Astro 사이트에 구조화 데이터는 어떻게 추가할까요?

Astro에는 스키마 전용 기능이 없어 오히려 완전한 제어가 가능합니다. 페이지 유형(Article, Product, Organization, BreadcrumbList, FAQPage)마다 JavaScript 객체를 만들고, 유형이 application/ld+json인 script 태그에 출력합니다. JSON이 이스케이프되지 않도록 set:html 지시어와 JSON.stringify를 사용합니다. 화면에 보이는 페이지와 같은 frontmatter나 컬렉션 데이터로 채우면 마크업이 항상 사용자가 보는 내용과 일치하며, 이는 스키마 마크업에 관한 Google 가이드라인의 요구 사항입니다.

새 페이지 유형의 JSON 초안이 필요하다면 무료 스키마 생성기로 유효한 시작 블록을 만든 뒤 템플릿으로 바꾸십시오. 템플릿을 수정할 때마다 빌드된 페이지 일부를 Google 리치 결과 테스트로 검증합니다.

Astro로 이전할 때 리디렉션은 어떻게 처리할까요?

WordPress나 Next.js에서 옮겨 오는 시점이 Astro 사이트에 가장 위험한 순간입니다. 트래픽이나 백링크가 있는 URL은 모두 유지하고, 나머지는 가장 가까운 대응 페이지로 하나씩 영구 리디렉션을 연결합니다. 자세한 방법은 SEO 리디렉션 가이드에 있습니다.

Astro 설정은 이전 경로를 새 경로에 연결하는 redirects 객체를 받습니다. 어댑터를 사용하면 실제 HTTP 리디렉션이 됩니다. 완전한 정적 빌드에서는 Astro가 대신 meta refresh가 담긴 HTML 페이지를 생성하는데, Google은 이를 따라가지만 서버 측 301보다 약한 신호로 취급합니다. 정적 사이트라면 호스팅 형식(Netlify나 Cloudflare Pages는 _redirects 파일, Vercel은 vercel.json)으로 리디렉션을 선언해 크롤러가 실제 301을 받도록 하십시오.

Astro는 SEO와 GEO에 어떻게 도움이 될까요?

ChatGPT, Perplexity, Gemini에 인용되려면 먼저 읽을 수 있어야 합니다. 많은 AI 크롤러는 JavaScript를 실행하지 않고 원본 HTML만 가져갑니다. Astro의 기본 동작처럼 첫 응답에 전체 텍스트를 담는 사이트는 클라이언트 렌더링 사이트에 남아 있는 장벽을 없앱니다. 여기에 명확한 소제목, 답부터 제시하는 단락, 구조화 데이터, llms.txt 파일이 더해지면 각 페이지를 인용하기가 더 쉬워집니다.

출시 후에는 추측 대신 측정하십시오. Sorank의 GEO·SEO 대시보드는 Search Console 데이터와 AI 어시스턴트에서 유입된 방문을 한데 모아, 새 사이트가 순위를 유지하는지 확인할 수 있게 해 줍니다.

기술적 품질은 순위를 노릴 콘텐츠가 있을 때 성과로 이어집니다. Sorank의 AI 블로그 글 생성기는 Google과 AI 어시스턴트에 최적화된 글을 작성해 게시하며, Astro 프로젝트 같은 맞춤형 사이트에도 webhook으로 연결됩니다.

Astro는 기본으로 빠르고 크롤링 가능한 HTML을 제공하지만, 순위는 여전히 직접 추가하는 head 태그, 사이트맵, hreflang, 구조화 데이터, 리디렉션에 달려 있습니다. 먼저 공용 SEO 컴포넌트와 사이트맵을 갖추고, 출시 전에 위의 표를 하나씩 점검하십시오.