심층 학습 가이드
링크 공유 썸네일이 비는 이유 | 동적 OG 이미지 계약 맞추기
title, description, image, canonical과 캐시 재수집까지
- 핵심 주제
- SEO와 링크 프리뷰
- 예상 시간
- 5분
- 업데이트
- 2026.04.26
- 키워드
- OG 이미지 · Open Graph · 동적 OG
글 제목과 설명이 좋아도 공유 카드가 비어 있거나 엉뚱한 이미지가 뜨면 클릭은 떨어집니다. OG 이미지는 예쁜 장식이 아니라 링크 유통을 위한 메타데이터 계약입니다. 페이지마다 제목, 설명, 이미지 URL, canonical이 맞아야 카카오톡과 X, 디스코드, 페이스북이 프리뷰를 만듭니다.
읽는 데는 약 10분이면 됩니다. 이미 한 장만 만드는 일이 아니라, 메타데이터 생성과 이미지 라우트, 캐시, 실제 공유 검증이 한 세트라는 점을 먼저 잡습니다. 예쁜 시안만 만들고 메타를 안 맞추면, 공유했을 때 빈 카드가 나와 클릭이 사라집니다. 구현과 검증을 같은 작업으로 묶어 두세요.

막히는 지점도 비슷합니다. 이미지 시안만 예쁘게 만들고 head 태그를 안 맞추거나, 배포 URL이 아닌 로컬만 확인하거나, 이미지를 바꿨는데 플랫폼 캐시를 비우지 않는 경우입니다. 아래는 계약 네 칸부터 재수집까지 한 번에 닫는 순서입니다.
프리뷰가 깨지는 네 칸
| 요소 | 역할 | 실패 시 |
|---|---|---|
| title | 카드 제목 | 클릭 이유가 약해짐 |
| description | 요약 | 맥락이 안 보임 |
| image | 썸네일 | 빈 카드나 엉뚱한 이미지 |
| url | canonical | 중복 URL과 캐시 혼선 |
중요한 점은 사용자 브라우저가 아니라 플랫폼 크롤러가 먼저 본다는 것입니다. 로그인 뒤에만 보이는 이미지, robots에 막힌 이미지, 너무 큰 이미지, 느린 URL은 프리뷰에서 실패할 수 있습니다.

정적 OG와 동적 OG
정적 OG는 모든 페이지가 같은 대표 이미지를 씁니다. 구현은 쉽지만 글마다 차별이 없습니다. 동적 OG는 제목과 카테고리 등으로 글마다 다른 이미지를 만듭니다. 콘텐츠 사이트라면 동적이 클릭 이유에 유리합니다.
Next.js App Router에서 맞출 것
generateMetadata에서 title, description, openGraph.images, alternates.canonical을 페이지 데이터와 맞춥니다. 이미지 라우트(예: opengraph-image)는 크롤러가 접근 가능해야 하고, 보통 1200x630 근처를 씁니다.
💡 Tip: 로컬에서 예쁘게 보여도 크롤러가 못 받으면 실패입니다. 배포 URL로 디버거를 돌리세요.
캐시를 빼먹으면 옛 썸네일이 남는다
플랫폼은 OG를 캐시합니다. 이미지를 바꿨는데 카드가 그대로면 캐시입니다. Facebook Sharing Debugger, X Card Validator 등으로 재수집합니다. 이미지 URL을 버전 쿼리로 바꾸는 방법도 있습니다.
⚠️ 주의: canonical과 og:url이 어긋나면 플랫폼이 다른 페이지를 캐시할 수 있습니다. 공개 URL 하나로 맞추세요.
검증 순서
배포 URL의 HTML head에 og:title, og:description, og:image가 있는지 확인합니다. 이미지 URL을 새 탭으로 열어 200인지 봅니다. 카카오/X/Facebook 디버거로 재수집합니다. 모바일에서도 카드가 깨지지 않는지 봅니다.
AI에게 맡길 때
「예쁜 OG 만들어줘」보다 「generateMetadata와 이미지 라우트를 페이지 slug 기준으로 연결하고, 1200x630, 크롤러 접근 가능, canonical 일치」처럼 계약을 적습니다.
이미지 디자인에서 자주 깨지는 것
텍스트가 너무 작으면 모바일 카드에서 읽히지 않습니다. 좌우 여백을 두고, 제목은 한두 줄로 자릅니다. 배경과 글자 대비가 낮으면 「이미지는 있는데 정보가 없는」 카드가 됩니다. 브랜드 색을 쓰되, 제목이 먼저 읽히는지를 기준으로 잡습니다.
파일은 WebP나 PNG/JPEG 모두 가능하지만, 크롤러가 200으로 받는지가 더 중요합니다. 인증이 필요한 CDN 경로, 만료되는 서명 URL은 피합니다.
프레임워크가 달라도 같은 계약
Next.js의 generateMetadata는 예시일 뿐입니다. Astro나 Cloudflare Worker HTML이어도 og:title, og:description, og:image, og:url만 head에 정확히 있으면 플랫폼은 같은 방식으로 카드를 만듭니다. 생성 지점이 어디든 크롤러가 받는 HTML이 진실입니다.
로컬 프리뷰만 보고 끝내면 실패합니다. 배포 URL의 「페이지 소스 보기」로 태그를 확인하고, 이미지 URL을 새 탭에서 열어 보세요.
운영 중 이미지가 바뀌는 경우
글 제목을 고치면 동적 OG도 다시 그려야 합니다. 이미지 URL이 같으면 플랫폼 캐시가 옛 그림을 붙잡을 수 있으니, 빌드 해시나 ?v=를 붙이거나 디버거로 재수집합니다. 팀에서는 「제목 변경 PR에 OG 재검증」을 체크리스트에 넣으면 사고가 줄어듭니다.
출처와 링크
조사 기준: 2026년 7월. 플랫폼 캐시 동작은 바뀔 수 있으니 배포 후 디버거로 재확인하세요.
자주 묻는 질문
모든 페이지에 같은 OG를 써도 되나요?
가능하지만 콘텐츠 사이트에서는 글마다 차별이 없어 클릭이 약해질 수 있습니다. 홈은 정적, 글은 동적으로 나누는 경우가 많습니다.
이미지 크기 권장은?
많은 플랫폼이 1200x630 비율을 잘 처리합니다. 너무 크면 다운로드가 느려 프리뷰가 실패할 수 있습니다.
바꿨는데 카드가 그대로면?
플랫폼 캐시일 가능성이 큽니다. Sharing Debugger 등으로 재수집하거나 이미지 URL에 버전을 붙이세요.
로그인 필수 페이지의 OG는?
크롤러가 로그인 없이 HTML과 이미지를 받아야 합니다. 봇용 공개 메타와 이미지를 따로 두는 설계가 필요합니다.
Astro나 Cloudflare만 쓰는데 Next 설명이 맞나요?
태그 계약(og:*)은 프레임워크와 무관합니다. Next 예시는 생성 지점을 보여 주는 것이고, 다른 스택도 head에 같은 필드를 넣으면 됩니다.
CDN 이미지와 같은 도메인 이미지는?
둘 다 가능합니다. 중요한 것은 HTTPS, 200 응답, 크롤러 접근, 안정적인 URL입니다.
Related terms
본문과 함께 보면 좋은 사전 용어
Google이 오픈소스로 공개한 AI 에이전트 CLI 도구로, 터미널에서 코드 이해, 파일 조작, 명령어 실행, 대규모 코드베이스 편집을 지원한다. Google의 Gemini 모델을 기반으로 하며, Gemini의 멀티모달 능력을 활용하여 텍스트뿐 아니라 이미지와 비디오 생성까지 가능하다는 것이 독특한 차별점이다. 예를 들어, '이 UI의 스크린샷을 보고 React 컴포넌트를 만들어줘'와 같은 시각적 입력 기반 코딩이 가능하다. 오픈소스 프로젝트로 커뮤니티 기여가 가능하며, Google Cloud 생태계(Cloud Functions, Firebase, Vertex AI 등)와 긴밀하게 통합된다. Gemini Code Assist(IDE 기반 도구)와도 연동되어, CLI에서 시작한 작업을 IDE에서 이어서 할 수 있다. Claude Code, Codex CLI와 함께 3대 CLI 코딩 에이전트를 형성하며, Google 계정만 있으면 무료로 사용할 수 있어 진입 장벽이 낮다.
백엔드·인프라API소프트웨어 애플리케이션 간 상호작용 방식을 정의하는 프로토콜과 규약의 집합으로, AI 코딩 도구 통합과 현대 소프트웨어 아키텍처의 핵심이다. 비유하면, 레스토랑의 메뉴가 손님(클라이언트)과 주방(서버) 사이의 '인터페이스'인 것처럼, API는 소프트웨어 간의 '메뉴'이다. 바이브 코딩에서 API는 두 가지 맥락으로 사용된다: 첫째, AI 모델 API — Claude API, OpenAI API 등 AI 모델을 호출하는 인터페이스로, 모든 AI 코딩 도구의 내부에서 이 API를 통해 모델과 통신한다. 둘째, 앱 API — AI가 생성하는 백엔드 코드의 핵심으로, REST API, GraphQL API 등의 형태로 프론트엔드와 백엔드를 연결한다. AI에게 '사용자 CRUD API를 REST로 만들어줘'라고 하면 Express.js, FastAPI, Next.js API Routes 등을 사용한 엔드포인트 세트를 생성한다. MCP도 본질적으로 'AI 에이전트가 외부 도구를 호출하는 API의 표준화'이다.
AI 모델·프로바이더제미나이Google DeepMind가 개발한 멀티모달 AI 모델 시리즈로, 텍스트·이미지·오디오·비디오·코드를 통합적으로 처리할 수 있는 것이 가장 큰 차별점이다. 다른 모델이 주로 텍스트 기반으로 동작하는 반면, Gemini는 스크린샷을 보고 UI 코드를 생성하거나, 다이어그램을 이해하고 관련 코드를 작성하는 등 시각적 입력을 코딩에 활용할 수 있다. Gemini 2.0 Flash(빠르고 저렴), Gemini Pro(고성능) 등 다양한 변형이 있으며, 용도에 따라 선택할 수 있다. Gemini Code Assist(IDE 기반 코딩 도구)와 Gemini CLI(터미널 에이전트)를 통해 코딩을 지원하며, Google Cloud 생태계(Cloud Functions, Firebase, BigQuery, Vertex AI 등)와 긴밀하게 통합되어 있어 Google Cloud 사용자에게 특히 유리하다. Google의 방대한 데이터와 인프라를 기반으로 하므로, 정보 검색 능력(Grounding with Google Search)이 뛰어나 최신 라이브러리나 API 정보를 반영한 코드 생성에 강점이 있다.
Useful links
실제로 이어서 열어볼 즐겨찾기
Google이 종료한 서비스와 제품을 한눈에 모아, 플랫폼 의존성과 제품 지속성 리스크를 판단하게 해 주는 ‘Google 묘지’ 아카이브입니다.
VIBE 코딩 보안테이텀 시큐리티 Threads쉬운 보안을 지향하는 한국어 보안 계정으로, AI·VIBE 코딩 흐름에서 놓치기 쉬운 보안 감각을 되짚는 데 유용합니다.
VIBE 코딩 레퍼런스웹사이트 해부도 · Website Anatomy MapAI와 웹사이트를 함께 만들 때 ‘그 부분’이 아니라 정확한 UI·웹 용어로 지시할 수 있게 돕는 영-한 시각 사전입니다.
다음 학습
같은 섹션에서 이어 읽기 좋은 콘텐츠
바이브코딩으로 애드센스 부업 시작할 때 | 회원/결제 없이 먼저 막는…
바이브코딩으로 「부업 사이트」를 만들 때 첫 프롬프트가 자주 이렇게 나갑니다. 회원가입, 문의폼, 결제, 관리자 대시보드까지 한 번에. 화면은 빨리 나오지만, 그 순간부터 주문/환불/고객 DB/API 키/로그에 쌓인 이메일이 운영자 책임이 됩니다.
애드센스 부업의 본체는 상품을 직접 파는 일이 아닙니다. 유용한 콘텐츠로 방문을 모은 뒤, 광고 지면으로 수익을 받는 간접 수익화입니다. Google이 광고 매칭과 정산을 담당하고, 게시자는 콘텐츠/정책/트래픽 품질을 지킵니다. (How AdSense works)
읽는 데는 약 10분이면 됩니다. 첫 세션에서 실제로 손댈 일은 「무엇을 빼고, 무엇을 고지하고, 어디에 비밀을 두지 않을지」입니다…
애드센스 심사 전 PSI 체크리스트 | 점수 배점부터 알고 고치기
PSI를 켰는데 점수가 안 움직이면, 대개 고치는 순서부터 틀린 겁니다. 이미지를 압축하고 폰트만 만지는데도 성능이 제자리라면, 점수 배점과 가장 무거운 지표를 먼저 안 본 경우가 많습니다. 애드센스 심사 전 점검은 "체감상 느린 것"이 아니라 "점수에 바로 들어가는 항목"부터 봐야 합니다.
특히 광고가 붙는 사이트는 속도 최적화 글의 조언을 그대로 따라가면 더 망가질 수 있습니다. 대표적인 게 광고 스크립트를 무조건 늦게 넣는 방식입니다. Auto ads나 크기 미지정 반응형 광고가 있으면 오히려 CLS와 수익이 함께 흔들릴 수 있습니다. 그러니 이 글은 폰트 회고가 아니라, 애드센스 심사 전 하루에 끝내는 PSI 체크 순서를 다룹니다.
준비물은 세 가지면 됩니다. 홈/대표 글/목록 URL 하나씩, PSI 모바일 랩 실행 결과, 그리고 "오늘…