Astro 웹사이트 SEO 최적화 완전 가이드: meta 태그부터 검색 순위 개선까지

Astro로 멋진 블로그를 만드는 데 일주일을 쓰고 기대 가득한 마음으로 배포했다고 해봅시다. 그런데 두 달이 지나도 Google에서 글 제목을 검색하면 세 번째 페이지까지 넘겨도 보이지 않습니다. 매일 Google Analytics를 열어도 방문자 수는 여전히 한 자릿수입니다. 그러다 슬슬 의심이 들기 시작합니다. 어디가 잘못된 걸까?

저도 이 단계를 겪었습니다. 당시 저는 Next.js에서 Astro로 막 마이그레이션한 참이었습니다. Astro는 성능이 특히 좋고, 로딩 속도가 전통적인 React 프레임워크보다 40% 빠를 수 있으며 Lighthouse 100점도 받을 수 있다고 들었습니다. 실제로 사이트는 빨라졌지만 검색 순위는 전혀 오르지 않았습니다. 나중에야 알았습니다. 성능 이점만으로는 부족하고, SEO 설정이 핵심이라는 것을요.

좋은 소식은 Astro의 SEO 최적화가 사실 어렵지 않다는 점입니다. 이 글에서는 meta 태그, sitemap, robots.txt, 구조화 데이터 같은 핵심 단계를 포함해 Astro 웹사이트의 완전한 SEO 설정 방법을 하나씩 안내하겠습니다. 각 부분에는 바로 복사해 쓸 수 있는 코드 예제가 있습니다. 그대로 따라 하면 30분 안에 기본 설정을 끝낼 수 있습니다. 1-2주 뒤에는 Google Search Console에서 사이트가 색인되었다는 반가운 소식을 볼 수 있을 것입니다.

Astro가 SEO에 특히 적합한 이유

구체적인 설정을 이야기하기 전에, 먼저 제가 왜 콘텐츠 사이트에 Astro를 선택했는지부터 말해보겠습니다.

Astro의 SEO 기본 장점

Astro의 가장 큰 특징은 기본적으로 JavaScript가 0에 가깝다는 점입니다. 잘못 본 것이 아닙니다. 거의 0입니다. Astro는 페이지를 바로 정적 HTML로 생성하므로, 검색엔진 크롤러가 보는 것은 깨끗한 HTML 콘텐츠입니다. JS 실행이 끝날 때까지 기다려야 내용이 보이는 구조가 아닙니다.

이 “Islands Architecture”는 특히 영리합니다. 페이지 본문은 정적 HTML이고, 상호작용이 필요한 부분, 예를 들어 좋아요 버튼 하나 같은 곳에만 해당 JS를 로드합니다. 그래서 첫 화면 시간이 매우 빠르고 Google 크롤러도 이런 구조를 좋아합니다.

예전에 Next.js를 사용할 때는 SSR을 켜도 번들링된 JS 파일이 꽤 컸습니다. Astro로 마이그레이션한 뒤 JavaScript 용량이 바로 90% 줄었습니다. Lighthouse 점수도 78점에서 98점으로 뛰었습니다.

다른 프레임워크와 비교하면 어떨까?

솔직히 말하면, 프레임워크마다 어울리는 시나리오가 다릅니다. 간단히 비교해보겠습니다.

Astro: 블로그, 문서 사이트, 마케팅 웹사이트처럼 콘텐츠가 중심인 사이트에 적합합니다. 로딩 속도는 확실히 빠릅니다. 2025년 데이터에 따르면 개발자 사이에서 Astro 사용률은 이미 18%까지 증가했습니다.

Next.js: 백오피스 관리 시스템이나 이커머스 웹사이트처럼 복잡한 상호작용이 필요한 Web 애플리케이션에 더 적합합니다. 클라이언트 상태 관리가 많이 필요하다면 Next.js가 더 알맞습니다.

Gatsby: Gatsby도 정적 생성 방식이라 Astro와 비슷합니다. 하지만 저는 Gatsby의 번들 크기가 조금 크고, 빌드 속도도 Astro보다 다소 느리다고 느꼈습니다.

실제 사례를 하나 말하자면, 제 친구의 기술 블로그는 Next.js에서 Astro로 옮긴 뒤 로딩 속도가 약 50% 개선되었습니다. Google Search Console 데이터에서도 페이지 체류 시간이 평균 1분 20초에서 2분 10초로 늘었습니다. 꽤 뚜렷한 개선입니다.

기본 필수 작업 - Meta 태그 전체 설정

이제 본론으로 들어가겠습니다. Meta 태그는 SEO 최적화의 첫 단계이자 가장 쉽게 놓치는 단계입니다.

기본 3종 세트: title, description, keywords

제가 처음 Astro를 쓸 때도 meta 태그 설정에서 오래 막혔습니다. 화면 가득한 <meta> 태그를 보며 어디서부터 시작해야 할지 전혀 감이 오지 않았습니다. 나중에 보니 핵심은 사실 세 가지뿐이었습니다.

title 태그: 가장 중요합니다. Google 검색 결과에 표시되는 큰 제목이 바로 이 값입니다. 길이는 50-60자가 가장 좋고, 너무 길면 잘립니다. 예를 들어 이 글의 title은 “Astro 웹사이트 SEO 최적화 완전 가이드: meta 태그부터 검색 순위 개선까지”입니다.

description 태그: 검색 결과 아래에 표시되는 회색 설명 문구입니다. 길이는 120-160자로 조절하고 반드시 핵심 키워드를 포함해야 합니다. 이 부분은 아주 중요합니다. Google은 클릭률(CTR)로 검색 결과가 좋은지 판단합니다. 제가 본 데이터에서는 잘 최적화한 description이 클릭률을 20-30% 높일 수 있었습니다.

keywords 태그: 솔직히 말하면 지금은 그리 중요하지 않습니다. Google은 거의 보지 않습니다. 하지만 넣어도 손해는 없고, 3-5개 키워드면 충분합니다.

Astro에서 설정하는 방법은 아주 간단합니다. .astro 파일의 <head> 부분에 바로 쓰면 됩니다.

---

const title = "Astro 웹사이트 SEO 최적화 완전 가이드";
const description = "Astro 웹사이트의 완전한 SEO 설정 방법을 단계별로 설명합니다. meta 태그, sitemap, robots.txt, 구조화 데이터 등을 포함합니다.";

---

<head>
  <title>{title}</title>
  <meta name="description" content={description} />
  <meta name="keywords" content="Astro SEO, Astro 최적화, meta 태그, sitemap" />
</head>

Open Graph와 Twitter Card

이 둘은 소셜 미디어 공유에 사용됩니다. 누군가가 WeChat이나 Twitter에 글 링크를 공유할 때 제목, 설명, 대표 이미지가 자동으로 표시되는 것을 본 적이 있을 겁니다. 그 역할을 하는 것이 Open Graph(OG) 태그입니다.

솔직히 저는 처음에 수많은 og:xxx 태그를 보고 어떤 것이 필수인지 전혀 몰랐습니다. 나중에 직접 만져보며 핵심은 아래 몇 가지라는 것을 알게 됐습니다.

<meta property="og:title" content={title} />
<meta property="og:description" content={description} />
<meta property="og:image" content="https://your-site.com/og-image.jpg" />
<meta property="og:url" content="https://your-site.com/current-page-path" />
<meta property="og:type" content="article" />

<!-- Twitter 카드 -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content={title} />
<meta name="twitter:description" content={description} />
<meta name="twitter:image" content="https://your-site.com/twitter-image.jpg" />

og:image에서 자주 밟는 함정: 이미지 크기가 중요합니다. 1200x630px을 권장합니다. 저는 처음에 500x300짜리 작은 이미지를 썼는데, WeChat 공유 화면에서 아주 흐릿하게 보였습니다. 나중에 1200x630으로 바꾸니 효과가 바로 달라졌습니다.

컴포넌트로 통합 관리하기

모든 페이지마다 meta 태그를 직접 쓰는 것은 너무 번거롭습니다. 더 똑똑한 방법은 BaseHead.astro 컴포넌트를 만들어 모든 meta 태그를 한곳에서 관리하는 것입니다.

src/components/BaseHead.astro를 만듭니다.

---

interface Props {
  title: string;
  description: string;
  image?: string;
}

const { title, description, image = "/default-og-image.jpg" } = Astro.props;
const canonicalURL = new URL(Astro.url.pathname, Astro.site);

---

<head>
  <!-- 기본 meta -->
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link rel="icon" type="image/svg+xml" href="/favicon.svg" />

  <!-- SEO -->
  <title>{title}</title>
  <meta name="description" content={description} />
  <link rel="canonical" href={canonicalURL} />

  <!-- Open Graph -->
  <meta property="og:type" content="website" />
  <meta property="og:url" content={canonicalURL} />
  <meta property="og:title" content={title} />
  <meta property="og:description" content={description} />
  <meta property="og:image" content={new URL(image, Astro.site)} />

  <!-- Twitter -->
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:title" content={title} />
  <meta name="twitter:description" content={description} />
  <meta name="twitter:image" content={new URL(image, Astro.site)} />
</head>

그런 다음 페이지 파일에서 바로 가져다 씁니다.

Railway - 현대적인 배포 플랫폼, 번거로운 운영 없이 몇 분 만에 라이브

지금 시작 →광고

---

import BaseHead from '../components/BaseHead.astro';

---

<html>
  <BaseHead
    title="내 글 제목"
    description="글 설명"
    image="/my-article-cover.jpg"
  />
  <body>
    <!-- 페이지 내용 -->
  </body>
</html>

Content Collections로 블로그 글을 관리한다면 frontmatter에서 제목과 설명을 자동으로 가져올 수도 있어 더 편합니다. 이렇게 하면 새 글을 쓸 때마다 meta 태그가 자동으로 설정됩니다.

고급 설정 - Sitemap과 Robots.txt

Meta 태그를 설정했다면 다음 단계는 Google이 사이트를 찾을 수 있게 하는 것입니다. 이를 위해 sitemap과 robots.txt가 필요합니다.

Sitemap: 검색엔진에 어떤 페이지가 있는지 알려주기

Sitemap은 XML 파일입니다. 그 안에는 웹사이트의 모든 페이지가 나열되어 있습니다. Google 크롤러가 이 파일을 보면 어떤 페이지를 수집해야 하는지 알 수 있습니다. 데이터에 따르면 sitemap을 설정하면 검색엔진 색인 시간을 약 50% 줄일 수 있습니다.

사실 sitemap 설정은 매우 간단합니다. Astro 공식에서 @astrojs/sitemap 플러그인을 제공하므로 명령 한 줄이면 됩니다.

npx astro add sitemap

이 명령을 실행하면 Astro가 자동으로 astro.config.mjs 파일을 수정하고 sitemap 설정을 추가합니다. 설정 후에는 대략 아래와 같은 모습입니다.

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

export default defineConfig({
  site: 'https://your-site.com',  // 반드시 본인의 도메인으로 바꾸세요
  integrations: [sitemap()],
});

중요: site 필드는 반드시 설정해야 합니다. 그렇지 않으면 sitemap을 생성할 수 없습니다. 제가 직접 밟았던 함정입니다. 처음에 site를 빼먹어서 빌드할 때 계속 오류가 났습니다.

설정한 뒤 npm run build를 실행하면 Astro가 dist/ 디렉터리에 sitemap-0.xml과 sitemap-index.xml 파일을 생성합니다. 웹사이트 페이지가 아주 많다면, 예를 들어 5만 개를 넘는다면 여러 sitemap 파일로 자동 분할됩니다.

한 단계 더 잊지 마세요. 웹사이트의 <head>에 sitemap 링크를 추가합니다.

<link rel="sitemap" href="/sitemap-index.xml" />

Robots.txt: 크롤링 규칙 설정하기

Robots.txt는 검색엔진에 어떤 페이지를 크롤링할 수 있고 어떤 페이지를 크롤링하면 안 되는지 알려줍니다. 예를 들어 백오피스 관리 페이지나 테스트 페이지는 Google에 색인되길 원하지 않을 것입니다.

robots.txt를 설정하는 방법은 세 가지가 있습니다. 저는 가장 간단한 첫 번째 방법을 추천합니다.

방법 1: 정적 파일(초보자 추천)

public/ 디렉터리에 robots.txt 파일을 바로 만듭니다.

User-agent: *
Allow: /

Sitemap: https://your-site.com/sitemap-index.xml

이 설정의 의미는 모든 검색엔진이 모든 페이지를 크롤링하도록 허용하고, sitemap은 이 주소에 있다는 것입니다.

특정 경로를 막고 싶다면 Disallow 규칙을 추가하면 됩니다.

User-agent: *
Allow: /
Disallow: /admin/
Disallow: /test/

Sitemap: https://your-site.com/sitemap-index.xml

방법 2: 동적 생성

astro.config.mjs의 site 설정을 재사용하고 싶다면 src/pages/robots.txt.ts를 만들 수 있습니다.

import type { APIRoute } from 'astro';

const robotsTxt = `
User-agent: *
Allow: /

Sitemap: ${import.meta.env.SITE}/sitemap-index.xml
`.trim();

export const GET: APIRoute = () => {
  return new Response(robotsTxt, {
    headers: { 'Content-Type': 'text/plain' },
  });
};

방법 3: 플러그인 사용

직접 쓰기 귀찮다면 astro-robots-txt 플러그인도 사용할 수 있습니다.

npm install astro-robots-txt

그런 다음 astro.config.mjs에 설정을 추가합니다.

import robotsTxt from 'astro-robots-txt';

export default defineConfig({
  site: 'https://your-site.com',
  integrations: [
    sitemap(),
    robotsTxt(),
  ],
});

Baidu SEO에서 특히 주의할 점

여기서 Baidu 이야기도 해야 합니다. Baidu에는 특수한 요구사항이 있습니다. sitemap-index.xml을 지원하지 않습니다. robots.txt에 sitemap-index.xml을 쓰면 Baidu가 “Robots 차단”이라고 표시하며 크롤링하지 못할 수 있습니다.

웹사이트에서 Baidu SEO도 해야 한다면 방법은 두 가지입니다.

1. robots.txt에는 단일 sitemap 파일 경로, 예를 들어 sitemap-0.xml만 쓰고 sitemap-index.xml은 쓰지 않습니다
2. Baidu용으로 별도의 단순한 sitemap을 준비하고 Baidu Webmaster Tools에서 수동 제출합니다

저는 개인적으로 Google을 중심으로 두고, Baidu는 Webmaster Tools를 통해 sitemap을 수동 제출하는 방식을 씁니다. 대부분의 기술 블로그에서는 Google 트래픽 비중이 더 크기 때문입니다.

Google Search Console에 제출하기

sitemap과 robots.txt를 설정한 뒤에는 Google Search Console에 가서 sitemap을 제출하는 것을 잊지 마세요. 절차는 간단합니다.

1. 웹사이트를 추가하고 소유권을 확인합니다
2. 왼쪽 메뉴에서 “Sitemaps”를 찾습니다
3. sitemap-index.xml을 입력하고 제출합니다

제출 후 보통 1-3일 안에 Google이 크롤링을 시작합니다. Search Console에서 크롤링 진행 상황과 발견된 문제를 볼 수 있습니다. 저는 처음으로 “발견됨”이 “색인 생성됨”으로 바뀌는 것을 봤을 때 정말 큰 성취감을 느꼈습니다.

고급 최적화 - 구조화 데이터(JSON-LD)

솔직히 말하면 구조화 데이터는 이름만 들으면 거창해 보입니다. 하지만 설정은 정말 어렵지 않습니다. 게다가 효과도 꽤 분명합니다.

구조화 데이터란 무엇이고 왜 설정해야 할까?

검색 결과 중 유난히 풍부하게 보이는 결과를 본 적이 있을 겁니다. 예를 들어 글 평점, 게시 시간, 작성자 프로필 이미지, 심지어 레시피의 조리 시간과 칼로리까지 표시되는 결과입니다. 이것이 바로 “Rich Snippets”이고, 그 뒤에는 구조화 데이터가 있습니다.

간단히 말하면 구조화 데이터는 Google이 이해할 수 있는 형식으로 “이것은 블로그 글이다”, “작성자는 누구다”, “게시 시간은 언제다”라고 알려주는 것입니다. 웹사이트에 라벨을 붙이는 것과 비슷합니다.

Google은 JSON-LD 형식을 권장합니다. JSON 기반이라 작성하기도 직관적입니다. 설정한 뒤에는 검색 결과의 클릭률이 꽤 올라갈 수 있습니다. 제 블로그에서는 설정 후 클릭률이 대략 15% 정도 개선되었습니다.

Astro에서 JSON-LD 구현하기

Astro에서 JSON-LD를 설정하는 방법은 매우 간단합니다. set:html 지시문을 쓰면 됩니다. 예를 들어 src/components/StructuredData.astro 같은 컴포넌트를 만듭니다.

---

interface Props {
  type: 'WebSite' | 'BlogPosting' | 'Article';
  title: string;
  description: string;
  author?: string;
  datePublished?: string;
  image?: string;
}

const {
  type = 'Article',
  title,
  description,
  author = 'Your Name',
  datePublished,
  image
} = Astro.props;

const canonicalURL = new URL(Astro.url.pathname, Astro.site);

const structuredData = {
  "@context": "https://schema.org",
  "@type": type,
  "headline": title,
  "description": description,
  "author": {
    "@type": "Person",
    "name": author
  },
  "datePublished": datePublished,
  "image": image ? new URL(image, Astro.site).href : undefined,
  "url": canonicalURL.href,
  "mainEntityOfPage": {
    "@type": "WebPage",
    "@id": canonicalURL.href
  }
};

---

<script type="application/ld+json" set:html={JSON.stringify(structuredData)} />

그런 다음 글 페이지에서 가져다 씁니다.

---

import StructuredData from '../components/StructuredData.astro';

const frontmatter = {
  title: "Astro 웹사이트 SEO 최적화 완전 가이드",
  description: "Astro SEO 설정 방법을 단계별로 설명합니다",
  author: "홍길동",
  pubDate: "2025-12-02",
  coverImage: "/cover.jpg"
};

---

<html>
  <head>
    <StructuredData
      type="BlogPosting"
      title={frontmatter.title}
      description={frontmatter.description}
      author={frontmatter.author}
      datePublished={frontmatter.pubDate}
      image={frontmatter.coverImage}
    />
  </head>
  <body>
    <!-- 글 내용 -->
  </body>
</html>

주의: 반드시 set:html 지시문을 사용해야 합니다. 그렇지 않으면 Astro가 JSON을 텍스트로 이스케이프해서 실제로 동작하지 않습니다.

자주 쓰는 Schema 유형

웹사이트 유형에 따라 다른 Schema를 선택할 수 있습니다.

WebSite: 홈 페이지에 적합하며, Google에 이것이 웹사이트임을 알려줍니다.

{
  "@context": "https://schema.org",
  "@type": "WebSite",
  "name": "웹사이트 이름",
  "url": "https://your-site.com",
  "description": "웹사이트 설명"
}

BlogPosting: 블로그 글에 적합합니다.

{
  "@context": "https://schema.org",
  "@type": "BlogPosting",
  "headline": "글 제목",
  "author": {
    "@type": "Person",
    "name": "작성자 이름"
  },
  "datePublished": "2025-12-02",
  "image": "cover image URL"
}

Article: 뉴스형 글에 적합합니다. BlogPosting과 비슷하지만 Google의 요구사항이 조금 더 엄격합니다.

Vultr - 고성능 NVMe 클라우드 서버, 전 세계 32개 노드, Docker 원클릭 배포

요금 보기 →광고

TypeScript 타입 검사를 원한다면 astro-seo-schema 패키지를 사용할 수 있습니다.

npm install schema-dts astro-seo-schema

이 패키지는 완전한 TypeScript 정의를 제공하므로 작성할 때 자동완성과 힌트를 받을 수 있고 실수도 줄일 수 있습니다.

검증과 테스트

구조화 데이터를 설정한 뒤에는 반드시 올바른지 검증해야 합니다. 두 가지 도구가 있습니다.

1. Schema.org 검증기: 웹페이지 URL을 붙여넣으면 JSON-LD가 표준에 맞는지 확인해줍니다

2. Google Rich Results Test: 더 중요합니다. Google이 구조화 데이터를 올바르게 인식할 수 있는지 알려줍니다

저는 둘 다 쓰는 것을 권장합니다. 가끔 하나는 통과하지만 다른 하나에서는 경고가 뜰 때가 있습니다. 둘 다 통과해야 정말 제대로 설정된 것입니다.

자주 발생하는 오류는 다음과 같습니다.

• 필수 필드 누락(예: datePublished)
• 이미지 URL이 완전하지 않음(상대 경로가 아니라 절대 경로를 써야 함)
• JSON 형식 오류(쉼표가 하나 더 있거나 따옴표가 빠진 경우)

제가 처음 Google 검색 결과에서 글 평점과 게시 시간이 표시되는 것을 봤을 때도 정말 큰 성취감을 느꼈습니다. 설정은 조금 번거롭지만 효과를 보고 나면 모든 노력이 가치 있었다고 느끼게 됩니다.

성능 최적화도 SEO 최적화입니다

많은 사람이 모르는 점이 있습니다. 웹사이트 성능은 SEO에서도 중요한 부분입니다. Google은 페이지 로딩 속도가 검색 순위에 영향을 준다고 명확히 말했습니다. 데이터에 따르면 사용자의 55%는 3초 안에 로드되지 않는 느린 웹사이트를 떠납니다.

Core Web Vitals: Google의 3대 성능 지표

Google은 웹사이트 성능을 세 가지 지표로 측정하며, 이를 통틀어 “Core Web Vitals”라고 부릅니다.

LCP(Largest Contentful Paint): 페이지의 주요 콘텐츠가 로드 완료되는 시간입니다. 기준은 2.5초 미만입니다. 4초를 넘으면 나쁨으로 봅니다.

FID(First Input Delay): 사용자가 처음 페이지 요소를 클릭한 순간부터 브라우저가 반응하기까지의 시간입니다. 기준은 100밀리초 미만입니다.

CLS(Cumulative Layout Shift): 페이지 요소가 갑자기 흔들리거나 밀리는지 보는 지표입니다. 예를 들어 버튼을 누르려는 순간 이미지 로딩이 끝나며 버튼이 아래로 밀려나는 상황입니다. 기준은 0.1 미만입니다.

이 세 지표는 Google 순위에 직접 영향을 줍니다. 좋은 소식은 Astro가 기본적으로 성능이 좋기 때문에 조금만 신경 쓰면 기준을 충족하기 쉽다는 점입니다.

Astro 성능 최적화 팁

이미지 최적화

이미지는 웹사이트를 느리게 만드는 주범인 경우가 많습니다. Astro에는 @astrojs/image 통합이 있었고, 현재는 Astro 코어에 내장되어 이미지를 자동으로 최적화할 수 있습니다.

# 예전 버전은 설치가 필요했지만, 새 버전은 내장되어 있습니다
# npm install @astrojs/image

Astro의 <Image> 컴포넌트를 사용합니다.

---

import { Image } from 'astro:assets';
import myImage from '../assets/my-image.jpg';

---

<Image
  src={myImage}
  alt="이미지 설명"
  width={800}
  height={600}
  loading="lazy"
/>

이 컴포넌트는 자동으로 다음 작업을 합니다.

• 기기 크기에 맞춰 여러 이미지 버전을 생성합니다
• WebP 형식으로 변환합니다(더 작음)
• 지연 로딩을 적용합니다(페이지가 이미지 위치까지 스크롤될 때 로드)

예전에 진행한 한 프로젝트에서는 홈 페이지에 큰 이미지가 10장 있었습니다. 최적화 전 LCP는 4.2초였습니다. <Image> 컴포넌트로 바꾼 뒤 바로 1.8초까지 내려갔습니다.

폰트 최적화

커스텀 폰트도 성능을 떨어뜨리는 요인입니다. 가장 간단한 최적화 방법은 font-display: swap을 추가하는 것입니다.

@font-face {
  font-family: 'MyFont';
  src: url('/fonts/my-font.woff2') format('woff2');
  font-display: swap; /* 핵심 */
}

font-display: swap의 의미는 폰트가 로드되는 동안 먼저 시스템 폰트로 텍스트를 보여주고, 로드가 끝나면 전환한다는 뜻입니다. 이렇게 하면 사용자가 빈 화면을 보지 않게 됩니다.

더 나은 방법은 Google Fonts의 최적화 버전을 사용하는 것입니다.

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">

URL 마지막의 &display=swap에 주목하세요. 이것이 폰트 최적화입니다.

코드 분할과 지연 로딩

Astro의 Islands Architecture 자체가 가장 좋은 코드 분할 방식입니다. 하지만 React, Vue 같은 프레임워크 컴포넌트를 사용한다면 지연 로딩 지시문을 추가하는 것을 잊지 마세요.

---

import MyHeavyComponent from '../components/MyHeavyComponent.jsx';

---

<!-- 컴포넌트가 뷰포트에 들어올 때만 로드 -->
<MyHeavyComponent client:visible />

client:visible 지시문은 컴포넌트가 보이는 영역까지 스크롤될 때까지 기다렸다가 JS를 로드합니다. 첫 화면 속도를 크게 개선할 수 있습니다.

Lighthouse로 성능 모니터링하기

최적화를 마친 뒤 효과를 어떻게 확인할까요? Lighthouse 점수를 보면 됩니다.

Chrome 브라우저에서 F12를 눌러 개발자 도구를 열고 “Lighthouse” 탭을 찾은 뒤 “Analyze page load”를 누르면 됩니다. 사이트에 점수(100점 만점)를 매기고 모든 성능 문제를 보여줍니다.

저는 새 버전을 배포하기 전마다 Lighthouse를 한 번씩 돌려 점수가 90점 이상인지 확인합니다. 90점보다 낮으면 원인을 찾아서 맞춤형으로 최적화합니다.

온라인 도구인 PageSpeed Insights도 있습니다. URL을 입력하면 측정할 수 있고 실제 사용자 성능 데이터도 볼 수 있어 꽤 편합니다.

Astro의 장점은 바로 여기에 있습니다. 기본적으로 JavaScript가 0에 가깝고 성능 기반이 좋습니다. Astro로 블로그를 다시 만든 뒤 제 Lighthouse 점수는 78점에서 바로 98점으로 뛰었습니다. 이 개선은 바로 체감됩니다.

실전 체크리스트와 자주 묻는 문제

설정을 많이 이야기했으니, 하나씩 대조하며 끝낼 수 있도록 체크리스트를 정리했습니다.

SEO 설정 체크리스트(핵심 15개 항목)

기본 설정

KiloClaw - 기업용 매니지드 OpenClaw, AI Agent 오케스트레이션 및 스마트 라우팅

시작하기 →광고

• astro.config.mjs에 site 필드를 설정했다
• BaseHead.astro 컴포넌트를 만들어 meta 태그를 통합 관리한다
• 모든 페이지에 고유한 title이 있다(50-60자)
• 모든 페이지에 description이 있다(120-160자)
• Open Graph 태그(title, description, image, url)를 설정했다
• Twitter Card 태그를 설정했다

Sitemap과 Robots

• @astrojs/sitemap을 설치하고 설정했다
• <head>에 sitemap 링크를 추가했다
• robots.txt 파일을 만들었다
• Google Search Console에 sitemap을 제출했다

구조화 데이터

• 홈 페이지에 WebSite 유형의 JSON-LD를 설정했다
• 글 페이지에 BlogPosting/Article 유형의 JSON-LD를 설정했다
• Schema.org 검증기를 통과했다
• Google Rich Results Test를 통과했다

성능 최적화

• Lighthouse 점수가 90점 이상이다
• Core Web Vitals 세 지표를 충족한다(LCP 2.5s 미만, FID 100ms 미만, CLS 0.1 미만)

이 체크리스트를 출력해 항목별로 확인해보세요. 모두 체크했다면 Astro 웹사이트의 SEO 기본 설정은 거의 끝난 것입니다.

자주 묻는 문제 해결

Q1: 웹사이트가 Google에 색인되지 않으면 어떻게 하나요?

가능한 원인과 해결책은 다음과 같습니다.

1. robots.txt가 크롤링을 막고 있음: robots.txt에 Disallow: /가 있는지 확인하고, 있다면 삭제합니다
2. sitemap을 제출하지 않음: Google Search Console에 가서 sitemap을 제출합니다
3. 사이트가 너무 새로움: 새 웹사이트는 색인되기까지 1-2주가 필요할 수 있으니 기다립니다
4. 콘텐츠 품질이 낮음: Google은 낮은 품질의 콘텐츠를 색인하지 않습니다. 글에 실제 가치가 있는지 확인합니다

Q2: sitemap 제출 후에도 오류가 표시되면요?

다음을 확인하세요.

• astro.config.mjs의 site 필드가 올바른지
• sitemap URL 경로에 정상 접근할 수 있는지(브라우저에 your-site.com/sitemap-index.xml을 입력해 확인)
• 404 오류를 반환하는 페이지가 있는지
• Baidu라면 sitemap-index를 사용했는지 확인(Baidu는 지원하지 않음)

Q3: Baidu SEO는 어떻게 하나요?

Baidu SEO는 Google과 조금 다릅니다.

1. robots.txt에 sitemap-index.xml을 쓰지 말고 단일 sitemap 파일 경로를 씁니다
2. Baidu Webmaster Tools를 통해 sitemap을 수동 제출합니다
3. Baidu는 새 사이트 심사가 더 엄격해 색인 시간이 보통 Google보다 깁니다
4. Baidu는 중국어 콘텐츠의 품질과 독창성을 더 중요하게 봅니다

Q4: 다국어 웹사이트의 SEO 설정은 어떻게 하나요?

웹사이트가 다국어를 지원한다면 hreflang 태그를 추가로 설정해야 합니다.

<link rel="alternate" hreflang="zh-CN" href="https://your-site.com/zh/article" />
<link rel="alternate" hreflang="en-US" href="https://your-site.com/en/article" />
<link rel="alternate" hreflang="x-default" href="https://your-site.com/en/article" />

x-default는 기본 언어 버전을 지정합니다. 이렇게 하면 Google이 각 언어 버전의 관계를 올바르게 인식할 수 있습니다.

지속 개선 제안

SEO는 한 번 설정하고 끝나는 일이 아니라 지속적으로 개선해야 하는 작업입니다.

콘텐츠 정기 업데이트: 연구에 따르면 정기적으로 업데이트되는 웹사이트의 검색 순위는 보통 정적인 웹사이트보다 약 30% 높습니다. 매주 최소 1-2편의 글을 발행하세요.

Google Search Console 데이터 모니터링:

• 어떤 키워드가 트래픽을 가져오는지 확인합니다
• 클릭률이 낮은 페이지를 찾아 title과 description을 개선합니다
• 크롤링 오류를 확인하고 제때 수정합니다

사용자의 검색 키워드 분석:

• 사용자가 어떤 단어로 웹사이트를 찾았는지 봅니다
• 이 단어를 바탕으로 새 콘텐츠를 만듭니다
• 기존 글을 최적화하고 관련 키워드를 늘립니다

클릭률이 낮은 페이지 최적화:

• 어떤 페이지가 노출은 많지만 클릭률이 낮다면 title이나 description이 충분히 매력적이지 않다는 뜻입니다
• 더 끌리는 description으로 다시 씁니다
• title에 숫자, 질문, 감정 표현을 넣습니다

저는 매주 1시간 정도 Search Console 데이터를 보며 최적화할 수 있는 지점을 찾습니다. 이 습관을 유지하면 순위 개선이 꽤 분명하게 나타납니다.

결론

이야기를 많이 했지만, 요약하면 Astro는 기본적으로 SEO에 잘 맞고 설정도 복잡하지 않습니다.

핵심은 세 가지입니다.

1. 기본 meta 태그: title, description, OG 태그를 BaseHead 컴포넌트로 통합 관리합니다
2. Sitemap과 robots.txt: 공식 플러그인으로 명령 한 줄에 끝내고, Google Search Console 제출을 잊지 않습니다
3. 구조화 데이터: JSON-LD를 설정해 Rich Snippets를 노립니다

성능 최적화도 놓치지 마세요. Lighthouse 90점 이상은 기본 요구사항입니다. 이미지는 지연 로딩을 사용하고 폰트에는 font-display: swap을 더하세요. 이런 작은 디테일도 순위 개선에 도움이 됩니다.

SEO 설정은 분명 조금 번거롭습니다. 하지만 순위가 올라가는 순간을 보면 모든 노력이 가치 있었다는 생각이 듭니다. 이 글의 단계를 따르면 30분 안에 핵심 설정을 끝낼 수 있습니다. 1-2주 뒤에는 Google Search Console에서 사이트가 색인되었다는 좋은 소식을 볼 수 있을 것입니다.

이제 Astro 프로젝트를 열고 위 체크리스트를 따라 하나씩 설정해보세요. 설정을 마치면 sitemap을 제출하고 차분히 기다리면 됩니다. 일주일 뒤 색인 상태를 다시 확인하면 순위가 개선된 것을 보고 기분 좋은 놀라움을 느낄 수 있을 것입니다.

힘내세요!