본문 바로가기
03. Development

웹사이트 링크 프리뷰/오픈 그래프란?

by Yunnie_ 2020. 12. 3.
반응형

링크를 붙여 넣기 했을 때 노출되는 이미지, 제목, 설명글로 구성된 프리뷰

 

Photo by Glenn Carstens-Peters on Unsplash

 

우리가 사이트를 제작하고 QA를 진행할 때, 놓치기 쉽지만 꼭 챙겨야 하는 것이 링크 미리보기이다. 그리고 이렇게 미리 보기 화면을 구성할 수 있도록 해주는 Meta를 오픈그래프라고 한다. 링크를 복사해서 붙여넣었을때 노출되며, url 값만 노출이 되는 경우에는 해당 링크가 어떤 링크인지 파악하는 것에 어려움이 있기 때문에 링크 안의 내용을 짐작할 수 있도록 이미지, 제목, 설명 문구를 함꼐 노출시킨다. 이렇게 링크 내용을 미리 보여줌으로써 유입률을 증가시킬 수 있다. 나 역시, 링크 미리보기가 뜨지 않는 링크들은 왠지 들어가기 꺼려지는 것도 있고, 잘 정리되어 있지 않을때 서비스에 대한 부정적인 인식으로까지 연결되기도 한다. 아래의 예시는 페이스북과 카카오톡에 링크를 붙여넣었을때 노출되는 링크 미리보기 이미지이다.

 

페이스북/카카오톡

 

오픈그래프 프로토콜은 페이스북에서 처음 만들어졌고, 이 간편함으로 인해 네이버 블로그와 카카오톡 등 많은 플랫폼에서도 널리 사용하게 되었다. 구성 태그로는 og:url(링크될 URL), og:type(웹인지 앱인지 타입 지정), og:title(해당 링크의 제목), og:description(설명), og:image(썸네일 이미지)가 있다. 오픈 그래프의 원리는 플랫폼에 URL을 붙여 넣는 순간 해당 플랫폼에서 일하는 크롤러가 빠르게 해당 URL을 먼저 방문해서 웹페이지에 있는 오픈그래프 데이터를 수집해 미리 보기 형식으로 구성해주는 방식이라고 한다.

기획자들은 웹사이트 런칭 후, 이 부분들을 꼭 확인하여 빠진 부분이 있다면 개발자에게 이슈사항을 전달해야 한다. 또한, 가능하다면 A/B 테스팅을 통해서 어떤 문구나 이미지가 가장 좋은 효과를 보이는지 확인하는 것이 좋다.

 

 

Reference

아래의 자료들을 통해서 개발적으로 어떻게 적용해야 하는지는 아래의 링크들에 잘 설명이 되어있다.

 

오픈그래프(open graph)태그에 대해 알아보자

스마트폰의 보급률이 높아지면서 언제부터인가 SNS가 우리들의 생활에 없어서는 안되는 서비스가 되었습니다. 기업, 개인 구별할 것 없이 기업은 사업 아이템을 마케팅하기 위한 수단으로 사용

could.tistory.com

 

링크 붙여넣을 때 보이는 이미지는 어디서 오는 것일까?

들어가기 전에 이 글은 링크의 미리보기 제목, 설명, 이미지의 정체에 대해서 알고 싶은 마케터들을 위해 유용한 내용을 담고 있습니다. 오늘날 페이스북이나, 네이버 블로그, 카카오톡 등에서

brunch.co.kr

 

HTML - og(open graph) 태그 란? / 카톡,sns 미리보기 지정

open graph 태그란? / 썸네일, 제목 설명 등의 안녕하세요. 고코더 입니다. SNS나 카카오톡,라인 등 일상을 공유하는 커뮤니티 프로그램에서 링크를 공유하면 자연스럽게 보이는 썸네일, 제목, 설명

gocoder.tistory.com

 

08. og는 이야기

클릭하라 하지 말고, 클릭하게끔 하라 | 지난 SEO7-첫만남 포스팅에서 웹페이지 내 Meta를 통해 포털(네이버,구글) 검색결과 중 제목(Title)과, 설명(Description)을 우리가 원하는 문구로 변경하는 방

brunch.co.kr

 

반응형

'03. Development' 카테고리의 다른 글

디버깅/디버그란?  (0) 2021.01.04
웹과 앱 개발 방식 종류  (2) 2020.12.10
API란?  (0) 2020.12.01
데이터베이스란 무엇인가?  (0) 2020.11.29
HTTP 상태 코드란?  (0) 2020.11.27