OG 이미지 점검: 카카오톡·SNS 공유 카드가 다르게 보일 때

글을 발행한 뒤 카카오톡에 주소를 붙여봤는데, 예전 제목이나 엉뚱한 사진이 뜨는 경우가 있습니다. 본문 문제로 생각하기 쉽지만 공유 서비스가 읽어간 Open Graph 정보와 캐시를 먼저 확인해야 합니다.

공유 카드에 들어가는 정보

Open Graph 프로토콜의 기본 속성은 og:title, og:type, og:image, og:url 네 가지입니다. 글을 설명하는 og:description과 이미지 대체 설명인 og:image:alt도 함께 사용할 수 있습니다. Open Graph 프로토콜 명세

위 코드는 구조를 보여주는 예시입니다. 실제 주소와 이미지 경로로 바꿔야 합니다. og:url에는 해당 글의 대표 URL을 넣고, og:image는 외부에서 접근할 수 있는 절대 URL을 사용합니다.

제목·설명·이미지가 같은 내용을 말하는지 보기

공유 카드의 세 요소를 따로 잘 만드는 것보다 서로 맞추는 일이 먼저입니다. 제목이 “여행 경비 정산표”인데 이미지는 공항 풍경이고, 설명은 여행지 추천을 말한다면 클릭한 사람이 예상한 내용과 본문이 달라집니다.

제목·설명·이미지가 같은 내용을 말하는지 보기
요소	확인할 질문	정산표 글의 예
제목	어떤 문제를 해결하는 글인가	결제자와 사용자를 나누는 여행 경비 정산
설명	읽고 무엇을 할 수 있는가	표를 채워 세 사람의 송금액 계산
이미지	작은 화면에서도 주제가 보이는가	영수증, 통화, 정산표 일부
대체 설명	이미지 내용을 말로 이해할 수 있는가	세 사람의 결제액과 부담액이 적힌 표
URL	대표 주소가 현재 글을 가리키는가	리디렉션 뒤의 최종 공개 주소

제목과 설명의 고정 글자 수를 규칙으로 둘 필요는 없습니다. 공유 화면은 서비스와 기기 너비에 따라 달라집니다. 중요한 단어를 앞쪽에 두고, 미리보기에서 잘렸을 때도 글의 주제가 남는지 실제 화면으로 확인하세요.

썸네일을 만들 때 남길 것과 뺄 것

이미지에는 본문에서 가장 구체적인 장면을 담습니다. 체크리스트 글이면 체크 표시와 대상 물건, 계산 글이면 숫자 한두 개와 표의 모양처럼 글의 성격을 알아볼 단서가 좋습니다. 제목 전체를 이미지에 다시 쓰면 작은 카드에서 읽기 어렵고, 같은 문장이 두 번 보입니다.

이미지 크기는 게시할 서비스의 공식 가이드를 기준으로 만듭니다. Open Graph 명세 자체는 하나의 권장 가로세로 크기를 정하지 않고, og:image:width와 og:image:height로 실제 크기를 표시할 수 있게 합니다. 여러 채널에 공유한다면 원본 한 장을 무리하게 자르기보다 주요 피사체와 글자를 가운데 안전 영역에 두고 각 미리보기를 확인하세요.

사진을 쓰지 않는 글이라면 억지로 인물 사진을 넣지 않아도 됩니다. 도구 화면, 손으로 적은 메모, 단순한 도형, 실제 결과물의 일부처럼 주제와 연결되는 물상을 고르면 페르소나별 이미지도 덜 획일적으로 보입니다.

이미지가 바뀌지 않을 때 확인하는 순서

공개 페이지의 HTML에서 og:title, og:description, og:image, og:url 값을 확인합니다.
og:image 주소를 새 창에서 열어 로그인 없이 표시되는지 봅니다.
이미지 응답의 파일 형식과 크기가 플랫폼 조건에 맞는지 확인합니다.
공유 서비스의 공식 미리보기 검사 도구가 있다면 URL을 다시 읽게 합니다.
다시 읽은 뒤에도 예전 카드가 보이면 대화방의 기존 미리보기와 새로 붙인 링크를 구분합니다.

페이지를 수정했다고 모든 서비스의 카드가 즉시 바뀌는 것은 아닙니다. 플랫폼이 이전 값을 보관할 수 있고, 대화방에 이미 생성된 카드가 그대로 남을 수도 있습니다. 기다리는 시간을 임의로 단정하기보다 해당 서비스의 검사 결과와 새 공유에서 확인합니다.

og:image의 파일명만 바꾸는 방식은 새 주소를 읽게 하는 데 도움이 될 수 있지만, 원인을 가리는 임시 처리가 될 수도 있습니다. 메타 태그가 중복됐거나 대표 URL이 다른 페이지를 가리키는지 먼저 살펴보세요. Open Graph 명세는 같은 속성이 여러 번 있을 때 위에 선언된 값을 우선한다고 설명합니다.

발행 전 미리보기 기록

발행 전 미리보기 기록
채널	제목	설명	이미지	확인 시각	이상 여부
카카오톡
X 또는 다른 SNS
사내 메신저

표를 좌우로 밀어 나머지 열을 확인하세요.

한 글을 모든 채널에서 똑같이 보이게 만들 수 있다는 뜻은 아닙니다. 각 서비스가 카드를 구성하는 방식은 다를 수 있습니다. 이 표는 어떤 채널에서 무엇이 달랐는지 남겨 다음 수정 때 원인을 찾기 위한 기록입니다.

검색 결과 제목과도 연결되는 부분

Google은 검색 결과의 제목 링크를 만들 때 페이지의 <title>, 눈에 보이는 주제목, 제목 요소, og:title 등 여러 신호를 사용할 수 있다고 설명합니다. OG 제목만 따로 자극적으로 쓰기보다 본문 제목과 같은 주제를 가리키게 두는 편이 좋습니다. Google 검색의 제목 링크 안내

공유 카드를 확인할 때 마지막으로 본문 첫 화면도 열어보세요. 카드에서 약속한 표나 답이 긴 서론 뒤에 숨어 있으면 메타 정보는 맞아도 읽는 경험은 어긋납니다.