📚 오픈 그래프
📔 설명
스마트폰의 보급률이 높아지면서 언제부터인가 SNS가 우리들의 생활에 없어서는 안되는 서비스가 되었습니다.
기업, 개인 구별할 것 없이 기업은 사업 아이템을 마케팅하기 위한 수단으로 사용됬고, 개인의 경우 내가 어떻게 사는가 아니면 일상에 대해 타인 혹은 지인에게 거리감 없이 어필할 수 있는 공간이 되어 버렸습니다.
필자 또한 SNS를 하루에도 수십번 들여다 보는 것 같습니다.
저러한 링크를 붙여넣을 때 생기는 제목과 이미지, 설명은 어떻게, 어디서 출력되는 것일까요?
바로 메타 태그 라는 html 요소로 만들 수 있습니다.
메타 테그(meta Tag)
HTML 문서의 맨 위쪽에 위치하는 태그.
HEAD 태그 사이 또는 뒤에 있어도 되지만, 반드시 BODY 태그 앞쪽에 위치해야 한다.
브라우저와 검색 엔진을 사용할 수 있도록 문서의 정보를 포함하고 있다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta property="og:type" content="website" />
<meta property="og:url" content="https://kakaocorp.com/" />
<meta property="og:title" content="새로운 연결, 새로운 세상 - 카카오" />
<meta property="og:image" content="kakao.png" />
<meta property="og:description" content="사람과 사람, 사람과 세상을 이어주는 카카오가 어쩌구 저쩌구" />
</head>이것이 오픈 그래프를 만드는 기본적인 구성 요소 입니다.
구성 요소
og:type - 웹 페이지 유형 (ex, article, movie 등)
og:url - 링크할 주소
og:title - 웹 페이지 제목
og:image - 대표 이미지
og:description - 웹 페이지의 간단한 설명
이 외에도 다양한 기능이 많이 있지만, 저게 기본적인 구조입니다.
마지막으로 해당 이미지에서의 오픈그래프가 어떻게 적용 되었는지 확인 해보겠습니다.
우선 화살표에 적힌 순서대로 나열하여 정리해보겠습니다.
1.Open Graph 이미지
<meta property="og:image" content="./example.jpg">이미지를 보여줍니다.
2.Open Graph 타이틀
<meta property="og:title" content="Kodot TEAM">대표적인 제목을 보여줍니다.
3.Open Graph 설명
<meta property="og:description" content="코닷(Kodot)은 제 4차산업혁명 · · ·">오픈 그래프의 간략한 설명을 보여줍니다.
이 외에도 페이스북, 카카오, 트위터 등 오픈 그래프를 지원하는 경우가 있습니다.
트위터 오픈 그래프
트위터 사이트는 모든 게시물을 '카드(card)' 형태로 구현합니다.
이것을 트위터 카드라고 하는데, 내가 만든 웹 페이지를 트위터로 공유하려면
트위터 카드에 맞게 오픈 그래프를 설정해야 합니다.
밑에 예시는 트위터입니다.
<meta name="twitter:card" content="트위터 카드 타입(요약정보, 사진, 비디오)">
<meta name="twitter:title" content="콘텐츠 제목">
<meta name="twitter:description" content="웹페이지 설명">
<meta name="twitter:image" content="표시되는 이미지">