The Open Graph Protocol
❓ 오픈그래프는 무엇인가요?
우리는 이미 일상 생활에서 '공유' 버튼을 통해 오픈그래프를 자주 접하고 있습니다.
이런 공유 버튼들을 통해서 여러분들은 무엇을 전송하게 되나요?
보통 해당 경로로 접속할 수 있는 url, 링크를 전송하게 됩니다.
공유를 하게 될 서비스들 sns, 카카오톡 등에 링크를 전송하게 되면 해당 링크에 대한
부가적인 정보가 동봉되어 추가가 되는데요, 그것이 바로 오픈그래프의 특징입니다.
제가 인프런의 링크를 남긴 예시입니다. 인프런의 링크만 글을 작성하면서 엔터를 쳤는데,
인프런의 로고와 타이틀, 설명까지 함께 작성이 된 것을 확인하실 수 있습니다.
이것도 오픈그래프의 일종이라고 보실 수 있습니다.
✔️ 오픈그래프 프로토콜이란
그렇다면 오픈그래프 프로토콜이라는 것은 무엇인가요?
프로토콜은 컴퓨터 사이에서 데이터의 교환, 즉 통신이 가능한 규격, 약속, 인터페이스를 프로토콜이라고 합니다.
한마디로 통신이 되려면 이러한 규격을 지켜줘야 한다라는 것인데, 오픈그래프 프로토콜은 다음과 같습니다.
html 문서상에서 meta tag를 이용해 property 영역에 og: 영역에 특정 내용을 작성하면
해당하는 content에 보여질 문자 혹은 파일을 지정할 수 있습니다.
이러한 약속을 통해 우리는 사용자가 공유를 할 때 우리가 지정한 콘텐츠들을 보여줄 수 있습니다.
✔️ 오픈그래프의 장점
오픈그래프는 사용자가 링크를 전송 받을 때 이 사이트가 이용해도 괜찮은 사이트인지,
혹은 스팸은 아닌지 망설이게 되는 상황에서 큰 도움이 됩니다.
사용자는 오픈그래프를 통해 웹사이트에서 지정한 콘텐츠들을 미리 열람을 함으로써
이 사이트가 어떤 사이트인지 미리 확인하는 과정을 통해
사용자에게 '타인이 전송한 링크에 접속한다' 라는 부담감을 줄여줍니다.
✔️ 오픈그래프 자세히 살펴보기
오픈그래프에 대해서 더 자세히 살펴볼 수 있는 링크입니다.
basic 한 속성 og:title, og:type, og:image, og:url 을 주로 사용하고, 그 외에는 부수적인 것들이므로 필요할 때마다 참조하여 사용하시면 되겠습니다.
'웹 (프론트엔드 취준 당시 공부했던 글) > HTML' 카테고리의 다른 글
Favicon을 알아봅시다 (0) | 2023.03.10 |
---|---|
[html] 시멘틱 태그 (Sementic) 사용이유와 Section 요소 파악 (0) | 2022.07.11 |