그냥 그래
오픈그래프(open graph)태그에 대해 알아보자 본문
스마트폰의 보급률이 높아지면서 언제부터인가 SNS가 우리들의 생활에 없어서는 안되는 서비스가 되었습니다.
기업, 개인 구별할 것 없이 기업은 사업 아이템을 마케팅하기 위한 수단으로 사용됬고, 개인의 경우
얼마나 내가 잘 사는가, 일상에 대해 타인 혹은 지인에게 거리감 없이 어필할 수 있는 공간이 되어 버렸습니다.
필자 또한 SNS를 하루에도 수십번 들여다 보는 것 같습니다.
Facebook에서 사이트 혹은 블로그 URL을 업로드 하였을 경우
카카오톡에서 사이트 혹은 블로그 URL을 업로드 하였을 경우
저러한 링크를 붙여넣을 때 생기는 제목과 이미지, 설명은 어떻게, 어디서 출력되는 것일까요?
모든 인터넷 상 사이트들은 HTML 문서로 이루어져 있고 그 외로 HTML 문서를 조금 더 기능적이게, 이쁘게 할 수 있도록
부가적인 CSS 혹은 JavaScript와 같은 코드들이 들어가게 됩니다.
또한 페이지의 가로 세로 비율을 맞춰줄 수 있는 핵심인 viewport 또는 언어 셋을 담당하는 charset 또한 메타 데이터라는 곳에 쓰입니다.
이토록 HTML 문서 안에서는 메타 데이터가 무시할 수 없는 많은 영향을 가지고 있습니다.
메타 데이터란 사이트의 제목, 설명, 이미지 등 포털사이트 api 로봇이 크롤링 할 때, 우리가 지정해놓은 사이트 부가적인 설명 부분이 담긴
내용을 긁어갈 수 있도록 이정표 역할을 하게 됩니다.
이런식으로 말이죠.
기본적으로 메타 데이터에는 title, description 태그 등 이미 사이트를 설명해주는 태그들이 존재하는 데, 오픈 그래프라는 녀석은
무엇에 쓰이는 것일까요?
오픈 그래프트 프로토콜은 미리보기 화면의 실체를 구성하는 메타 데이터의 새로운 표기 방법 입니다.
그렇다면 해당 이미지에서의 오픈그래프가 어떻게 적용 되었는지 확인 해보겠습니다.
우선 화살표에 적힌 순서대로 나열하여 정리해보겠습니다.
-
Open Graph 이미지 <meta property="og:image" content="./example.jpg">
URL 링크를 올렸을 때, 카카오톡, 페이스북, 네이버 등등 크롤러가 URL을 미리 들어가 정보를 수집할 경우
메타데이터에 오픈그래프로 지정되어 있는 이미지를 메인 이미지로 표시합니다. -
Open Graph 타이틀 <meta property="og:title" content="Kodot TEAM">
URL 링크를 올렸을 때, 카카오톡, 페이스북, 네이버 등등 크롤러가 URL을 미리 들어가 정보를 수집할 경우
메타데이터에 오픈그래프로 지정되어 있는 title 정보를 긁어와 표시합니다.
(지정되어 있는 <title>태그의 내용보다 우선적으로 표시하게 됩니다.) -
Open Graph 설명 <meta property="og:description" content="코닷(Kodot)은 제 4차산업혁명 · · ·">
URL 링크를 올렸을 때, 카카오톡, 페이스북, 네이버 등등 크롤러가 URL을 미리 들어가 정보를 수집할 경우
메타데이터에 오픈그래프로 지정되어 있는 description 정보를 긁어와 표시합니다.
(지정되어 있는 <description>요소의 내용보다 우선적으로 표시하게 됩니다.)
과연 오픈그래프(Open Graph)에는 저 위의 요소 밖에 없을까요?
위의 문구의 해답은 "아닙니다.", 포괄적으로 사용자가 쉽게 접근할 수 있고 필수적으로 사용되는 요소를 주로 서술했습니다.
대표적으로 많이 사용되는 오픈그래프 요소는 og:title, og:image, og:description, og:url 정도가 되겠습니다.
(실제로 필자도 저 위의 4개의 태그 이외의 태그는 자주 사용하는 편은 아닙니다.)
이외의 구조화되어 있는 데이터를 표현할 수 있는 메타데이터에 사용될 수 있는 태그가 많이 있습니다.
참조 URL: http://ogp.me/
점점 온라인 오프라인의 경계가 사라지고 데이터가 시각화 되고 UI와 UX를 강조하고 중요하게 여겨지는 지금 시대,
발 빠르게 대응할 수 있어야 할 것 같습니다.
궁금한 점은 댓글로 남겨주시길 바랍니다.