링크를 붙였을 때 뜨는 그림은 어디서 오나
2026-09-29
미리보기 그림은 og: 태그에서 옵니다. 바꿨는데 안 바뀌면 태그가 아니라 캐시 문제입니다. 카카오는 초기화 주소가 바뀌었고, X는 검증 도구가 없어졌습니다.
카카오톡에 우리 사이트 주소를 붙였는데 엉뚱한 그림이 떴습니다. 분명히 그림을 바꿔 놓았는데 예전 것이 그대로 나옵니다. 이 그림은 어디서 오고, 왜 안 바뀌는 걸까요.
한 줄로 먼저
미리보기는 페이지의 og: 메타태그를 읽어 만듭니다.
그림을 바꿨는데 안 바뀐다면 태그 문제가 아니라 캐시 문제입니다.
플랫폼마다 비우는 창구가 따로 있고, 카카오는 그 주소가 바뀌었습니다.
X는 미리보기 도구 자체가 없어졌습니다.
그림은 어디서 오나
Open Graph라는 규격입니다. 페이스북이 만들었고 지금은 카카오톡·슬랙·디스코드·링크드인이
다 같이 읽습니다. <head> 안에 메타태그로 적습니다.
og:title · og:type · og:image · og:url — 이 네 개는 필수입니다.
— ogp.me (Open Graph protocol)
| 태그 | 무엇 | 필수 |
|---|---|---|
og:title | 미리보기 제목. 페이지 제목과 달라도 된다 | 예 |
og:type | 종류. 보통 website 또는 article | 예 |
og:image | 그림 주소. 절대경로로 적는다 | 예 |
og:url | 이 글의 대표 주소. 캐시의 이름표가 된다 | 예 |
og:description | 한두 문장 설명 | 아니오 |
og:site_name | 사이트 이름. 카드 아래 작게 붙는다 | 아니오 |
og:image:alt | 그림 설명. og:image를 넣었으면 이것도 넣으라고 규격에 적혀 있다 | 권장 |
og:image:width · og:image:height | 그림 크기. 뒤에 나오는 이유로 중요하다 | 권장 |
og: 는 property, twitter: 는 name 입니다
가장 자주 틀리는 자리입니다. 두 규격이 서로 다른 속성을 쓰기 때문입니다.
<meta property="og:title" content="..."> <!-- property -->
<meta name="twitter:card" content="summary_large_image"> <!-- name -->규격대로 og:는 property=, twitter:는 name=으로 적습니다.
twitter: 태그를 아예 안 적어도 X는 og:를 읽어 갈음합니다 —
그쪽 문서에 그렇게 적혀 있습니다. 그러니 둘 중 하나만 고른다면 og: 쪽입니다.
그림 크기 — 숫자로
Meta 문서가 가장 구체적이고, 다른 곳도 대체로 여기에 맞춰져 있습니다.
| 항목 | 값 |
|---|---|
| 권장 크기 | 1200 × 630 이상 |
| 비율 | 1.91 : 1 에 가깝게 — 잘리지 않는다 |
| 최소 크기 | 200 × 200 |
| 파일 크기 | 8MB 이하 |
| 600 × 315 미만 | 카드는 뜨지만 그림이 훨씬 작게 나온다 |
첫 공유부터 그림이 뜨게 하려면
처음 공유할 때는 글자만 나오고 두 번째부터 그림이 뜨는 일이 있습니다. 이유가 문서에 적혀 있습니다.
og:image:width와og:image:height는 크롤러에게 그림 크기를 알려 주어 그림을 따로 내려받아 처리하지 않고 곧바로 그릴 수 있게 한다.
— Meta 공유 문서(이미지 사양)
크기를 안 적어 두면 크롤러가 그림을 받아 크기를 재는 동안 카드가 먼저 나갑니다. 두 줄 적어 두면 첫 공유부터 그림이 붙습니다.
우리 사이트는 실제로 이렇게 나갑니다
남의 사이트를 점검하기 전에 우리 것을 봤습니다. 주소를 그대로 받아 태그만 뽑았습니다.
curl -s https://taeyeun.com/notes/pension-credit/ | grep "og:"| 나가는 것 | 빠진 것 |
|---|---|
og:type · og:title · og:description ·
og:url · og:locale · og:image ·
og:image:alt · twitter:card · twitter:image |
og:site_nameog:image:width · og:image:height |
필수 네 개는 다 있고 og:image:alt도 있습니다.
대신 크기 두 줄이 없어서 첫 공유에서 그림이 늦을 수 있고,
글마다 그림을 따로 만들지 않아 모두 같은 기본 그림이 나갑니다.
점검법을 써 보면 자기 것이 먼저 걸립니다.
바꿨는데 안 바뀌는 이유
플랫폼은 한 번 읽은 미리보기를 저장해 둡니다. 사람이 링크를 볼 때마다 남의 사이트를 긁으러 가면 느리고 그 서버에도 부담이기 때문입니다. 그래서 태그를 고쳐도 저장된 옛 카드가 계속 나옵니다. 비우는 창구는 이렇습니다.
| 어디 | 비우는 곳 | 상태 |
|---|---|---|
| 카카오톡 | developers.kakao.com/tool/debugger/sharing — 공유 디버거 |
카카오 로그인 필요 |
| 페이스북 · 인스타그램 | developers.facebook.com/tools/debug/ — 주소를 넣고 다시 스크랩 |
열린다 |
| 링크드인 | linkedin.com/post-inspector/ |
열린다 |
| X (트위터) | 공개 검증 도구가 없어졌다. 옛 주소는 로그인 화면으로 넘어간다 | 없음 |
| 네이버 · 슬랙 · 디스코드 | 공개된 초기화 창구가 없다 | 없음 |
⚠️ 카카오 캐시 초기화 주소가 바뀌었습니다
한국어로 검색하면 거의 모든 글이 developers.kakao.com/tool/clear/og를 알려 줍니다.
직접 눌러 봤습니다.
curl -o /dev/null -w "%{http_code} -> %{redirect_url}" \
https://developers.kakao.com/tool/clear/og
302 -> https://developers.kakao.com/tool/debugger/sharing옛 주소는 살아 있지만 공유 디버거로 넘겨보냅니다.
그리고 그 디버거는 카카오 계정 로그인(accounts.kakao.com)으로 한 번 더 넘어갑니다.
"주소만 넣으면 된다"고 적힌 글들은 로그인이 없던 시절 이야기입니다.
창구가 없을 때 쓰는 우회
캐시는 보통 주소 단위로 잡힙니다. 그래서 주소를 살짝 다르게 만들면 플랫폼이 새 주소로 보고 다시 긁어 옵니다.
https://example.com/글/?v=2다만 확실한 방법은 아닙니다. 플랫폼이 og:url을 캐시의 이름표로 쓰면
주소를 바꿔도 같은 카드가 나옵니다. 그리고 이렇게 공유한 주소는 원래 주소와 갈라지니
og:url과 canonical은 원래 주소로 두는 편이 낫습니다.
그 전에, 크롤러가 들어오긴 하는지
캐시를 비워도 그림이 안 뜨면 순서를 거꾸로 봅니다. 미리보기를 만드는 것은 사람의 브라우저가 아니라 각 플랫폼의 크롤러입니다. 방화벽이나 봇 차단이 이들을 막고 있으면 태그가 아무리 완벽해도 카드가 안 나옵니다. 크롤러 이름을 붙여 직접 불러 보면 됩니다.
curl -o /dev/null -w "%{http_code}" \
-A "facebookexternalhit/1.1;kakaotalk-scrap/1.0;" \
https://taeyeun.com/notes/pension-credit/| 크롤러 이름(User-Agent) | 누구 |
|---|---|
kakaotalk-scrap | 카카오톡 |
facebookexternalhit | 페이스북 · 인스타그램 |
Twitterbot | X |
Slackbot-LinkExpanding | 슬랙 |
Discordbot | 디스코드 |
Yeti | 네이버 |
이 여섯으로 우리 글을 불러 보니 전부 200이 돌아왔습니다. 하나라도 403이나 503이면 거기서부터가 원인입니다. 봇을 걸러 주는 앞단을 쓰면 실제로 이런 일이 생깁니다.
순서대로 점검하면
- 태그가 나가는지 —
curl로 받아og:를 찾아본다. 자바스크립트로 그려 넣으면 크롤러는 못 읽는다 - 그림 주소가 절대경로인지 —
/og/a.jpg가 아니라https://…/og/a.jpg - 그림이 혼자 열리는지 — 로그인이 필요한 자리에 두면 크롤러는 못 받는다
- 크기가 1200 × 630 이상, 8MB 이하인지
- 크롤러가 200을 받는지 — 위의 여섯으로
- 그래도 안 바뀌면 캐시 — 카카오 · 페이스북은 창구에서 비운다
정리하면
- 필수는 네 개 —
og:title·og:type·og:image·og:url - 1200 × 630 · 1.91:1 · 8MB 이하
- width · height를 적으면 첫 공유부터 그림이 뜬다
- 카카오 초기화는
/tool/debugger/sharing— 옛 주소 안내는 낡았고 로그인이 필요하다 - X는 검증 도구가 없다 — 태그를 맞게 적어 두는 것 말고 할 일이 없다
- 안 바뀌면 캐시, 안 나오면 크롤러 차단 — 원인이 다르다
이어서 읽기
- 느린 사이트가 검색에서 밀리는 진짜 조건
- FAQ 리치결과가 사라진 뒤의 구조화 데이터
- 네이버에만 안 나올 때 — 공식 가이드대로 점검하는 순서
- AI에게 내 글을 줄 것인가 — 크롤러 7종과 robots.txt
근거
- ogp.me — Open Graph protocol. 필수 네 개(og:title · og:type · og:image · og:url) ·
og:image:alt권장 ·og:image:width·og:image:height - Meta 공유 문서 — 이미지 사양 — 1200 × 630 이상 · 1.91:1 · 최소 200 × 200 · 8MB 이하 · 600 × 315 미만은 작게 표시 · width · height로 첫 공유 즉시 렌더
- X 카드 문서 — Open Graph는
property=,twitter:는name=.twitter:가 없으면og:로 갈음한다 - 직접 확인 —
developers.kakao.com/tool/clear/og→ 302 →/tool/debugger/sharing→ 303 →accounts.kakao.com(로그인) - 직접 확인 —
cards-dev.twitter.com/validator→ 307 → 로그인 화면 - 직접 확인 — 페이스북 공유 디버거 · 링크드인 Post Inspector는 200으로 열린다
- 직접 확인 — 크롤러 6종 User-Agent로 이 사이트를 호출, 전부 200
2026년 9월 29일에 규격 문서를 읽고 각 도구 주소를 직접 눌러 확인했습니다. 플랫폼 도구 주소는 예고 없이 바뀝니다 — 카카오가 그랬습니다. 안 되면 도구 주소부터 다시 확인해 보세요.