[HTML] - 오픈그래프 프로토콜에 대해 알아봅시다

The Open Graph Protocol

❓ 오픈그래프는 무엇인가요?

우리는 이미 일상 생활에서 '공유' 버튼을 통해 오픈그래프를 자주 접하고 있습니다.

 

이런 공유 버튼들을 통해서 여러분들은 무엇을 전송하게 되나요?

보통 해당 경로로 접속할 수 있는 url, 링크를 전송하게 됩니다.

 

공유를 하게 될 서비스들 sns, 카카오톡 등에 링크를 전송하게 되면 해당 링크에 대한

부가적인 정보가 동봉되어 추가가 되는데요, 그것이 바로 오픈그래프의 특징입니다.

 

https://www.inflearn.com/

인프런 - 미래의 동료들과 함께 성장하는 곳 | IT 정보 플랫폼

 

제가 인프런의 링크를 남긴 예시입니다. 인프런의 링크만 글을 작성하면서 엔터를 쳤는데,

인프런의 로고와 타이틀, 설명까지 함께 작성이 된 것을 확인하실 수 있습니다.

이것도 오픈그래프의 일종이라고 보실 수 있습니다.

✔️ 오픈그래프 프로토콜이란

그렇다면 오픈그래프 프로토콜이라는 것은 무엇인가요?

프로토콜은 컴퓨터 사이에서 데이터의 교환, 즉 통신이 가능한 규격, 약속, 인터페이스를 프로토콜이라고 합니다.

한마디로 통신이 되려면 이러한 규격을 지켜줘야 한다라는 것인데, 오픈그래프 프로토콜은 다음과 같습니다.

 

fastcampus 스타벅스 클론코딩 예제 中

html 문서상에서 meta tag를 이용해 property 영역에 og: 영역에 특정 내용을 작성하면

해당하는 content에 보여질 문자 혹은 파일을 지정할 수 있습니다.

이러한 약속을 통해 우리는 사용자가 공유를 할 때 우리가 지정한 콘텐츠들을 보여줄 수 있습니다.

 

✔️ 오픈그래프의 장점

오픈그래프는 사용자가 링크를 전송 받을 때 이 사이트가 이용해도 괜찮은 사이트인지,

혹은 스팸은 아닌지 망설이게 되는 상황에서 큰 도움이 됩니다.

 

사용자는 오픈그래프를 통해 웹사이트에서 지정한 콘텐츠들을 미리 열람을 함으로써 

이 사이트가 어떤 사이트인지 미리 확인하는 과정을 통해

사용자에게 '타인이 전송한 링크에 접속한다' 라는 부담감을 줄여줍니다.

 

✔️ 오픈그래프 자세히 살펴보기

오픈그래프에 대해서 더 자세히 살펴볼 수 있는 링크입니다.

https://ogp.me/

Open Graph protocol

 

 

basic 한 속성 og:title, og:type, og:image, og:url 을 주로 사용하고, 그 외에는 부수적인 것들이므로 필요할 때마다 참조하여 사용하시면 되겠습니다.