Dotorimook's blog

검색 엔진 최적화(SEO) 해보기

2/18/2026

검색 엔진 최적화(SEO) 해보기

블로그를 Gatsby에서 Astro로 마이그레이션한 후, 검색 엔진 최적화(SEO) 작업을 진행했습니다. 단순히 “검색이 잘 되게” 하는 것을 넘어, 구체적으로 어떤 항목들을 개선했고 각 항목이 왜 중요한지 정리해봅니다.

1. JSON-LD 구조화된 데이터 (Schema.org)

검색엔진이 내 글을 더 “똑똑하게” 이해하도록 돕는 작업입니다.

이게 뭔가요?

JSON-LD(JavaScript Object Notation for Linked Data)는 웹 페이지의 내용을 기계가 이해할 수 있는 구조화된 데이터로 표현하는 방식입니다. Schema.org 표준을 따릅니다.

검색엔진은 이걸 어떻게 보나요?

JSON-LD는 화면상에는 보이지 않지만, **검색엔진의 로봇(크롤러)들만 읽을 수 있는 ‘비밀 쪽지’**와 같습니다.

  1. HTML 속에 숨겨져 있음: 브라우저는 <script type="application/ld+json"> 태그를 실행하지 않고 무시하지만, Google 봇은 이를 발견하고 데이터를 수집합니다.
  2. 데이터 추출: “이 글의 제목은 이거구나”, “작성자는 Dotorimook이구나”, “발행일은 언제구나” 하는 정보를 정확하게 파악합니다.
  3. 검색 결과 반영: 이렇게 수집된 데이터는 단순 텍스트 검색을 넘어 풍부한 검색 결과(Rich Results)를 만드는 데 사용됩니다.

왜 필요한가요?

  • Rich Snippets: 검색 결과에 제목과 설명뿐만 아니라 작성자, 날짜, 이미지 등이 풍부하게 표시될 수 있습니다.
  • AI 검색 대응: 최근의 AI 검색엔진들이 콘텐츠의 구조를 이해하는 데 큰 도움을 줍니다.

어떻게 했나요?

각 블로그 포스트 페이지([...slug].astro)에 BlogPosting 타입의 스키마를 자동으로 생성하여 주입했습니다.

const articleSchema = {
  "@context": "https://schema.org",
  "@type": "BlogPosting",
  "headline": post.data.title,
  "description": post.data.description,
  "datePublished": post.data.date.toISOString(),
  "author": {
    "@type": "Person",
    "name": "Dotorimook"
  },
  // ...
};

2. Open Graph 및 Twitter Card 개선

SNS에 링크를 공유했을 때 예쁘게 보이도록 만드는 작업입니다.

이게 뭔가요?

Open Graph(OG)는 Facebook, 카카오톡, LinkedIn 등에서 링크 공유 시 표시되는 미리보기 정보를 정의하는 프로토콜입니다.

왜 필요한가요?

  • 링크 클릭률(CTR)을 높일 수 있습니다.
  • 공유했을 때 전문성 있어 보입니다.

어떻게 했나요?

기존에 빠져있던 이미지 크기(width, height), 사이트 이름, 로케일 정보를 명시적으로 추가했습니다.

<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:site_name" content="Dotorimook's Blog" />
<meta property="og:locale" content="ko_KR" />

3. 언어 설정 개선 (ko-KR)

사소하지만 중요한 설정입니다.

어떻게 했나요?

기존 <html lang="ko">를 <html lang="ko-KR">로 변경했습니다.

왜 중요한가요?

ko-KR은 “한국어(대한민국)“을 의미하는 표준 코드(BCP 47)입니다. 검색엔진이 한국 지역 사용자에게 콘텐츠를 더 정확하게 타겟팅하도록 돕습니다.

4. Core Web Vitals 최적화

사용자 경험과 검색 순위에 직접적인 영향을 주는 성능 지표입니다.

어떻게 했나요?

  1. 폰트 로딩 최적화: 폰트 CDN에 preconnect를 설정하여 연결 시간을 단축했습니다.
  2. 뷰포트 설정: 모바일 친화적인 viewport 설정을 확인했습니다.
  3. 이미지 CLS 방지: 이미지 로딩 중 레이아웃이 덜컥거리는 현상(Layout Shift)을 막기 위해 이미지 스타일을 개선했습니다.

주의: display: block은 이미지 하단의 불필요한 여백(inline 요소 특성)을 제거하는 역할을 합니다. 하지만, 완벽한 CLS(Cumulative Layout Shift) 방지를 위해서는 이미지에 width와 height 속성을 명시하거나 aspect-ratio를 사용해야 합니다. 이미지가 로드되기 전에 브라우저가 공간을 확보할 수 있도록 말이죠.

.blog-post-content img {
  display: block; /* 이미지 하단 여백 제거 */
  max-width: 100%;
  height: auto;
  /* aspect-ratio: 16 / 9; 처럼 비율을 지정하면 더 좋습니다 */
}

마무리

SEO는 한 번 설정하고 끝나는 것이 아니라 지속적으로 관리해야 하는 작업입니다. 이번 작업을 통해 기본적인 인프라는 튼튼하게 다져놓았으니, 앞으로는 양질의 콘텐츠를 채워나가는 일만 남았네요!

Written by Dotorimook