Open Graph 메타 태그 누락으로 SNS 공유 이미지 안 뜰 때 - og:image 크기·포맷·URL 완벽 체크리스트

SNS에 링크를 공유했는데 썸네일 이미지가 안 뜨거나 깨져서 보인 경험이 있을까. 분명 페이지에는 이미지가 있는데 카카오톡, 페이스북, 트위터에서 미리보기 이미지만 나타나지 않는다. 다만 대부분의 개발자는 og:image 메타 태그가 정확히 뭔지, 어떤 조건을 만족해야 인식되는지 정확히 모른 채 인터넷에서 찾은 코드를 그냥 복사해 붙인다. 이번엔 og:image가 정확히 뭔지, 왜 필요한지, 어떻게 설정하는지 완벽하게 정리해서 소개하겠다.

Open Graph는 페이스북이 2010년에 만든 프로토콜로, 웹페이지의 제목, 설명, 이미지 같은 메타데이터를 표준화했다. SNS 플랫폼(카카오톡, 페이스북, 인스타그램, 트위터, 링크드인 등)은 사용자가 링크를 공유할 때 이 메타 태그들을 읽어서 미리보기 카드를 만든다. og:image는 그 미리보기에 표시될 이미지 URL을 지정하는 태그다. 예를 들어 블로그 글을 카카오톡으로 공유했을 때 나타나는 썸네일이 바로 og:image다.

만약 og:image 태그가 없거나 잘못되었다면 SNS 플랫폼은 페이지 내 첫 번째 이미지를 임의로 선택하거나, 기본 아이콘으로 대체하거나, 썸네일을 표시하지 않는다. 결과적으로 공유 시 클릭률이 떨어진다. 특히 마케팅이나 콘텐츠 배포에서 SNS 미리보기는 사용자의 첫 인상을 결정하는 중요한 요소다.

og:image 메타 태그는 최소한 다음과 같이 구성된다.

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

하지만 SNS 플랫폼이 이미지를 올바르게 인식하려면 추가 속성들이 필요하다.

다음은 PHP 기반 웹사이트에서 og:image를 동적으로 생성하고 설정하는 예제다.

<!-- 상대 경로 사용 -->
<meta property="og:image" content="/images/og-image.jpg" />

<!-- 크기 정보 없음 -->
<meta property="og:image" content="https://example.com/image.jpg" />

<!-- 이미지가 없는 URL -->
<meta property="og:image" content="https://example.com/missing-image.jpg" />

상대 경로는 SNS 크롤러가 인식하지 못한다. 절대 경로(https://로 시작하는 완전한 URL)를 반드시 사용해야 한다. 크기 정보가 없으면 SNS가 이미지 비율을 미리 계산할 수 없어 레이아웃이 깨질 수 있다. 마지막으로 404 에러 이미지는 절대 설정하면 안 된다.

<?php
// 페이지별 동적 og:image 설정
$protocol = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off') ? 'https://' : 'http://';
$domain = $_SERVER['HTTP_HOST'];
$page_title = htmlspecialchars($page_title ?? 'Default Title', ENT_QUOTES, 'UTF-8');

// 이미지가 존재하는지 확인
$og_image_url = $protocol . $domain . '/images/og-image.jpg';
if (!file_exists($_SERVER['DOCUMENT_ROOT'] . '/images/og-image.jpg')) {
    $og_image_url = $protocol . $domain . '/images/default-og.jpg';
}
?>
<meta property="og:image" content="<?= $og_image_url; ?>" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:alt" content="<?= $page_title; ?>" />

이 예제는 다음을 보장한다. 첫째, https://를 포함한 절대 경로를 사용한다. 둘째, 이미지가 서버에 실제로 존재하는지 확인한다. 셋째, 너비 1200px, 높이 630px의 표준 권장 크기를 설정한다. 넷째, 이미지 타입을 명시해서 SNS 크롤러가 빠르게 인식하도록 한다.

SNS 플랫폼마다 권장 이미지 크기와 포맷이 다르다. 다음 표를 참고해서 설정하면 대부분의 플랫폼에서 최적으로 표시된다.

가장 안전한 방법은 1200x630 또는 1200x627 크기의 JPG로 통일하는 것이다. 이 크기는 페이스북, 카카오톡, 트위터 모두에서 최적이다. 파일 크기는 200KB 이하로 압축해서 웹에서 빠르게 로드되도록 하자.

블로그나 뉴스 사이트처럼 페이지마다 다른 og:image를 사용하는 경우, PHP의 GD 라이브러리나 ImageMagick을 사용해 동적으로 이미지를 생성할 수 있다.

<?php
// 동적 og:image 생성 예제 (GD 라이브러리)
function generate_og_image($title, $output_file) {
    // 1200x630 이미지 생성
    $image = imagecreatetruecolor(1200, 630);
    
    // 배경색 설정 (어두운 파랑)
    $bg_color = imagecolorallocate($image, 26, 32, 44);
    imagefill($image, 0, 0, $bg_color);
    
    // 텍스트 색상
    $text_color = imagecolorallocate($image, 255, 255, 255);
    
    // 폰트 경로 (Linux 기본 폰트)
    $font_path = __DIR__ . '/fonts/arial.ttf';
    if (!file_exists($font_path)) {
        return false;
    }
    
    // 제목 텍스트 줄바꿈 처리
    $title = wordwrap($title, 35, "\n", true);
    
    // 텍스트 그리기 (크기 36, 각도 0도)
    imagettftext($image, 36, 0, 60, 300, $text_color, $font_path, $title);
    
    // 이미지 저장 (JPG 포맷, 품질 85)
    imagejpeg($image, $output_file, 85);
    imagedestroy($image);
    
    return true;
}

// 사용 예시
$page_title = '검색 최적화 완벽 가이드';
$og_image_path = $_SERVER['DOCUMENT_ROOT'] . '/cache/og-' . md5($page_title) . '.jpg';

// 캐시에 없으면 생성
if (!file_exists($og_image_path)) {
    generate_og_image($page_title, $og_image_path);
}

$og_image_url = 'https://' . $_SERVER['HTTP_HOST'] . '/cache/' . basename($og_image_path);
?>

og:image를 설정한 후 제대로 작동하는지 검증해야 한다. 페이스북 og:image 디버거(facebook.com/tools/debug/og/object/)에서 페이지 URL을 입력하면 메타 태그가 올바르게 인식되는지 확인할 수 있다. 카카오톡 미리보기 확인은 카카오 공유 디버거(developers.kakao.com/tool/clear/og)를 사용한다.

<meta property="og:image" content="/images/og.jpg" />

SNS 크롤러는 당신의 도메인 구조를 모르므로 상대 경로를 절대 인식하지 못한다.

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

요즘 모든 SNS 플랫폼은 HTTPS 이미지만 로드한다. HTTP 이미지는 무시된다.

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

여러 og:image를 설정했다면 SNS가 첫 번째 하나만 사용한다. 선택권을 주려면 og:image:url로 추가 속성을 사용하되, 처음 하나는 반드시 최고 품질의 이미지로 설정해야 한다.

<meta property="og:image" content="https://example.com/image-best.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:type" content="image/jpeg" />

og:image는 SNS 공유의 첫인상을 결정하는 핵심 메타 태그다. 절대 경로, 올바른 크기(1200x630), 표준 포맷(JPG)을 맞추는 것이 모두다. 작은 메타 태그 하나가 공유 시 클릭률을 크게 좌우한다는 점을 잊지 말자. 이 글의 동적 생성 예제를 참고해 페이지별로 고유한 og:image를 설정하면, SNS에서 훨씬 전문적이고 신뢰할 수 있는 콘텐츠로 보일 것이다. 페이스북 og:image 디버거로 지금 바로 확인해보자.