-
Open Graph Protocol 오픈 그래프 프로토콜 간단하게 알아보기그 외 다양한 웹 지식 2021. 12. 6. 15:39반응형
og 라고도 불리는 Open Graph Protocol.
나도 이번에 처음 적용해보면서 이런 이름이 있다는 걸 알았다.
무엇인지 알아보자.
Open Graph Protocol(오픈 그래프 프로토콜)은 Facebook에서 최초로 정의한 meta-tag 규약이라고 한다.
쉽게 말하면 링크 프리뷰(Link Preview)를 말하는 것인데, 카카오톡이나 슬랙 같은 곳에 url을 복붙 하면 url 뿐 아니라 이미지도 함께 나오게 되는데 그것을 말하는 것이다.
예시)
과거와 달리 누구나 웹사이트를 만들 수 있는 세상이 된 요즘은 우후죽순으로 하루가 멀다하고 수 십, 수 백, 수 천개의 웹사이트들이 만들어지고 있다.
그러다보니 이제는 정확한 정보를 찾는 것이 "일"이 되었다.
그렇기 때문에 메타태그를 잘 지정해놓고 있으면 특정 정보를 웹사이트에서 미리 간략하여 정리 할 수 있고 이는 일관된 정보를 전달 할 수 있게 만들 수 있을 것이다.
Meta tag는 <head></head> 영역에 추가를 하면 된다.
기본적인 Metadata는 어래와 같다.
1. og:title => 전달할 제목
2. qog:type => 전달할 테이터의 video나 website 등의 타입
3. og: image => 전달 할 이미지의 주소
4. og: url => 전달 할 사이트 주소
이를 활용해서 사용하면 아래와 같이 된다.
<head> <meta property=”og:title” content=”제목” /> <meta property=”og:type” content=”website” /> <meta property=”og:url” content=”http://주소" /> <meta property=”og:image” content=”http://이미지.jpg" /> </head>이는 기본태그들이며 이렇게 사용하게 되면 링크 프리뷰에 알맞는 이미지와 제목을 부여해줄 수 있을 것이다.
이는 사용자를 궁금하게 만들어 접속을 할 수 있도록 유도 할 수 있는 마케팅 기능으로도 유용하게 사용되어지고 있다.
다만 HTML에서 공식적으로 지원하는 기능이 아닌만큼 각 업체별로 조금씩 다를 수 있으니 정확한 것은 확인을 해보는 것이 도움이 될 것이다.
기본태그와 더불어 옵션 태그들도 알아보자.
<head> <meta property=”og:video” content=”https://example.com/trailer.swf” /> <meta property=”og:audio” content=”https://example.com/trailer.mp3” /> <meta property=”og:site_name” content="Open Graph Protocol" /> <meta property=”og:description” content="오픈 그래프 프로토콜에 대해서 알아봅시다!" /> <meta property=”og:locale” content="en_GB" /> <meta property=”og:locale:alternate” content="fr_FR" /> </head>특별히 설명 할 필요 없이 property만 잘 참고해도 한 눈에 무슨 meta-tag인지 알 수 있을 것이다.
이 외에도 image 사이즈 등을 위해서 width, height 등의 조절도 가능하니 참고하자!
반응형'그 외 다양한 웹 지식' 카테고리의 다른 글
Nextjs + Docker를 통한 멀티 스테이지 빌더(multi-stage builder) (0) 2024.03.20 Docker 이미지 플랫폼 호환성 에러 (linux/amd64) (0) 2024.01.09 타임존(UTC, GMT)과 날짜 포맷(Date format) 그리고 luxon (0) 2023.06.28 웹페이지 미리보기 : OGP(OG) (Open Graph protocol) (0) 2022.01.03 프론트엔드_GTM Tag 태깅 작업 방법 (0) 2021.08.09