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/
지금 이 위에 불러와져있는 정보도 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^
참고자료 (친절한 설명이 가득!)
- https://blog.hubspot.com/marketing/open-graph-tags-facebook-twitter-linkedin
- https://lanace.github.io/articles/what-is-open-graph/
- https://velog.io/@byeol4001/Meta-Tag-OG%EC%98%A4%ED%94%88%EA%B7%B8%EB%9E%98%ED%94%84-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0
- https://developers.facebook.com/docs/sharing/webmasters/
- https://studiomeal.com/archives/1103
'일하면서 필요한 공부를 해보자 > 간단한 용어사전' 카테고리의 다른 글
[비즈니스] 허상지표, 실질지표 - 린분석 (0) | 2023.04.20 |
---|---|
[비즈니스] North Star Metric (NSM, 북극성 지표)는 왜 중요할까? / 사례 / 유의사항 (0) | 2023.04.07 |
[비즈니스] 선행지표, 후행지표 (우리는 어떤 지표를 개선해야 할까?) - 린분석 (0) | 2023.04.06 |
[비즈니스] 골든서클(Golden Circle) 이론 (WHY-HOW-WHAT, WHW) (0) | 2022.08.17 |
[비즈니스] BNPL (Buy Now, Pay Later) (0) | 2022.08.17 |