Open Graph 미리보기

OG(Open Graph) 미리보기는 웹페이지 URL을 소셜 미디어에 공유했을 때 어떻게 표시되는지 미리 확인할 수 있는 도구입니다. Facebook이 개발한 Open Graph 프로토콜은 페이지의 제목, 설명, 대표 이미지 등을 정의하며, Facebook, LinkedIn, KakaoTalk, Slack 등 대부분의 플랫폼이 이를 지원합니다. 공유 전에 미리보기를 확인하면 의도한 대로 정보가 표시되는지 검증할 수 있습니다.

이미지 규격이 가장 자주 틀립니다

OG 태그에서 실수가 몰리는 곳은 이미지입니다. 권장 규격은 1200×630픽셀, 가로세로 1.91대 1입니다. 이 비율에서 벗어나면 플랫폼이 임의로 잘라내기 때문에 글자가 걸치거나 로고가 반쯤 잘려 나갑니다.

이미지 주소는 반드시 전체 URL이어야 합니다. /images/og.png처럼 상대 경로로 적으면 대부분의 플랫폼이 읽지 못합니다. https://부터 시작하는 절대 주소로 쓰세요. HTTPS가 아니면 무시하는 플랫폼도 있습니다.

용량도 봐야 합니다. 5MB를 넘으면 가져오지 않는 경우가 있으니 1MB 안쪽으로 압축해 두는 편이 안전합니다. 그리고 이미지 안에 글자를 넣을 거라면 크게 쓰세요. 타임라인에서는 실제 표시 크기가 작아 본문 크기의 글자는 읽히지 않습니다.

고쳤는데 옛날 정보가 나온다면

가장 많이 겪는 문제입니다. 플랫폼은 링크 정보를 한 번 읽으면 자체 서버에 캐시해 둡니다. OG 태그를 고치고 다시 공유해도 예전 제목과 이미지가 그대로 뜨는 이유입니다. 페이지를 새로고침해도 소용없습니다. 플랫폼 쪽 캐시를 지워야 합니다.

• 페이스북·인스타그램 — 셰어링 디버거에서 URL을 넣고 다시 스크랩을 실행합니다.
• 카카오톡 — 카카오 개발자 사이트의 캐시 초기화 도구를 사용합니다. 한국에서 공유가 가장 많은 경로라 이걸 놓치면 티가 납니다.
• X(트위터) — 카드 검사 도구로 다시 읽게 합니다.
• 급할 때 — URL 뒤에 ?v=2 같은 쿼리를 붙이면 다른 주소로 인식되어 새로 읽어 갑니다.

트위터 카드는 따로 필요한가

대부분은 필요 없습니다. X는 트위터 전용 태그가 없으면 OG 태그를 대신 읽습니다. 따로 지정할 실익이 있는 경우는 표시 형태를 바꾸고 싶을 때입니다. summary_large_image를 지정하면 큰 이미지 카드로, summary는 작은 정사각 썸네일로 표시됩니다.

제목과 설명을 X에서만 다르게 보이고 싶은 경우에도 전용 태그를 씁니다. 그런 필요가 없다면 OG 태그만 제대로 넣어도 충분합니다.

자주 묻는 질문

제목과 설명은 몇 자가 적당한가요?

제목은 60자, 설명은 100자 안쪽을 권합니다. 플랫폼과 화면 크기에 따라 잘리는 길이가 달라지는데, 특히 모바일에서 설명이 두 줄 정도만 보입니다. 중요한 내용을 앞쪽에 배치하세요.

OG 태그가 검색 순위에 영향을 주나요?

직접적인 영향은 없습니다. 다만 공유된 링크의 클릭률이 올라가면 트래픽과 유입 경로가 늘어나 간접적인 도움은 됩니다. 검색 결과에 표시되는 제목과 설명은 별도의 태그가 담당합니다.

이 미리보기와 실제 화면이 다를 수 있나요?

있습니다. 플랫폼마다 잘라내는 방식과 글자 크기가 조금씩 달라 완전히 같지는 않습니다. 이 도구로 대략의 구도를 잡고, 중요한 링크라면 실제 플랫폼의 검사 도구로 최종 확인하시는 편이 확실합니다.