카카오톡·인스타그램·페이스북 등에 링크를 공유했을 때 제목만 뜨고 이미지가 안 나오거나, 엉뚱한 이미지가 뜨는 문제는 오픈 그래프(Open Graph, OG) 태그 설정 문제입니다. og:title, og:description, og:image 세 가지 핵심 태그와 플랫폼별 캐시 특성을 정리합니다.
오픈 그래프란 무엇이고 왜 필요한가
오픈 그래프는 페이스북이 만든 메타 태그 표준으로, 지금은 카카오톡·라인·슬랙 등 대부분의 메신저·SNS가 이를 읽어 링크 미리보기 카드를 구성합니다. og 태그가 없으면 각 플랫폼이 페이지의 title 태그와 첫 이미지를 임의로 추측해서 보여주기 때문에, 브랜드 로고 대신 배너 이미지나 깨진 아이콘이 노출되는 문제가 생깁니다.
필수 태그 다섯 가지
<meta property="og:title" content="페이지 제목"> <meta property="og:description" content="한 두 문장 요약"> <meta property="og:image" content="https://example.com/img/og-cover.jpg"> <meta property="og:url" content="https://example.com/page.php"> <meta property="og:type" content="website">
og:image는 절대경로(https://로 시작하는 전체 URL)여야 하며, 상대경로를 넣으면 일부 플랫폼에서 이미지가 인식되지 않습니다.
og:image 이미지 규격 실무 기준
| 항목 | 권장값 | 이유 |
|---|---|---|
| 권장 해상도 | 1200×630px | 대부분 플랫폼의 카드 비율(약 1.91:1)에 최적 |
| 최소 해상도 | 600×315px | 이보다 작으면 일부 플랫폼에서 미리보기 생략 |
| 파일 용량 | 1MB 이하 | 초과 시 일부 크롤러가 타임아웃으로 실패 |
| 포맷 | JPG, PNG | WebP는 플랫폼별 지원 여부가 갈려 위험 |
게시판·상품 상세처럼 페이지별 og 값이 달라야 하는 경우
정적 페이지는 og 태그를 고정값으로 넣어도 되지만, 게시판·쇼핑몰 상품처럼 페이지마다 다른 콘텐츠라면 페이지별로 동적으로 값을 채워야 공유 시 실제 내용이 반영됩니다.
<?php $og_title = htmlspecialchars($post['subject']); $og_desc = htmlspecialchars(mb_substr(strip_tags($post['content']), 0, 80)); $og_image = !empty($post['thumb']) ? $post['thumb'] : DEFAULT_OG_IMAGE; ?> <meta property="og:title" content="<?php echo $og_title; ?>">
썸네일이 없는 게시글을 대비해 기본 대체 이미지(default og:image)를 반드시 준비해둬야 합니다.
플랫폼별 캐시 갱신 방식 차이
og 태그를 수정했는데도 예전 미리보기가 계속 뜬다면, 대부분 플랫폼이 최초 공유 시점의 정보를 캐시해두고 있기 때문입니다.
- 페이스북: 공유 디버거에서 해당 URL을 다시 스크래핑하도록 요청
- 카카오톡: 자체 캐시 초기화 도구로 링크를 재요청
- 슬랙: 워크스페이스 내에서 링크를 다시 붙여넣으면 대체로 새로 가져옴
캐시 초기화 방법은 콘텐츠가 자주 갱신되는 페이지에서 매번 필요할 수 있어, 운영 프로세스에 배포 후 대표 페이지 캐시 초기화 단계를 넣어두는 것이 좋습니다.
트위터(X) 카드 태그도 함께 넣어야 하는 이유
X(구 트위터)는 og 태그를 일부 참고하지만 자체 twitter:card 태그를 우선 사용합니다. og만 넣고 트위터 태그를 빠뜨리면 X에서 미리보기가 아예 뜨지 않을 수 있습니다.
<meta name="twitter:card" content="summary_large_image"> <meta name="twitter:title" content="페이지 제목"> <meta name="twitter:image" content="https://example.com/img/og-cover.jpg">
검증 및 디버깅 절차
- 페이지 소스에서 og 태그 5종이 실제로 렌더링되는지 확인 (자바스크립트로 늦게 삽입되면 크롤러가 못 읽는 경우가 많음)
- og:image URL을 브라우저에 직접 붙여넣어 이미지가 정상 로드되는지 확인
- 각 플랫폼 디버깅 도구로 실제 카드 미리보기 확인
- 캐시 초기화 후 재검증
카카오톡 채널·비즈채널 링크와의 차이
일반 웹페이지 링크와 카카오톡 채널(플러스친구) 메시지에서 보이는 카드는 처리 방식이 다릅니다. 채널 메시지 전송 도구에서는 og 태그와 무관하게 별도로 이미지·문구를 업로드하는 경우가 많아, "채널에서는 잘 보이는데 카카오톡 개인 대화에 링크만 붙이면 다르게 보인다"는 문의가 자주 발생합니다. 이 경우 페이지 자체의 og 태그를 다시 점검하고, 채널 메시지는 별개의 설정으로 관리되고 있다는 점을 팀 내에 공유해 혼선을 줄여야 합니다.
실무 정리
오픈 그래프는 검색 순위에 직접 영향을 주지는 않지만, 공유 클릭률에는 직결됩니다. 링크 공유 후 이미지가 이상하게 뜨는 문제가 반복된다면 메신저 캐시 초기화 방법을 함께 참고하세요. 상품·게시글별 동적 OG 태그 구현이 필요하면 무료 견적요청으로 현재 게시판 구조를 알려주세요.
자주 묻는 질문 (FAQ)
og:image에 상대경로를 넣으면 왜 안 되나요? +
메신저·SNS의 크롤러는 페이지가 아니라 URL만 보고 이미지를 가져오기 때문에, 기준 경로가 없는 상대경로는 어디서 이미지를 찾아야 할지 판단할 수 없어 실패합니다. 항상 https://로 시작하는 전체 경로를 써야 합니다.
og 태그를 수정했는데 카카오톡에서 예전 이미지가 계속 보입니다. +
카카오톡이 최초 공유 시점의 정보를 캐시하고 있기 때문입니다. 카카오톡 공유 디버거로 해당 URL의 캐시를 초기화한 뒤 다시 공유해야 반영됩니다.
og:description은 검색 결과 설명과 같은 내용이어야 하나요? +
반드시 같을 필요는 없습니다. meta description은 검색 결과용, og:description은 SNS 공유용으로 분리해 각각의 맥락에 맞게 작성하는 것이 클릭률에 더 유리한 경우가 많습니다.
동영상도 오픈 그래프로 미리보기가 되나요? +
og:video 태그를 추가하면 일부 플랫폼에서 인라인 재생을 지원하지만, 지원 범위가 플랫폼마다 달라 og:image를 기본으로 두고 보조적으로 사용하는 것이 안전합니다.
자바스크립트로 렌더링되는 사이트는 og 태그를 못 읽나요? +
많은 SNS 크롤러가 자바스크립트를 실행하지 않고 초기 HTML만 읽기 때문에, og 태그는 서버 사이드에서 초기 HTML에 직접 포함되도록 렌더링해야 안전합니다.