Open Graph란?
Open Graph는 SNS에서 웹사이트의 링크를 주고 받을 때, 미리보기처럼 출력되는 이미지, 텍스트 등을 말한다.
웹사이트에 들어가기 전, 웹사이트의 대표 이미지와 짧은 웹사이트의 설명 정도를 확인할 수 있다. Open Graph를 확인하기 위해서는 해당 웹사이트에서 F12를 눌러 개발자 모드를 킨 다음 <head> 태그에서 확인할 수 있다.
<meta property="og:title" content="29CM 연중 최대 할인 주간, 이굿위크 - 감도 깊은 취향 셀렉트샵 29CM">
<meta property="og:description" content="최애 브랜드의 최대 할인을 지금 만나세요">
<meta property="og:type" content="website">
<meta property="og:image" content="https://img.29cm.co.kr/next-edition/2023/11/08/168afd1ad7a14319ad8011ff88a54a33_20231108043033.jpg">
<meta property="og:site_name" content="감도 깊은 취향 셀렉트샵 29CM">
위 Open Graph 태그는 29cm의 예시이다.
- og:title : 29cm 블랙 프라이데이 페이지의 제목
- og:descriptioin : 해당 페이지에 대한 설명
- og:image : 미리보기 사진
- og:type : 해당 링크의 타입
- og:type : 웹사이트 이름
이처럼 Open Graph 세팅을 잘해놓아야 유가 마케팅을 했을 때, 소비자의 유입 및 결제 전환을 잘 이끌어낼 수 있다. 아래의 사진처럼 아무런 미리보기 사진, 웹사이트의 설명이 나오지 않는다면, 당연히 소비자는 링크 접속을 꺼려할 수 밖에 없다. 즉, 인쇄비와 전단지 알바비를 내고 찢어진 전단지를 돌리는 것과 같다.
또한, 페이지별로 Open Graph를 설정할 수 있기 때문에 29cm 블랙프라이데이 페이지처럼 페이지에 맞는 타이틀과 메타 디스크립션 설정이 필요하다. (이전 글 참고)
Open Graph 작성법
Open Graph의 중요성을 알지만 Open Graph가 요구하는 스펙을 놓쳐 불완성적인 Open Graph를 형성하는 경우가 꽤 많다.
위 사진은 Open Graph가 요구하는 이미지 크기를 맞추지 않아 사진이 잘린 상태로 미리보기가 제공되고 있다. Open Graph에서 요구하는 이미지 크기는 1200px X 630px이다. 자세한 Open Graph 작성 방법은 링크에서 확인할 수 있다.
또한, Twitter에서 요구하는 Open Graph의 스펙이 있다. Twitter에서 글로벌 유저들의 유입이 많기 때문에 완성도 있는 웹사이트 구축을 위해 Twitter Open Graph 개발 문서를 잘 살펴보아야 한다. Twitter의 이미지 권장 크기는 800px X 418px이다. 참고로, 트위터에서는 'Twitter Card' 라고 한다.
정리
Open Graph는 소비자에게 보여지는 첫 번째 인상이다. 소비자를 유혹하는 문구, 사진보다 높은 완성도를 갖추는 것이 첫번째이다. Open Graph를 잘 활용해서 찢어진 전단지를 돌리는 일은 없도록 하자.
'My Work > 웹 & 앱 서비스' 카테고리의 다른 글
| Django 웹사이트 구축(기본) (0) | 2024.01.14 |
|---|---|
| IA는 어떻게 쓰는 것이 맞을까? (1) | 2023.12.18 |
| 웹/앱 서비스 프로세스 정리 (0) | 2023.12.17 |
| GA 연습을 위한 데모 계정 연동 (0) | 2023.12.10 |
| SEO (검색 엔진 최적화) 23년 버전 (1) | 2023.11.16 |
