오픈 그래프(OG) 미리보기 완벽 가이드: 소셜 미디어 공유 링크 최적화
카카오톡, 슬랙(Slack), 페이스북에 흥미로운 뉴스 기사나 유튜브 링크를 붙여넣기 해보신 적이 있나요? 링크만 텍스트로 보냈을 뿐인데, 기사 제목과 요약 내용, 그리고 화면을 꽉 채우는 매력적인 썸네일 1장이 대화창에 마법처럼 나타납니다. 우리는 이것을 '링크 미리보기(Link Preview)'라고 부릅니다.
반대로, 며칠 밤을 새워 만든 내 스타트업 웹사이트 주소를 카톡 서버에 올렸더니 알 수 없는 회색 빈 박스에 깨진 글자만 나오는 충격적인 경험을 해본 적이 있으신가요?
수십만 명이 누르고 싶게 만드는 황금 링크와 아무도 누르고 싶지 않은 쓰레기 링크의 차이는 바로 오픈 그래프(Open Graph, OG) 메타 태그에 있습니다.
오픈 그래프(Open Graph)란 무엇인가요?
2010년 페이스북이 인터넷상의 모든 웹페이지를 페이스북 내의 콘텐츠(사진첩, 유저 프로필 등)와 통일된 예쁜 규격으로 정리하기 위해 만든 프로토콜입니다.
오픈 그래프가 없던 시절, 메신저들은 링크 안의 HTML을 무작정 긁어와서(Scraping) 제일 위에 있는 로고나 아무 문장, 심지어 배너 광고 이미지를 마음대로 뽑아 썸네일로 띄웠습니다. 하지만 개발자가 HTML 문서 최상단의 <head> 영역에 오픈 그래프 태그를 명시하면, 웹사이트 주인이 "이 이미지를 썸네일로 쓰고, 이 문장을 요약으로 써라"라고 플랫폼에게 아주 명확하게 지시할 수 있습니다.
오늘날 오픈 그래프는 전 세계 표준입니다. 트위터, 링크드인, 디스코드, iMessage, 그리고 대한민국의 국민 메신저인 카카오톡마저 당신의 웹사이트가 공유될 때 100% 이 OG 태그를 읽고 박스를 생성합니다.
반드시 넣어야 할 4대 핵심 OG 태그
수십 가지의 태그가 존재하지만, 웹사이트의 첫인상을 결정짓는 필수 속성은 다음 네 가지입니다:
og:title: 콘텐츠의 제목입니다. 브라우저 탭에 뜨는 일반<title>태그와는 달리, " - 사이트 이름" 같은 사족을 빼고 핵심만 강렬하게 적어 클릭을 유도하는 것이 좋습니다.og:type: 이 문서의 종류가 무엇인지(website,article,video등) 지정합니다. 보통 블로그 포스팅에는article을 씁니다.og:url: 문서의 공식 영구 주소(캐노니컬 URL)입니다. 사람들이 뒤에 지저분한 레퍼럴 주소(?ref=kakaotalk)를 붙여서 공유하더라도 좋아요 수치나 캐시가 엉키지 않게 기준점을 잡아줍니다.og:image: 마케팅 관점에서 가장 중요합니다. 공유 시 뜨는 썸네일 이미지의 절대 주소를 넣습니다.
og:image 비율과 사이즈 황금률
한국 개발자들이 가장 많이 하는 실수는 1:1 비율의 조그마한 회사 로고나 쇼핑몰 파비콘을 여기에 넣는 것입니다. 트위터, 페이스북, 카카오톡 서버가 이미지를 찌그러뜨리지 않고 고화질로 예쁘게 보여주려면 가로 1200 x 세로 630 픽셀 (1.91:1 비율)의 직사각형 이미지를 준비해야 합니다. (단, 슬랙 등 일부 앱은 정사각형으로 크롭해서 보여주기도 하므로 핵심 글자나 인물은 중앙에 배치하는 것이 좋습니다.)
X(트위터) 카드 vs 오픈 그래프
X(구 트위터)는 수년간 고집스럽게 자신들만의 독자적인 메타 태그(twitter:card, twitter:image)를 요구해 왔습니다.
이것도 따로 적어줘야 하느냐고요? 완벽한 제어를 원한다면 네. 하지만 최근 트위터의 봇이 매우 똑똑해져서 자체 태그를 찾지 못하면 알아서 오픈 그래프(og:image)를 대신 읽어옵니다. 그럼에도 불구하고 트위터에서 큰 썸네일을 띄우려면 최소한 <meta name="twitter:card" content="summary_large_image"> 한 줄은 추가해 두는 것이 전 세계적인 웹 표준 관행입니다.
미리보기(Preview) 도구가 꼭 필요한 이유: "캐시 지옥"
HTML 코드를 수정했다고 해서 카톡에 내 주소를 다시 보내 확인할 수 없습니다. 카카오톡, 페이스북, 텔레그램은 한 번 링크의 썸네일을 생성하면 자신들의 서버에 그 결과를 저장(Cache)해 버립니다. 당신이 코드를 수정하고 똑같은 주소를 아무리 다시 붙여넣기해도, 챗방에는 고쳐진 이미지가 아니라 어제 저장된 깨진 옛날 이미지가 계속 출력됩니다. 이 '캐시 지옥'에 빠지면 미치고 팔짝 뛰게 됩니다.
UtiliZest의 OG Preview 시뮬레이터는 이러한 위험을 원천 차단합니다. 카톡이나 페이스북에 실제로 발행하기 전, 메신저 봇의 시각으로 당신의 URL이 완벽하게 1200x630 해상도를 제대로 렌더링하고 있는지, 제목 글자 수 제한에 걸려 잘리지는 않는지 화면 상에서 먼저 점검하고 실험해 보세요.