카카오톡 공유 썸네일 오류

게시글을 카카오톡에 공유했는데 글마다 다른 썸네일이 나오지 않고 계속 사이트 로고만 표시됐습니다. 처음에는 카카오톡 캐시 문제라고 생각했습니다. 하지만 여러 글을 테스트해도 결과는 같았습니다.

원인은 캐시만이 아니었습니다. 게시글마다 달라져야 할 og:image가 제대로 출력되지 않았고, 일부 페이지에서는 상대경로 이미지가 그대로 들어가 있었습니다. 결국 카카오톡은 본문 이미지 대신 공통 로고를 가져가고 있었습니다.

이 글은 오픈그래프 태그를 단순히 넣는 방법을 설명하는 글이 아닙니다. 실제 게시판 글을 카카오톡에 공유했을 때 썸네일이 계속 로고로만 나오던 문제를 기준으로, og:image를 어떻게 만들고 어떤 순서로 확인해야 하는지 정리한 글입니다.

공유하면 로고만 나오던 상황

문제는 게시글을 카카오톡이나 페이스북에 공유할 때 발견했습니다. 글 제목은 어느 정도 맞게 나오는데, 이미지는 매번 사이트 로고였습니다.

본문에는 분명 이미지가 있었습니다. 그런데 공유 미리보기에는 글 내용과 관련 없는 로고만 반복됐습니다.

사용자 입장에서는 어떤 글인지 바로 알기 어렵습니다. 특히 튜토리얼 글이나 게임 소개 글처럼 이미지가 클릭을 유도하는 콘텐츠라면 손해가 큽니다.

처음 확인한 항목은 아래와 같았습니다.

og:image 태그가 실제로 출력되는지
og:image 값이 상대경로인지 절대경로인지
모든 페이지가 같은 로고 이미지를 하드코딩하고 있는지
이미지가 로그인 없이 열리는 공개 URL인지
카카오톡 캐시에 예전 값이 남아 있는지

대부분의 문제는 이 다섯 가지 안에서 잡혔습니다.

모든 페이지에 박혀 있던 공통 로고

헤더 파일을 열어보니 이런 식으로 되어 있었습니다.

<meta property="og:title" content="예시 사이트">
<meta property="og:description" content="예시 사이트 기본 설명">
<meta property="og:image" content="https://example.com/img/logo.png">
<meta property="og:url" content="https://example.com">

홈페이지라면 괜찮을 수 있습니다. 하지만 게시글 상세 페이지에서도 같은 값이 출력되고 있었습니다. 그러니 어떤 글을 공유해도 카카오톡에는 로고만 나올 수밖에 없었습니다.

게시글 페이지에서는 사이트 기본값이 아니라 글마다 다른 값이 들어가야 합니다.

og:title       → 게시글 제목
og:description → 게시글 본문 요약
og:image       → 게시글 대표 이미지
og:url         → 현재 글의 정규 URL

오픈그래프는 페이지 단위 정보입니다. 공통 헤더에 넣더라도 값은 현재 페이지에 맞게 바뀌어야 합니다.

본문 첫 이미지로 og:image 만들기

게시글마다 대표 이미지를 따로 저장하고 있지 않다면 본문 첫 번째 이미지를 썸네일로 쓰는 방식이 현실적입니다.

<?php
function extractOgImage(string $html, string $default): string
{
    if (preg_match('/<img[^>]+src=["\']([^"\']+)["\']/i', $html, $m)) {
        return toAbsoluteUrl($m[1]);
    }

    return $default;
}

function toAbsoluteUrl(string $src): string
{
    if (preg_match('#^https?://#i', $src)) {
        return $src;
    }

    if (strpos($src, '//') === 0) {
        return 'https:' . $src;
    }

    return 'https://example.com/' . ltrim($src, '/');
}
?>

핵심은 마지막의 절대경로 변환입니다. 본문 이미지가 /upload/post1.jpg처럼 상대경로로 들어가 있으면 브라우저에서는 잘 보일 수 있습니다. 하지만 SNS 크롤러가 공유 이미지를 가져갈 때는 문제가 될 수 있습니다.

og:image에는 가능하면 아래처럼 완전한 주소를 넣는 편이 안전합니다.

<meta property="og:image" content="https://example.com/upload/post1.jpg">

게시글용 오픈그래프 태그 세트

og:image 하나만 고치면 끝이라고 생각하기 쉽지만, 실제 공유 화면은 제목, 설명, URL, 이미지가 같이 맞아야 자연스럽습니다.

<?php
$siteName = '예시 사이트';
$postTitle = $row['title'] ?? '제목 없음';
$postBody = $row['content'] ?? '';
$canonicalPath = '/board/' . (int)($row['id'] ?? 0);

$ogTitle = $postTitle . ' - ' . $siteName;
$ogDesc  = mb_substr(trim(strip_tags($postBody)), 0, 100, 'UTF-8');
$ogImage = extractOgImage($postBody, 'https://example.com/img/default-og.jpg');
$ogUrl   = 'https://example.com' . $canonicalPath;

$e = fn($v) => htmlspecialchars($v, ENT_QUOTES, 'UTF-8');

echo '<meta property="og:type" content="article">' . "\n";
echo '<meta property="og:site_name" content="' . $e($siteName) . '">' . "\n";
echo '<meta property="og:title" content="' . $e($ogTitle) . '">' . "\n";
echo '<meta property="og:description" content="' . $e($ogDesc) . '">' . "\n";
echo '<meta property="og:image" content="' . $e($ogImage) . '">' . "\n";
echo '<meta property="og:url" content="' . $e($ogUrl) . '">' . "\n";
echo '<meta name="twitter:card" content="summary_large_image">' . "\n";
?>

이렇게 바꾸면 이미지가 있는 글은 본문 첫 이미지를 사용하고, 이미지가 없는 글은 기본 썸네일로 대체할 수 있습니다. 모든 글이 로고 하나로 보이는 문제를 줄일 수 있습니다.

이미지 경로에서 자주 생기는 실수

오픈그래프 이미지는 화면에 보이는 이미지와 조건이 조금 다릅니다. 브라우저에서 보인다고 해서 카카오톡이 반드시 가져갈 수 있는 것은 아닙니다.

자주 걸리는 실수는 아래와 같습니다.

문제	예시	수정 방향
상대경로 사용	`/upload/a.jpg`	절대경로로 변환
로그인 필요	`/member/image.jpg`	공개 이미지 사용
robots.txt 차단	`Disallow: /upload/`	이미지 폴더 허용
너무 작은 이미지	`120x120`	대표 이미지 규격 사용
모든 글 동일 이미지	`logo.png`	글별 이미지 생성

특히 업로드 폴더를 robots.txt로 막아둔 경우가 있습니다. 검색엔진 크롤링을 줄이려고 넣은 규칙이 SNS 미리보기 이미지 수집까지 방해할 수 있습니다.

User-agent: *
Disallow: /upload/

공유 썸네일로 쓸 이미지가 있는 폴더라면 이런 차단은 다시 확인해야 합니다.

권장 이미지 규격

카카오톡이나 페이스북 공유 이미지는 너무 작거나 비율이 애매하면 로고나 다른 이미지를 가져갈 수 있습니다. 대표 이미지는 가능하면 일정한 규격으로 맞추는 편이 좋습니다.

항목	권장 값
크기	1200 × 630 px
비율	약 1.91:1
포맷	JPG 또는 PNG
용량	가급적 300KB 이하
접근	로그인 없이 열리는 공개 URL

이미지 크기는 무조건 커야 하는 것이 아니라, 크롤러가 안정적으로 가져가고 공유 화면에서 잘리지 않는 정도면 충분합니다. 너무 큰 이미지는 로딩이 느려지고, 너무 작은 이미지는 미리보기 품질이 떨어집니다.

카카오톡 캐시 때문에 계속 예전 이미지 노출

태그를 고쳤는데도 카카오톡에서는 계속 예전 로고가 나올 수 있습니다. 이때는 코드가 틀린 것이 아니라 캐시가 남아 있는 경우도 많습니다.

확인 순서는 이렇게 잡았습니다.

페이지 소스에서 og:image가 바뀌었는지 확인
이미지 URL을 새 탭에서 열어 접근 가능한지 확인
카카오 공유 디버거에서 URL을 다시 수집
본인 채팅방에 다시 붙여넣기
그래도 같으면 URL 뒤에 테스트 파라미터를 붙여 확인

https://example.com/board/856?v=2

단, 테스트 파라미터를 계속 늘리는 방식은 임시 확인용입니다. 실제 운영에서는 canonical URL과 오픈그래프 URL이 꼬이지 않게 원래 주소 기준으로 정리하는 편이 좋습니다.

SNS 디버거로 확인한 항목

카카오톡만 보지 않고 다른 플랫폼에서도 같이 확인했습니다.

카카오 공유 디버거에서 이미지와 제목 확인
페이스북 공유 디버거에서 다시 스크랩
X 카드 미리보기에서 summary_large_image 확인
브라우저 소스 보기에서 og 태그 직접 확인
curl로 메타 태그가 서버 응답에 들어가는지 확인

curl -s https://example.com/board/856 | grep -i "og:image"
curl -s https://example.com/board/856 | grep -i "og:title"
curl -I https://example.com/upload/post1.jpg

curl -I에서 이미지가 200으로 열리는지도 봐야 합니다. 403, 404, 302가 섞이면 공유 썸네일이 기대와 다르게 나올 수 있습니다.

적용 후 달라진 공유 화면

수정 후에는 글마다 다른 이미지가 나오기 시작했습니다.

카카오톡 공유 시 사이트 로고 대신 게시글 대표 이미지 노출
제목이 사이트명만 나오지 않고 게시글 제목으로 표시
설명문이 기본 문구가 아니라 본문 요약으로 변경
이미지 없는 글은 기본 썸네일로 통일
SNS 디버거에서 새 값으로 다시 수집 가능

오픈그래프는 검색 순위 자체보다 공유 클릭률에 직접 영향을 줍니다. 같은 링크라도 로고만 보이는 링크와 글 내용에 맞는 이미지가 보이는 링크는 클릭 느낌이 다릅니다.

공유 썸네일 점검 체크리스트

게시글 상세 페이지에서 og:title이 글 제목으로 바뀌는가
og:description이 기본 문구가 아니라 글 요약으로 출력되는가
og:image가 모든 글에서 같은 로고로 고정되어 있지 않은가
og:image가 https://로 시작하는 절대경로인가
이미지 URL이 로그인 없이 200 응답으로 열리는가
이미지 폴더가 robots.txt나 서버 권한으로 막혀 있지 않은가
대표 이미지가 너무 작거나 비율이 깨져 있지 않은가
태그 수정 후 카카오 공유 디버거로 캐시를 갱신했는가

로고 대신 글 내용이 보이도록

카카오톡 공유 썸네일 문제는 이미지 파일 하나만의 문제가 아니었습니다. 글마다 달라져야 할 오픈그래프 값이 공통 로고로 고정되어 있었고, 일부 이미지는 상대경로라서 크롤러가 안정적으로 가져가기 어려웠습니다.

제가 얻은 기준은 단순합니다. 공유 화면에 보여줄 값은 페이지마다 달라져야 합니다. 제목은 게시글 제목, 설명은 본문 요약, 이미지는 본문 대표 이미지나 기본 썸네일로 분리해야 합니다.

태그를 고친 뒤에도 캐시 때문에 바로 달라지지 않을 수 있습니다. 그래서 소스 확인, 이미지 URL 확인, 디버거 재수집까지 한 세트로 봐야 합니다. 오픈그래프 작업은 태그를 넣는 것으로 끝나는 것이 아니라, 실제 카카오톡 공유 화면에서 원하는 이미지가 나오는지 확인해야 끝납니다.

카카오톡 공유 썸네일 오류 | og:image 확인