OG 이미지 설정 기준 · 카드가 안 뜰 때 확인 순서
OG 이미지는 태그를 고쳐도 캐시가 살아 있으면 화면이 바뀌지 않고, 캐시를 지워도 이미지 주소가 상대 경로면 영원히 안 뜬다. 카드가 실제로 읽는 태그 네 개와 권장 규격, 플랫폼별 캐시 초기화 방법까지 확인해야 할 순서대로 정리했다.
OG 이미지는 링크를 공유했을 때 상대방 화면에 뜨는 미리보기 카드의 대표 이미지다. 페이지 HTML의 <head> 안에 <meta property="og:image" content="..."> 형태로 넣고, 카카오톡·슬랙·X·페이스북·디스코드처럼 링크를 카드로 펼쳐 보여주는 서비스가 그 페이지를 긁어서 이 태그를 읽는다. 권장 규격은 가로 1200px, 세로 630px이고, 주소는 https://로 시작하는 절대 URL이어야 한다. 카드가 안 뜨거나 예전 이미지가 계속 뜬다면 원인은 대개 셋 중 하나다. 태그가 아예 없거나, 이미지 주소가 상대 경로거나, 플랫폼이 예전에 긁어 둔 결과를 그대로 다시 보여주고 있는 것이다.
이 글은 태그 목록을 나열하기보다 확인 순서에 무게를 둔다. 태그를 아무리 다시 써도 캐시가 살아 있으면 화면은 안 바뀌고, 캐시를 아무리 지워도 이미지 주소가 상대 경로면 영원히 안 뜬다. 순서가 틀리면 하루를 통째로 날린다.
미리보기 카드가 실제로 읽는 태그는 네 개다
Open Graph 태그는 종류가 많지만, 카드 한 장을 만드는 데 실제로 쓰이는 것은 네 개다. 나머지는 있으면 좋고 없어도 카드가 깨지지 않는다.
| 태그 | 역할 | 없으면 생기는 일 |
|---|---|---|
og:title | 카드의 굵은 제목 | 플랫폼이 <title>이나 본문 첫 줄을 임의로 가져다 쓴다 |
og:description | 제목 아래 설명 두어 줄 | 설명 없이 제목만 뜨거나, 본문 일부가 잘려 들어간다 |
og:image | 카드 이미지 | 이미지 없는 텍스트 링크로 표시된다 |
og:url | 이 페이지의 대표 주소 | 추적 파라미터가 붙은 주소가 그대로 카드에 박힌다 |
og:url은 빼먹기 쉬운데, 빼먹으면 조용히 손해를 본다. 광고나 뉴스레터에서 ?utm_source=...가 붙은 링크를 누군가 그대로 복사해 단톡방에 올리면, 그 파라미터까지 포함된 주소가 카드의 정체가 된다. 같은 글인데 플랫폼 입장에서는 다른 페이지로 취급되고, 공유 수치도 쪼개진다.
여기에 선택적으로 붙이는 태그가 셋 있다.
og:type: 대부분website, 블로그 글이면article로 둔다.og:site_name: 카드 위쪽에 뜨는 사이트 이름이다.og:image:alt: 이미지를 못 보는 사용자를 위한 설명이다.
og:site_name은 브랜드가 알려지지 않았을수록 값이 있다. 낯선 도메인만 떠 있는 카드보다 서비스 이름이 함께 뜨는 카드가 눈에 덜 낯설다. 다만 이건 내가 여러 번 겪은 인상이고, 수치로 증명해 본 적은 없다.
1200x630은 어디서 나온 숫자인가
가로세로 비율이 대략 1.91:1이다. Open Graph 명세가 정해 둔 숫자는 아니다. 큰 이미지 카드를 지원하는 플랫폼들이 각자 권장하는 값이 이 근처로 모였고, 이 비율에 맞으면 이미지가 카드 폭 전체를 채우는 큰 레이아웃으로 표시된다.
여기서 실무적으로 중요한 것은 픽셀 수가 아니라 어떤 레이아웃으로 떨어지느냐다. 이미지가 너무 작거나 비율이 정사각형에 가까우면, 플랫폼은 큰 카드 대신 왼쪽에 작은 썸네일을 붙인 목록형 카드로 강등시킨다. 같은 이미지를 넣었는데 어떤 곳에서는 시원하게 뜨고 어떤 곳에서는 우표만 하게 뜨는 이유가 이것이다.
그래서 규격을 맞추는 목적은 "선명하게 보이려고"가 아니라 "큰 카드로 뜨게 하려고"에 가깝다. 1200x630을 그대로 쓰면 대부분의 플랫폼에서 큰 카드가 나온다. 굳이 더 키운다면 2400x1260처럼 같은 비율의 2배수를 쓴다. 고해상도 화면에서 덜 뭉개진다.
예외가 하나 있다. 이미지 자체가 정사각형 로고뿐이고 다른 소재가 없다면, 억지로 1200x630 캔버스에 로고를 늘려 넣는 것보다 여백을 둔 채 중앙에 배치하는 편이 낫다. 늘어난 로고는 브랜드에 손해다.
파일 형식과 용량은 어디까지 맞춰야 하나
| 항목 | 권장 | 이유 |
|---|---|---|
| 크기 | 1200 x 630 px | 큰 카드 레이아웃으로 표시되는 기준 비율 |
| 비율 | 1.91:1 | 이 비율에서 벗어날수록 잘리는 영역이 커진다 |
| 형식 | PNG 또는 JPG | 가장 넓게 지원된다 |
| 피할 형식 | SVG, WebP, AVIF | 일부 크롤러가 못 읽고 카드에서 통째로 빠진다 |
| 애니메이션 | GIF 비권장 | 첫 프레임만 쓰이거나 아예 무시된다 |
| 용량 | 가볍게 유지 | 무거우면 크롤러가 내려받기를 포기하는 경우가 있다 |
| 접근 | 로그인 없이 열리는 공개 URL | 크롤러는 로그인하지 않는다 |
형식 줄이 함정이다. 사이트 전체를 WebP로 최적화해 두면 이미지 성능은 좋아지는데, 그 최적화가 OG 이미지에까지 적용되는 순간 일부 플랫폼에서 카드 이미지가 사라진다. OG 이미지만은 최적화 파이프라인에서 빼고 PNG나 JPG 원본을 그대로 두는 편이 안전하다.
용량은 정해진 상한을 외우기보다, 브라우저 새 탭에서 그 이미지 주소를 열었을 때 즉시 뜨는지로 판단하는 편이 빠르다. 눈에 띄게 로딩이 걸리면 크롤러에게도 무겁다. 본문 이미지 쪽 용량을 줄이는 기준은 이미지 용량 줄이는 기준에 따로 정리해 두었는데, OG 이미지에는 그 기준을 그대로 적용하면 안 된다. 본문 이미지는 WebP로 바꾸는 것이 이득이지만 OG 이미지는 그 순간 카드에서 빠진다.
절대 URL이 아니면 이미지는 안 뜬다
가장 흔한 실패다. 페이지 안에서 <img src="/images/og.png">는 정상 동작하니까, OG 태그에도 같은 경로를 그대로 넣는다. 브라우저에서 페이지를 열면 이미지가 잘 보이므로 문제를 눈치채지 못한다.
하지만 상대 경로를 페이지 주소 기준으로 풀어 주는 크롤러가 있고 안 풀어 주는 크롤러가 있다. 어느 쪽이 읽으러 올지 고를 수 없으니 og:image에는 반드시 도메인부터 적는다.
- 안 되는 값:
/images/og.png - 안 되는 값:
//example.com/images/og.png - 되는 값:
https://example.com/images/og.png
여기에 딸린 함정이 셋 더 있다.
도메인 표기를 사이트와 통일한다. 사이트는 www 없이 쓰는데 OG 이미지 주소만 www가 붙어 있으면, 리다이렉트를 거치는 과정에서 일부 크롤러가 포기한다.
HTTP 주소를 남겨두지 않는다. 사이트가 HTTPS인데 이미지 주소만 http://면 그 이미지를 버리는 플랫폼이 있다. 어디가 버리고 어디가 봐주는지 외우는 것보다 전부 HTTPS로 통일하는 편이 빠르다.
배포할 때 개발 서버 주소가 박제되지 않게 한다. 로컬에서 http://localhost:3000/og.png로 테스트한 값이 그대로 배포에 실려 나가는 사고가 있다. 이 경우 내 화면에서는 멀쩡히 보이고 남의 화면에서만 안 보인다. 확인은 반드시 다른 기기나 시크릿 창에서 한다.
이미지를 바꿨는데 예전 것이 계속 뜬다
이건 버그가 아니라 설계된 동작이다. 링크가 공유될 때마다 매번 원본 페이지를 긁으면 서버가 버티지 못하니, 각 플랫폼은 한 번 긁은 결과를 자기 쪽에 저장해 두고 한동안 재사용한다.
그래서 이런 일이 벌어진다.
- 이미지 파일을 같은 이름으로 덮어썼는데 카드에는 예전 그림이 뜬다.
- 제목을 고쳤는데 카드 제목만 옛날 문구다.
- A 서비스에서는 새 이미지가 뜨는데 B 서비스에서는 아직 옛날 것이다.
마지막 줄이 핵심이다. 캐시는 플랫폼마다 따로 있다. 슬랙에서 새 이미지가 보인다고 카카오톡도 갱신됐다는 뜻이 아니다. 카드가 중요한 서비스라면 서비스별로 각각 확인해야 한다.
캐시를 강제로 갱신하는 방법
방법은 셋이고, 확실한 순서대로 적는다.
1. 파일 이름을 바꾼다. og.png를 og-2.png로 저장하고 태그의 주소를 바꾼다. 플랫폼 입장에서는 처음 보는 주소이므로 캐시가 있을 수 없다. 가장 확실하고, 어떤 플랫폼에도 통한다. 대신 예전 링크가 이미 퍼져 있다면 그 카드들은 옛날 이미지를 계속 들고 있다.
2. 쿼리 파라미터를 붙인다. og.png?v=2처럼 뒤에 버전을 붙인다. 파일을 새로 만들지 않아도 되어 편하다. 다만 이 방식은 일부 환경에서 파라미터를 무시하고 같은 이미지로 취급하기도 한다. 안 통하면 1번으로 간다.
3. 플랫폼이 제공하는 재수집 도구를 쓴다. 페이스북·X·링크드인·카카오는 각각 개발자 사이트에 URL을 넣고 다시 긁게 하는 도구를 두고 있다. 도구 이름과 주소는 시기에 따라 바뀌므로 각 플랫폼의 개발자 문서에서 확인한다.
| 상황 | 먼저 시도할 것 | 안 되면 |
|---|---|---|
| 이미지만 바뀌지 않음 | 파일 이름 변경 | 플랫폼 재수집 도구 |
| 제목·설명만 옛날 것 | 플랫폼 재수집 도구 | 공유 주소에 파라미터 추가 |
| 특정 메신저에서만 옛날 것 | 그 플랫폼의 재수집 도구 | 파일 이름 변경 후 재공유 |
| 아직 아무도 공유하지 않은 새 글 | 조치 불필요 | 첫 공유 전에 미리 검증 |
마지막 줄이 사실 가장 중요하다. 캐시 문제는 공유되기 전에 확인하면 애초에 생기지 않는다. 새 글을 올렸으면 단톡방에 뿌리기 전에 나 혼자 있는 채팅방이나 메모 채널에 먼저 링크를 던져 본다. 링크 하나 던져 보면 끝나는 일이고, 이 습관을 붙여 두면 캐시와 씨름할 일 자체가 줄어든다.
X(트위터) 카드 태그는 별도 세트다
X는 Open Graph와 별개로 자체 태그를 본다. 이름 앞이 og:가 아니라 twitter:이고, property가 아니라 name 속성으로 쓴다.
| 태그 | 값 예시 | 설명 |
|---|---|---|
twitter:card | summary_large_image | 큰 이미지 카드로 표시 |
twitter:title | 글 제목 | 없으면 og:title로 대체된다 |
twitter:description | 요약 | 없으면 og:description으로 대체된다 |
twitter:image | 절대 URL | 없으면 og:image로 대체된다 |
twitter:site | @계정명 | 카드에 계정 표시 |
실무적인 결론은 이렇다. twitter:card 한 줄만 추가하고 나머지는 OG 태그에 맡겨도 대체로 문제없다. 제목과 설명, 이미지는 OG 값으로 대체되기 때문이다. 이 한 줄이 없으면 이미지가 있어도 작은 카드로 뜨는 경우가 있으니 그것만 챙긴다.
두 벌을 다 관리하기로 했다면 값을 서로 다르게 두지 않는 편이 낫다. 나중에 어느 쪽을 고쳤는지 헷갈려서 한쪽만 옛날 문구로 남는다.
카카오톡에서는 무엇이 다른가
국내 서비스라면 공유된 링크가 카카오톡 대화창을 거치는 경우가 많다. 여기서 카드가 안 예쁘면 다른 곳이 다 멀쩡해도 체감상 실패다.
카카오는 Open Graph 태그를 읽는다. 별도 규격이 따로 있는 것이 아니라 og:title, og:description, og:image를 그대로 본다. 그러니 OG를 제대로 넣는 것이 곧 카카오 대응이다.
캐시가 길게 유지된다. 다른 곳에서 새 이미지가 보이는데 카카오만 옛날 그림인 상황이 흔하다. 카카오 개발자 사이트에 캐시를 초기화하는 도구가 있고, 그게 안 통하면 파일 이름을 바꾸는 쪽이 빠르다.
잘리는 영역이 화면마다 다르다. 채팅방 안에서 보이는 카드와 목록에서 스치듯 보이는 미리보기가 같은 비율이 아니다. 그래서 카카오를 주 채널로 쓴다면 이미지 가장자리에 정보를 두면 안 된다.
크롤러가 접근할 수 있어야 한다. robots.txt로 이미지 폴더를 막아 두었거나, 보안 설정이 외부 요청을 걸러내면 이미지 주소가 아무리 정확해도 카드가 비어 나온다. 이건 카카오만의 문제는 아니다. 다만 태그도 주소도 멀쩡한데 카드만 비어 나온다면 이 경우를 의심할 차례다.
카드가 아예 안 나올 때 무엇을 확인하나
증상을 보고 원인을 좁힌다. 위쪽 줄일수록 흔한 원인이니 위에서부터 훑는다.
| 증상 | 유력한 원인 | 확인 방법 |
|---|---|---|
| 카드 자체가 안 뜨고 링크만 파랗게 | OG 태그가 없거나 <head> 밖에 있음 | 페이지 소스 보기에서 og: 검색 |
| 제목·설명은 뜨는데 이미지만 없음 | 상대 경로이거나 형식이 WebP/SVG | 이미지 주소를 새 탭에서 직접 열기 |
| 이미지 주소를 열면 404 | 배포 시 이미지 파일 누락 | 실제 서버 경로 확인 |
| 예전 이미지가 계속 뜸 | 플랫폼 캐시 | 파일 이름 변경 또는 재수집 도구 |
| 내 폰에서만 잘 보임 | 개발 서버 주소가 박제됨 | 시크릿 창·다른 기기에서 확인 |
| 특정 플랫폼에서만 안 뜸 | 그 플랫폼의 캐시 또는 형식 제한 | 다른 플랫폼과 비교 |
| 전부 안 뜨는데 태그는 정상 | 크롤러 차단(robots, 방화벽, 로그인) | 로그아웃 상태로 접근 테스트 |
| 엉뚱한 이미지가 뜸 | 본문 첫 이미지를 대신 가져감 | og:image 누락 여부 확인 |
맨 아래 줄은 헷갈리기 쉽다. og:image가 없으면 플랫폼이 알아서 본문에서 이미지를 하나 골라 오는 경우가 있다. 그 결과가 그럴듯해 보여서 "태그는 잘 들어갔나 보다"라고 넘어가는데, 사실은 아무 태그도 안 읽힌 상태다. 다른 글에서는 로고나 광고 배너가 대표 이미지로 뜬다.
자바스크립트로 렌더링되는 사이트라면 확인 지점이 하나 더 있다. OG 태그는 서버가 내려주는 HTML에 이미 들어 있어야 한다. 미리보기 크롤러는 대체로 자바스크립트를 실행하지 않으므로, 브라우저에서 실행된 다음 붙는 태그는 읽히지 않는다. 개발자 도구의 Elements 탭이 아니라 페이지 소스 보기로 확인해야 하는 이유가 이것이다. 이 둘은 서로 다른 것을 보여준다.
이미지 안의 글자는 잘린다는 전제로 만든다
같은 이미지도 플랫폼마다 다르게 잘린다. 어떤 곳은 위아래를, 어떤 곳은 좌우를 자른다. 목록 미리보기에서는 정사각형에 가깝게 잘리기도 한다.
그러니 규칙은 하나다. 중요한 것은 전부 가운데에 둔다.
- 텍스트는 가로세로 모두 중앙 정렬에 가깝게 배치한다.
- 가장자리에는 배경색이나 장식만 둔다. 로고를 구석에 박으면 잘려 나간다.
- 글자 수를 줄인다. 카드는 스치듯 지나가는 화면이라 한 줄이 한계다.
- 글자를 키운다. 축소된 썸네일에서도 읽혀야 한다.
- 배경과 글자의 명도 차이를 크게 둔다. 사진 위에 흰 글씨를 얹으면 사진에 따라 안 읽힌다.
블로그 글이 많다면 제목을 자동으로 얹은 이미지를 생성하는 방식이 편하다. 다만 이건 글자 길이에 따라 레이아웃이 깨지기 쉬우므로, 제목이 아주 긴 글 두어 개를 골라 미리 확인해 둔다.
반대로 글 수가 적다면 굳이 자동화할 이유가 없다. 대표 이미지 한 장을 잘 만들어 전 페이지에 공통으로 쓰는 편이 관리가 쉽고, 카드에서 브랜드가 일관되게 보인다.
페이지마다 다른 이미지가 필요한가
이건 상황을 모르면 답할 수 없다. 판단 기준은 링크가 실제로 어디서 도는지다.
공통 이미지 한 장으로 충분한 경우. 링크가 주로 회사 계정이나 담당자를 통해 나가고, 공유되는 페이지 종류가 몇 개 안 된다. 이때는 브랜드 이미지 한 장이 오히려 낫다.
페이지별 이미지가 필요한 경우. 블로그 글이 계속 쌓이고 독자가 글을 서로 공유한다. 카드 이미지가 전부 같으면 어떤 글의 링크인지 구분이 안 되고, 같은 그림이 반복되면 이미 본 글로 착각해 안 누른다.
중간 지점. 카테고리별로 몇 장을 만들어 돌려쓴다. 관리 비용과 구분 가능성의 절충이고, 대부분의 소규모 팀에는 이 정도가 현실적이다.
어느 쪽이든 기본 이미지는 반드시 있어야 한다. 페이지별 이미지가 없을 때 빈 카드로 떨어지지 않게 받아 주는 안전망이다.
검색 결과 스니펫과 미리보기 카드는 다른 것이다
여기서 자주 섞인다. OG 태그를 잘 넣으면 구글 검색 결과의 제목과 설명도 그대로 바뀔 것이라고 기대하는데, 그렇지 않다.
검색 스니펫은 구글이 만든다. 구글 검색 센터 문서는 스니펫을 페이지 내용과 meta description을 재료로 검색어에 맞춰 그때그때 만든다고 설명한다. 그 재료 목록에 og:description은 없다. 넣어 두면 언젠가 반영되리라 기대할 근거가 없다는 뜻이다. 검색 결과에 나오는 문구가 마음에 안 든다면 OG 태그가 아니라 페이지 제목과 본문, meta description을 손봐야 한다.
검색 결과의 이미지도 별개다. 구글 이미지 문서가 다루는 대상은 본문 안의 <img> 이미지이고, 파일 이름·alt 텍스트·주변 문맥·이미지 사이트맵 같은 신호를 권장사항으로 든다. og:image를 잘 만드는 것과 이미지 검색에 잘 잡히는 것은 별도의 작업이다.
정리하면 이렇다.
| 목적 | 다루는 것 | 안 통하는 것 |
|---|---|---|
| 메신저·SNS 미리보기 카드 | og:*, twitter:* | meta description |
| 구글 검색 스니펫 | 페이지 제목·본문, meta description | og:description |
| 구글 이미지 검색 | 본문 <img>, alt, 파일 이름, 이미지 사이트맵 | og:image |
셋을 한 번에 해결하는 태그는 없다. 대신 서로 방해하지도 않으니 우선순위를 정해 하나씩 하면 된다. 링크 공유가 주 유통 경로라면 OG부터, 검색 유입이 주라면 제목과 본문부터다.
처음 세팅할 때의 확인 순서
새로 붙이는 경우에도, 안 되는 것을 고치는 경우에도 순서는 같다.
- 페이지 소스 보기에서
og:를 검색한다. 네 개 태그가<head>안에 있는지 본다. og:image값을 복사해 새 탭에 붙여 넣는다. 이미지가 바로 뜨는지 확인한다.- 그 주소가
https://로 시작하고 도메인 표기가 사이트와 같은지 본다. - 이미지 형식이 PNG나 JPG인지 확인한다.
- 시크릿 창이나 로그아웃 상태에서 페이지가 열리는지 본다.
- 나만 있는 채팅방에 링크를 보내 카드를 눈으로 확인한다.
- 카드가 실제로 도는 플랫폼마다 6번을 반복한다.
- 수정했다면 캐시 갱신을 거친 뒤 다시 6번으로 돌아간다.
여덟 단계 모두 브라우저 하나로 끝나고 새로 붙일 도구도 없다. 그리고 한 번 제대로 잡아 두면 이후에 올리는 글에는 같은 문제가 반복되지 않는다. 개별 글이 아니라 템플릿 단위의 문제이기 때문이다.
자주 묻는 질문
OG 태그를 넣었는데도 카드가 안 뜹니다. 무엇부터 봐야 하나요?
페이지 소스 보기로 태그가 서버 HTML에 들어 있는지부터 확인하십시오. 개발자 도구의 Elements 탭에는 보이는데 소스 보기에는 없다면, 자바스크립트로 나중에 붙는 태그라 크롤러가 읽지 못합니다. 태그가 정상이라면 다음은 이미지 주소입니다. 그 값을 새 탭에 그대로 붙여 넣어 이미지가 뜨는지 보십시오. 안 뜨면 상대 경로이거나 파일이 배포되지 않은 것입니다.
이미지를 새로 올렸는데 카카오톡에서만 예전 그림이 뜹니다.
캐시입니다. 카카오는 한 번 수집한 결과를 비교적 오래 유지합니다. 카카오 개발자 사이트의 캐시 초기화 도구를 먼저 써 보시고, 그래도 그대로면 이미지 파일 이름을 바꾸는 방법이 가장 확실합니다. 새 파일 이름은 플랫폼 입장에서 처음 보는 주소이므로 캐시가 존재할 수 없습니다.
OG 이미지를 잘 넣으면 구글 검색 결과에도 반영되나요?
아닙니다. 구글 검색 센터 문서는 검색 결과의 설명을 페이지 내용과 meta description을 재료로 구글이 직접 구성한다고 설명합니다. 그 재료 목록에 og:description은 없습니다. 검색 결과 문구를 바꾸고 싶다면 페이지 제목과 본문, meta description을 손보셔야 합니다.
글마다 다른 이미지를 만들어야 하나요?
링크가 어디서 도는지에 따라 다릅니다. 공유가 주로 회사 계정을 통해서만 일어나고 페이지 종류가 몇 개 안 된다면 공통 이미지 한 장으로 충분합니다. 반대로 블로그 글이 계속 쌓이고 독자들끼리 링크를 주고받는다면, 같은 그림이 반복되어 이미 본 글로 오인될 수 있으므로 글별 또는 카테고리별 이미지를 권합니다. 어느 쪽이든 기본 이미지는 반드시 두십시오.
이미지에 글자를 넣어도 되나요?
넣어도 되지만 잘린다는 전제로 배치하십시오. 플랫폼마다 자르는 방향과 비율이 다르고, 목록 미리보기에서는 정사각형에 가깝게 잘리기도 합니다. 중요한 문구와 로고는 가운데에 모으고 가장자리는 배경으로 비워 두시면 어디에서 잘려도 핵심이 남습니다.
참고 자료
- 검색 결과 스니펫 관리 (Google 검색 센터) — 구글이 검색 결과의 제목과 설명을 무엇을 보고 결정하는지에 대한 공식 설명
- Google 이미지 SEO 권장사항 (Google 검색 센터) — 이미지 파일과 마크업 권장사항, 이미지 검색에 필요한 신호