Open Graph Protocol(OGP)은 웹 페이지가 소셜 미디어 플랫폼에서 공유될 때
웹페이지의 메타데이터를 정의하기 위해서 페이스북(메타)에서 시작한 프로토콜이다.
지금은 다른 소셜 미디어 플랫폼과 웹 검색 엔진에서도 지원하고 있다.
OGP는 웹 페이지의 제목, 설명, 이미지 등과 같은 핵심 정보를 명시하기 위해 <meta> 태그를 사용한다.
https://ogp.me/ 에서 설명하고 있는 OGP이다.
쉽게 말해서 웹 미리보기를 제공하기 위한 프로토콜이다. 확인해 보자.
<meta property="og:title" content="Open Graph protocol">
<meta property="og:type" content="website">
<meta property="og:url" content="https://ogp.me/">
<meta property="og:image" content="https://ogp.me/logo.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="300">
<meta property="og:image:height" content="300">
<meta property="og:image:alt" content="The Open Graph logo">
<meta property="og:description"
content="The Open Graph protocol enables any web page to become a rich object in a social graph.">
<meta prefix="fb: https://ogp.me/ns/fb#" property="fb:app_id" content="115190258555800">
OGP website html에서 meta tag를 가지고 있는 속성을 가지고 온 것이다.
타이틀, 내용, 그리고 이미지 링크와 이미지 정보를 제공함으로서 우리가 흔히 보는 미리보기를
형성할 수 있도록 내용을 제공하고 있다.
![]() |
![]() |
이를 통하여 위와 예시와 같은 미리보기를 구성할 수 있다.