“링크 하나로 클릭률을 올릴 수 있다면, 어떻게 하시겠습니까?”
안녕하세요 구글 네이버 백링크 상위노출 전문 오픈타임 박실장 입니다.
웹사이트 링크를 공유할 때, 엉뚱한 이미지와 어울리지 않는 설명이 나온다면 사용자는 당황하거나 관심을 잃게 됩니다. 반면, 매력적인 썸네일과 간결한 설명이 있다면 클릭으로 이어질 가능성이 훨씬 높아지죠. 이때 필요한 것이 바로 오픈 그래프(Open Graph)입니다.
오픈 그래프는 단순한 설정 같아 보이지만, 검색 엔진 최적화 에 도움이 되는 부분입니다. 이번 글에서는 오픈 그래프의 핵심 개념부터 설정 방법, 그리고 SEO에서의 역할까지 총정리 해보겠습니다.
오픈 그래프(Open Graph) 란?
오픈 그래프는 SNS (페이스북, 인스타그램 등) 에서 웹사이트의 콘텐츠가 어떻게 표현되는지 요약 한 데이터입니다. 웹사이트의 링크를 공유하면 미리보기 형식으로 나오게되는 제목, 설명, 이미지 등을 콘텐츠 생산자가 설정 할 수 있는 기능입니다. 페이스북, 카카오톡에서 아래의 사진을 보신 적이 있으실 겁니다.
오픈 그래프(Open Graph)를 사용하는 이유
오픈 그래프를 왜 설정해야 하는지 알아보겠습니다. 어떤 웹페이지를 작성할 때 제목과 관련 없는 썸네일 또는 설명이 나오게 된다면, 공유할 때 클릭이 일어나지 않게 됩니다. 그런데 오픈 그래프를 사용하면 이런 문제를 방지하는데 목적이 있습니다.
또한, 사용자의 클릭률을 높이기 위해서도 오픈 그래프를 사용합니다. 잘 설계된 제목과 그에 맞는 썸네일 내용들은 눈길을 끌고, 이로 인해 클릭률이 높아지죠. 이러한 설정은 트래픽을 유도할 수 있습니다.
오픈 그래프 적용, SEO에 도움이 되는가?
오픈 그래프를 사용하면 SEO에 도움이 되나요? 정말 많이 들어봤던 질문입니다.
답은 ‘도움이 된다’ 정도로 이해하시면 될 것 같습니다. SEO는 검색 엔진이 콘텐츠를 인식하고 검색 사용자의 경험을 바탕으로 시작이됩니다. 그래서 오픈 그래프 데이터가 설정되어 있다면 검색 엔진이 페이지를 더 잘 이해할 수 있겠죠.
물론, 오픈 그래프 하나만으로 SEO최적화를 이룰 수 없지만, SEO를 결정하는 다른 요소와 함께 적용하면 도움은 될 수 있을 것입니다. 즉, 직접적인 도움은 되지 않지만 검색 엔진이 좋아하는 설정인 것은 분명합니다.
오픈 그래프 요소 4가지
og:title : 공유할 때 보여지는 제목입니다. 콘텐츠의 이름과 같다고 보시면 됩니다.
og:description : 페이지의 간략한 설명입니다. 콘텐츠의 명함과 같이 설명을 하는 부분으로 이해하시면 됩니다.
og:image : 페이지를 대표하는 이미지입니다. 콘텐츠의 얼굴에 속하며, 잘생긴 얼굴이 눈길이 더 가는것 처럼 이해를 돕기위한 사진은 클릭률이 높겠죠?
og:url : 페이지의 정확한 URL입니다. 콘텐츠의 집주소로 이해하면 될 것 같습니다.
적용하는 방법
(온리백링크 오픈 그래프 예시, F12(개발자 도구) 를 누른 후 확인 가능합니다)
오픈그래프 설정은 매우 쉽습니다. 페이지의 html <head> 부분에 메타 태그를 추가하면 됩니다. 아래는 한 예시입니다.
<head>
<meta property="og:title" content="웹페이지 제목" />
<meta property="og:description" content="웹페이지 설명" />
<meta property="og:image" content="웹페이지 이미지 URL" />
<meta property="og:url" content="웹페이지 URL" />
</head>
여기서 파란색 부분에 설정을 원하는 문구를 삽입 후 head에 추가하면 됩니다.
외에도 워드프레스로 만들어진 웹사이트는 대표적으로 ‘Yoast SEO’, ‘Rank Math’ 와같은 플러그인을 사용하게 되면 글 작성페이지에서 쉽게 추가할 수 있습니다.
오픈그래프 이미지 사이즈
오픈그래프 이미지는 링크가 공유될 때 미리보기 이미지로 사용되며, HTML 메타 정보의 일부로 설정됩니다. 만약 별도의 오픈그래프 이미지를 설정하지 않으면, 웹페이지 내 다른 이미지가 자동으로 표시될 가능성이 있습니다.
네이버 블로그와 카카오톡
네이버 블로그는 기본적으로 og:image 태그가 설정되어 있지 않습니다. 이 경우, 카카오톡에서 블로그 링크를 공유하면 프로필 이미지(정사각형)가 미리보기 이미지로 표시됩니다. 하지만 카카오톡 미리보기 이미지는 좌우로 긴 2:1 비율이기 때문에, 정사각형 이미지의 위아래가 잘려 표시될 수 있습니다.
플랫폼별 오픈그래프 이미지 권장 규격
페이스북
권장 크기: 1200 × 630픽셀 (1.9:1 비율)
최소 크기: 600 × 315픽셀
해상도가 높을수록 고화질로 표시됩니다.
트위터
권장 비율: 2:1
최소 크기: 300 × 157픽셀
최대 크기: 4096 × 4096픽셀
트위터는 페이스북 기준인 1.9:1 비율로 제작된 이미지에서도 위아래가 잘릴 수 있으니 주의해야 합니다.
안전 영역(Safe Area) 설정
1200 × 630픽셀 해상도 기준으로 이미지를 제작할 경우, 수직 중앙 600픽셀 영역을 안전 영역으로 설정하면 트위터와 같은 2:1 비율에서도 내용이 잘리지 않도록 대비할 수 있습니다.
정사각형 이미지 활용
카카오톡이나 텔레그램처럼 1:1 비율로 표시되는 경우를 고려해, 정사각형 이미지를 제작하고 중요한 내용을 중앙에 배치하는 방법도 효과적입니다. 특히, 카카오톡의 링크 미리보기는 2:1 비율이기 때문에 정사각형 이미지에서 중요한 내용이 잘리지 않도록 중앙 배치가 중요합니다.
이 규격을 따르면 다양한 플랫폼에서 최적화된 링크 미리보기를 제공할 수 있습니다.
작업 후 확인하는 방법
오픈 그래프가 적용이 잘 되었는지 확인방법은 쉽습니다. 페이스북 개발자 도구의 ‘URL 검사기’를 사용하면 쉽게 확인할 수 있습니다. URL을 입력하면 해당 페이지의 오픈그래프가 어떻게 보여지는지 바로 확인할 수 있습니다.
제일 간단한 방법으로는 콘텐츠 url을 복사하여 카카오톡 또는 SNS 글작성 페이지에서 링크를 붙혀넣기 해보면 바로 확인할 수 있습니다.
이렇게 오픈그래프에 대한 설명 및 적용 후 확인 방법까지 정리해보았습니다. SEO 마케팅에서 매우 기본적인 내용이니 따라 해보시며 설정 해보시길 바랍니다.
“작은 디테일이 큰 차이를 만듭니다.”
오픈 그래프는 단순한 기술적 설정이 아니라, 검색 엔진에게 당신의 콘텐츠를 어떻게 보여줄지 결정하는 요소중 하나닙니다. 잘 설계된 오픈 그래프는 검색 엔진이 당신의 페이지를 더 잘 이해하도록 돕습니다.
오픈 그래프 잘 설정해놓으면 상위노출을 하는 것은 아니지만, 어찌 되었던 SEO에 도움이 되는 작업 중 하나이니 빼놓을 수 없죠. 오늘 내용도 많은 도움이 되셨길 바라며 더 좋은 내용으로 찾아오겠습니다.
긴 글 읽어주셔서 감사합니다.
