링크를 붙여 넣기 했을 때 노출되는 이미지, 제목, 설명글로 구성된 프리뷰
우리가 사이트를 제작하고 QA를 진행할 때, 놓치기 쉽지만 꼭 챙겨야 하는 것이 링크 미리보기이다. 그리고 이렇게 미리 보기 화면을 구성할 수 있도록 해주는 Meta를 오픈그래프라고 한다. 링크를 복사해서 붙여넣었을때 노출되며, url 값만 노출이 되는 경우에는 해당 링크가 어떤 링크인지 파악하는 것에 어려움이 있기 때문에 링크 안의 내용을 짐작할 수 있도록 이미지, 제목, 설명 문구를 함꼐 노출시킨다. 이렇게 링크 내용을 미리 보여줌으로써 유입률을 증가시킬 수 있다. 나 역시, 링크 미리보기가 뜨지 않는 링크들은 왠지 들어가기 꺼려지는 것도 있고, 잘 정리되어 있지 않을때 서비스에 대한 부정적인 인식으로까지 연결되기도 한다. 아래의 예시는 페이스북과 카카오톡에 링크를 붙여넣었을때 노출되는 링크 미리보기 이미지이다.
오픈그래프 프로토콜은 페이스북에서 처음 만들어졌고, 이 간편함으로 인해 네이버 블로그와 카카오톡 등 많은 플랫폼에서도 널리 사용하게 되었다. 구성 태그로는 og:url(링크될 URL), og:type(웹인지 앱인지 타입 지정), og:title(해당 링크의 제목), og:description(설명), og:image(썸네일 이미지)가 있다. 오픈 그래프의 원리는 플랫폼에 URL을 붙여 넣는 순간 해당 플랫폼에서 일하는 크롤러가 빠르게 해당 URL을 먼저 방문해서 웹페이지에 있는 오픈그래프 데이터를 수집해 미리 보기 형식으로 구성해주는 방식이라고 한다.
기획자들은 웹사이트 런칭 후, 이 부분들을 꼭 확인하여 빠진 부분이 있다면 개발자에게 이슈사항을 전달해야 한다. 또한, 가능하다면 A/B 테스팅을 통해서 어떤 문구나 이미지가 가장 좋은 효과를 보이는지 확인하는 것이 좋다.
Reference
아래의 자료들을 통해서 개발적으로 어떻게 적용해야 하는지는 아래의 링크들에 잘 설명이 되어있다.
'03. Development' 카테고리의 다른 글
디버깅/디버그란? (0) | 2021.01.04 |
---|---|
웹과 앱 개발 방식 종류 (2) | 2020.12.10 |
API란? (0) | 2020.12.01 |
데이터베이스란 무엇인가? (0) | 2020.11.29 |
HTTP 상태 코드란? (0) | 2020.11.27 |