개발 slecs

기술 블로그 링크 공유 시 썸네일이 제대로 뜨도록 OG 이미지와 메타 설명

목차

블로그 메인 페이지 SEO를 본격적으로 손봤다. og:image 없이 버텨온 게 사실 좀 부끄러웠는데, 이번에 제대로 정리했다.

왜 지금이었냐

기술 블로그를 운영하면서 "링크 공유할 때 미리보기가 너무 허접하다"는 피드백을 한두 번 들어온 게 아니었다. 슬랙이나 카카오톡에 링크를 붙여넣으면 썸네일이 아예 안 뜨거나, 브라우저 파비콘 같은 작은 아이콘만 나오는 상황. 개발자가 만든 블로그치고는 민망한 수준이었다.

팀 안에서 외부 링크 공유가 잦은 편이라 — 특히 기술 공유나 채용 포트폴리오 목적으로 블로그 링크를 뿌릴 때 — 첫인상이 꽤 중요하다는 걸 새삼 느꼈다. SEO는 "나중에 할 일" 박스에 너무 오래 들어가 있었던 셈.

작업 내용 정리

파일 변경 내용 역할
public/og.png 신규 추가 (1200×630) OG 이미지 원본 리소스
src/layouts/Base.astro meta 태그 템플릿 강화 전체 페이지 공통 SEO head
src/pages/index.astro description 문구 보강 메인 페이지 개별 메타

Base.astro는 모든 페이지가 상속하는 레이아웃이라 여기를 건드리면 사이트 전체에 영향이 간다. 반대로 말하면 한 번만 제대로 잡으면 이후 모든 페이지에서 공짜로 혜택을 받는 구조. index.astro에서는 description을 페이지 단위로 override할 수 있게 prop을 내려받는 패턴으로 정리했다.

og:image 스펙은 Open Graph 표준 기준 1200×630이 사실상 정답이다. 페이스북, 링크드인, 카카오, 슬랙 모두 이 비율(1.91:1)을 기준으로 크롭하기 때문에 이 사이즈를 벗어나면 플랫폼마다 잘리거나 찌그러지는 불상사가 생긴다.

---
// Base.astro props 예시 패턴
interface Props {
  title: string;
  description?: string;
  ogImage?: string;
}

const {
  title,
  description = "기본 사이트 설명 텍스트",
  ogImage = "/og.png",
} = Astro.props;
---

<head>
  <meta property="og:title" content={title} />
  <meta property="og:description" content={description} />
  <meta property="og:image" content={new URL(ogImage, Astro.site).href} />
  <meta property="og:image:width" content="1200" />
  <meta property="og:image:height" content="630" />
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="description" content={description} />
</head>

new URL(ogImage, Astro.site).href로 절대 경로로 바꿔주는 게 포인트다. OG 이미지는 반드시 절대 URL이어야 하고, 상대 경로를 그냥 쓰면 크롤러가 이미지를 못 찾는 경우가 꽤 많다. 이 부분을 놓치면 로컬에서는 잘 동작해도 실제 공유할 때 이미지가 안 나오는 황당한 상황이 발생한다.

meta description은 왜 "강화"였냐

단순히 텍스트 문구를 바꾼 게 아니라 구조적으로 다듬었다. 기존에는 description이 아예 없거나 타이틀 텍스트를 그대로 재활용하는 수준이었는데, 이건 검색 엔진 입장에서도, 사용자 입장에서도 최악의 패턴이다.

좋은 meta description의 조건을 정리하면:

  • 120~160자 이내 — 검색 결과에서 잘리지 않는 적정 길이
  • 행동 유도 요소 포함 — "무엇을 얻을 수 있는가" 명확하게
  • 키워드 자연스럽게 — 억지로 키워드 스터핑 하면 오히려 역효과
  • 페이지별 유니크하게 — 전체 페이지가 동일한 description을 쓰면 크롤러가 중복 콘텐츠로 인식할 수 있음

그동안 이 조건들을 대충 알면서도 "지금 당장 트래픽에 큰 영향 없겠지"라고 미뤄왔다. 근데 팀장 포지션에서 생각해보면 — 이런 기술 부채가 쌓이면 나중에 "SEO 왜 이렇게 안 되냐"는 질문이 들어왔을 때 답이 없어진다. 결국 예방 차원에서라도 기반을 제대로 잡아두는 게 맞다.

검증은 Facebook Sharing Debugger랑 슬랙에 실제로 링크 붙여넣기 해보는 방식으로 했다. 캐시 때문에 반영이 늦을 수 있어서 Debugger에서 "Scrape Again" 한 번 눌러주는 거 잊지 말 것.

작은 작업처럼 보여도 링크 하나가 어떻게 보이느냐는 첫인상의 문제고, 첫인상은 곧 신뢰의 문제다. 다음엔 포스트 개별 페이지에도 동적 OG 이미지를 생성하는 방향으로 확장할 생각이다.

🛒 이 글과 어울리는 추천 상품

*위 링크는 쿠팡파트너스 활동의 일환이며, 일정액의 수수료를 제공받을 수 있습니다.

이어보기

댓글 0

첫 댓글 달아줘.