오픈그래프(Open Graph)란?
SNS를 통해 사이트를 공유할 때 미리보기 화면이 마치 SNS의 게시물인 것처럼 자연스럽게 삽입되는 사이트들이 존재합니다. 이런 걸 가능하게 하는게 바로 오픈 그래프 프로토콜입니다.
오픈그래프 프로토콜은 HTML 문서내의 og:로 시작하는 <meta> 태그를 찾아내어 미리보기 화면을 구성해서 보여줍니다. 이는 웹 페이지를 페이스북에 공유할 때 페이스북 게시물인 것처럼 만들기 위해 제작되었다고 합니다.
오픈 그래프의 사용법
HTML의 <meta> 태그는 웹 페이지에 대한 메타 정보를 담아두는 태그로, 검색 봇에서 해당 웹 페이지를 검색할 떄 참고할 수 있는 정보입니다.
오픈그래프를 사용할 때에도 <meta> 태그를 사용해서 적용하게 되는데 기본적인 사용법은 아래와 같습니다.
<meta property="속성 이름" content="속성 값">오픈 그래프의 종류
기본 속성(Basic Metadata)
| 속성 이름 | 속성 역할 |
|---|---|
| og:title | 웹페이지 제목 |
| og:type | 웹페이지 종류 |
| og:image | 대표 이미지 |
| og:url | 웹페이지 정식 URL |
예시
<meta property="og:title" content="Awesome Webpage" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://www.example.com/" />
<meta property="og:image" content="https://www.example.com/image.jpg" />추가 속성(Optional Metadata)
| 속성 이름 | 속성 역할 |
|---|---|
| og:audio | 오디오 파일 |
| og:description | 웹페이지에 대한 설명 |
| og:determiner | 문장에서 오브젝트 앞에 나타낼 단어 (a,an,the,"",auto) |
| og:locale | 웹페이지의 언어 |
| og:locale:alternate | 웹페이지에서 사용가능한 다른 언어 |
| og:site_name | 웹페이지의 세부이름 (title보다 작은 개념) |
| og:video | 비디오 파일 |
예시
<meta property="og:audio" content="https://example.com/music/theme.mp3" />
<meta property="og:description"
content="Discover breathtaking landscapes and thrilling adventures in our latest travel documentary." />
<meta property="og:determiner" content="a" />
<meta property="og:locale" content="en_US" />
<meta property="og:locale:alternate" content="de_DE" />
<meta property="og:locale:alternate" content="ko_KR" />
<meta property="og:site_name" content="Travel Explorer" />
<meta property="og:video" content="https://example.com/videos/travel-trailer.mp4" />image 추가 속성
| 속성 이름 | 속성 역할 |
|---|---|
| og:image:url | og:image와 동일 |
| og:image:secure_url | https 접속이 필요할 경우 이동할 https 주소 |
| og:image:type | 이미지 MIME 타입 |
| og:image:width | 이미지의 너비 (px) |
| og:image:height | 이미지의 높이 (px) |
| og:image:alt | 이미지에 대한 설명 (페이지를 og:image로 지정할 경우 필요) |
예시
<meta property="og:image:url" content="https://example.com/images/sunset.jpg" />
<meta property="og:image:secure_url" content="https://secure.example.com/images/sunset.jpg" />
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="A stunning sunset over the ocean with vibrant orange and pink hues." />MIME 타입
인테넷에서 전송되는 다양한 다양한 종류의 데이터를 식별하기 위한 형식입니다.
이미지의 경우에는jpeg,png와 같은 타입이 있습니다.
기타
이외에 다른 속성이 필요하다면 ogp.me를 참고하세요!
Next.js에서 오픈 그래프 적용하기
Next.js에서는 다음과 같이 프레임워크에서 자체적으로 메타 데이터를 삽입할 수 있게 지원하고 있습니다.
오픈 그래프도 당연히 지원 대상인데요, Next.js에서 오픈 그래프를 적용하고 싶다면 layout.js 혹은 page.js에서 다음과 같은 객체를 생성해주면 됩니다.
export const metadata = {
metadataBase: new URL('https://acme.com'),
openGraph: {
images: '/og-image.png',
},
}그러면 Next.js에서는 다음과 같이 <head>안에 코드를 삽입해 줍니다.
<meta property="og:image" content="https://acme.com/og-image.png" />해당 코드가 적용된 웹 페이지를 공유하면 지정한 이미지가 등장하는 것을 볼 수 있을 것입니다!
The secret of getting ahead is getting started.