[개발] og? OpenGraph? (링크 공유할 때 썸네일 뜨게 해주세여)

유니 Uni 2022. 7. 27. 13:37

Disclaimer
간단한 용어사전은 업무 중 혹은 기사에서 자주 사용하는 용어의 정의를 정확히 알아두기 위해 간단하게 기록하는 용도입니다.
굉장히 정확하고 자세하게 서술할 의도는 아님을 밝힙니다. 혹시 잘못된 정보가 기록되어 있다면 지적 환영합니다 :)

가끔 링크를 SNS 등에 공유할 일이 생길 때 URL에 대한 요약 내용 (썸네일, 제목, 설명) 등이 표시되지 않거나 empty 값으로 표시되는 경우 굉장히 없어보인다. 이런 것을 어떤 식으로 처리하는가?

저런 요약 내용을 띄워주면 사용자가 링크를 좀 더 신뢰할 수 있게 되지 않을까?

트위터에서는 이미지를 포함한 트윗이 그렇지 않은 트윗에 비해서 150% more retweets을 받았다고 한다.

(출처 : https://blog.hubspot.com/marketing/open-graph-tags-facebook-twitter-linkedin)

Open Graph

og 는 오픈그래프(Open Graph)의 약자이다. 미리보기를 구성할 수 있도록 해주는 메타정보가 오픈그래프라고 한다.

페이스북에서 만들었다고 하는데... 그런만큼 페이스북(이제는 메타) 개발자 문서를 보면 아주 자세히 나와있다.

https://developers.facebook.com/docs/sharing/webmasters/

웹 마스터 - 공유 - 문서 - Facebook for Developers

오픈 그래프 마크업 대부분의 콘텐츠는 URL로 Facebook에 공유되므로, Facebook에 콘텐츠가 표시되는 방식을 관리하기 위해 오픈 그래프 태그로 웹사이트를 마크업하는 것이 중요합니다. 크롤러가 웹

developers.facebook.com

지금 이 위에 불러와져있는 정보도 og 태그를 통해서겠지?_?

아래는 위 사이트에 나와있는 예시이다. HTML의 head에 아래 정보를 넣어주면 뾰로롱 불러온다고 한다

마크업 예시

예를 들어 og:type="article" 및 여러 추가 속성으로 기사, 뉴스 소식 또는 블로그 게시물을 마크업하는 방법은 다음과 같습니다.

<meta property="og:url"                content="http://www.nytimes.com/2015/02/19/arts/international/when-great-minds-dont-think-alike.html" />
<meta property="og:type"               content="article" />
<meta property="og:title"              content="When Great Minds Don’t Think Alike" />
<meta property="og:description"        content="How much does culture influence creative thinking?" />
<meta property="og:image"              content="http://static01.nyt.com/images/2015/02/19/arts/international/19iht-btnumbers19A/19iht-btnumbers19A-facebookJumbo-v2.jpg" />

이 속성에는 사용자가 기사를 공유할 때 특별히 표시하고자 하는 기사에 대한 자세한 메타데이터가 포함됩니다.

이제는 누가 og image가 필요하다고 할 때 당황하지 말고 썸네일 이미지를 내밀어보자 ^0^

참고자료 (친절한 설명이 가득!)