본문 바로가기
이루웹

오픈그래프(OG) 태그란? SNS 공유 최적화

카카오톡·페이스북에 링크를 공유했을 때 미리보기를 결정하는 오픈그래프 태그의 뜻과 실전 설정법을 정리했습니다.

이루웹4분 분량

카카오톡이나 페이스북에 링크를 붙여넣었을 때 뜨는 제목·설명·이미지 미리보기는 검색 결과가 아니라 오픈그래프(Open Graph, OG) 태그가 만든다. 홈페이지 <head>에 몇 줄만 추가하면 되는데, 이 태그가 없으면 SNS가 본문에서 아무 문장이나 골라 미리보기를 만들어 클릭률이 크게 떨어진다.

오픈그래프 태그로 SNS 공유 미리보기를 최적화하는 법 안내
og:title·og:description·og:image 세 태그가 SNS 공유 카드의 제목·설명·이미지를 결정한다.

오픈그래프 태그란 정확히 무엇인가요

오픈그래프는 페이스북이 2010년 처음 제안한 웹페이지 메타데이터 표준이다. 홈페이지 HTML <head> 안에 <meta property="og:..."> 형태로 넣는 태그들의 모음이며, SNS나 메신저가 링크를 공유할 때 이 값을 읽어 미리보기 카드를 만든다.

가장 많이 쓰는 필수 태그는 다음 네 가지다. og:title(공유 카드 제목), og:description(설명 문구), og:image(썸네일 이미지 주소), og:url(정본 링크 주소)이다. 여기에 웹사이트인지 글인지 구분하는 og:type, 사이트명을 나타내는 og:site_name을 더하면 기본 세트가 완성된다.

오픈그래프 태그는 구글 검색 순위에는 직접 영향을 주지 않는다. 다만 SNS·메신저·카카오톡 공유 클릭률을 좌우하는 별개의 요소로, 유입량에는 실질적인 차이를 만든다.

SNS 공유 화면에 어떻게 반영되나요

플랫폼마다 오픈그래프 태그를 읽는 방식과 카드 비율이 조금씩 다르다. 하나의 og:image로 모든 곳에서 완벽하게 보이긴 어렵지만, 아래 기준을 따르면 대부분의 플랫폼에서 무난하게 뜬다.

플랫폼 권장 이미지 크기 특징
페이스북 1200×630px(1.91대1) 가장 넓게 통용되는 표준 규격
카카오톡 800×400px(2대1) 공유 시 스마트 크롭으로 자동 재단됨
엑스(X, 옛 트위터) 1200×630px twitter:card 태그를 별도로 넣어야 큰 이미지 카드로 뜸

엑스는 오픈그래프 태그만으로는 큰 이미지 카드가 뜨지 않을 수 있다는 점이 실무에서 자주 놓치는 부분이다. twitter:card, twitter:title, twitter:image 태그를 오픈그래프 태그와 나란히 추가해야 안전하다. 카카오톡은 자체 스마트 크롭이 인물 사진 등에서 예상과 다르게 잘라낼 수 있으므로, 처음부터 800×400 비율에 맞춰 핵심 요소를 중앙에 배치하는 편이 낫다.

오픈그래프 태그 필수 항목과 이미지 규격 체크리스트
필수 태그 4종과 플랫폼별 og:image 권장 규격을 함께 점검한다.

og:image는 어떤 크기로 만들어야 하나요

기본값으로는 1200×630픽셀, 1.91대1 비율을 쓰면 된다. 이 규격이 페이스북·카카오톡·엑스를 포함한 대부분의 플랫폼에서 무난하게 표시되는 범용 크기다. 파일 용량은 너무 크면 일부 플랫폼에서 타임아웃되거나 재압축될 수 있으니 1메가바이트 이하로 최적화하는 것이 안전하다.

글자나 로고처럼 잘리면 안 되는 요소는 이미지 가장자리에서 안쪽으로 60에서 80픽셀 정도 여백을 두고 배치한다. 파일 형식은 텍스트가 선명해야 하면 PNG, 사진 위주면 JPG가 무난하며, 스크래퍼 호환성이 아직 불안정한 WebP는 피하는 편이 좋다.

오픈그래프 태그를 설정했는지 어떻게 확인하나요

가장 확실한 방법은 실제로 카카오톡이나 메신저에 내 페이지 링크를 붙여넣어 미리보기가 뜨는지 직접 확인하는 것이다. 개발자 도구(F12)를 열어 <head> 안에 og 태그가 실제로 들어있는지 소스에서 직접 확인할 수도 있다.

한 가지 주의할 점은 캐시다. 페이스북이나 카카오톡은 한 번 읽은 og 태그 값을 한동안 캐시해 두기 때문에, 태그를 수정해도 예전 미리보기가 계속 뜨는 경우가 있다. 이럴 때는 각 플랫폼의 디버깅 도구로 캐시를 새로 고쳐줘야 변경 사항이 반영된다.

워드프레스나 대부분의 홈페이지 빌더는 SEO 플러그인이나 게시글 설정 화면에서 og:title·og:description·og:image를 별도 입력란으로 제공한다. 직접 코드를 만지지 않아도 되는 경우가 많으니 먼저 확인해 보는 것이 순서다.

오픈그래프 태그는 코드 몇 줄이지만 SNS·메신저를 통한 유입에서 클릭률을 가르는 요소다. 홈페이지를 새로 만들거나 리뉴얼하는 단계에서 이런 세부 설정까지 함께 챙기고 싶으시다면, 이루웹의 홈페이지 제작 상담에서 오픈그래프 태그를 포함한 기술적 세팅을 함께 점검해 드리고 있습니다. 검색 노출과 관련한 다른 실전 팁은 블로그에서 계속 확인하실 수 있으며, 궁금한 점은 문의하기로 편하게 남겨 주시면 도와드리겠습니다.

검색되는 사이트가 필요하신가요?

이 글의 원칙을 그대로 적용해 사이트를 만듭니다. 상담은 무료입니다.