오픈 그래프 프로토콜이란
SNS에서 특정 웹 페이지를 공유하면 짤막한 미리보기 화면이 나타나면서 마치 그 SNS의 게시물인 것처럼 자연스럽게 삽입됩니다. 어떻게 그럴 수 있을까요?
이것은 바로 오픈 그래프(Open Graph) 프로토콜 때문입니다.
오픈 그래프 프로토콜은 페이스북에서 만든 것인데요, 웹 페이지를 페이스북에 공유할 때 페이스북 게시물인 것처럼 만들기 위해 고안된 것이죠. 공유하는 웹 페이지를 직접 클릭해서 들어가 보기 전에 웹 사이트 정보를 미리보기로 구성해서 보여줍니다.
미리보기 화면을 어떻게 구성할지 <meta> 태그 안에서 오픈 그래프를 사용해 설정합니다.
오픈 그래프 맛보기
포털 사이트에서 아무 뉴스나 선택해서 열어놓고, 웹 개발자 도구 창의 [요소] 창도 함께 열어보세요.
그리고 <head> 태그를 펼쳐 보면 그 안에 아주 많은 <meta> 태그가 사용된 것을 볼 수 있습니다.
<meta> 태그 중 대부분이, 현재 페이지를 SNS로 공유했을 때 어떻게 표시할지 지정한 오픈 그래프 관련 정보들입니다.
미리보기에 표시할 제목, 날짜, 유형, 링크 주소, 대표 이미지, 설명 등, 아주 많은 정보가 들어 있습니다.
기본적인 오픈 그래프 속성
HTML의 <meta> 태그는 웹 페이지에 대한 메타 정보를 담아두는 태그입니다. 검색 봇에서 해당 웹 페이지를 검색할 때 참고할 수 있는 정보죠. 오픈 그래프 프로토콜을 적용하기 위해서도, <meta> 태그를 사용해서 공유할 제목과 이미지, 요약 정보 등을 구성합니다.
<meta property="속성 이름" content="속성 값">
오픈 그래프의 기본 속성은 4가지입니다.
- og:title - 웹 페이지 제목
- og:type - 웹 페이지 유형 (ex, article, movie 등). 각 유형에 따라 추가적인 정보가 추가될 수 있음.
- got:image - 대표 이미지
- og:url - 링크할 주소
기본 속성 외에 필요에 따라 추가할 수 있는 여러 가지 옵션이 있죠.
- og:audio - 오디오 파일
- og:description - 웹 페이지 내용 요약.
- og:locale - 웹 페이지 언어. 기본은 en-US. 한글로 바꾸려면 ko_KR
- og:site_name : 사이트 이름. og:title은 현재 페이지의 제목이고, og:site_name은 전체 사이트 이름.
- og:video - 비디오 파일
앞에서 설명한 속성들 중 일부 속성은 추가적인 정보를 가질 수 있습니다.
예를 들어, 페이지를 공유할 때 대표 이미지를 사용한다면 그 이미지의 너비나 높이, alt 텍스트 등을 지정할 수 있습니다.
- og:image:url - og:image와 같음
- og:image:secure_url - https로 접속할 경우 표시할 이미지 주소
- og:image:type - 이미지 유형
- og:image:width - 너비
- og:image:height - 높이
- og:image:alt - 대체 텍스트
비디오의 경우
- og:video:url - og:image와 같음
- og:video:secure_url - https로 접속할 경우 표시할 이미지 주소
- og:video:type - 이미지 유형
- og:video:width - 너비
- og:video:height - 높이
오디오의 경우
- og:audio:url - og:image와 같음
- og:audio:secure_url - https로 접속할 경우 표시할 이미지 주소
- og:audio:type - 이미지 유형
이외에도 더 많은 속성이 있는데, 자세한 설명은 ogp.me 를 참고하세요.
앞에서 봤던 뉴스 페이지의 메타 정보를 다시 한번 살펴볼까요? 방금 설명한 속성들이 사용된 것을 볼 수 있고, 뉴스 페이지를 SNS로 공유했을 때 지정해 놓은 메타정보에 따라 미리보기가 만들어집니다.
일반적인 미리보기 설정
내가 만든 웹 페이지를 블로그나 카카오톡, 페이스북 등 일반적인 SNS로 공유하려고 할 때 설정할 정보입니다.
[참고]
Meta for Developers(페이스북) 웹 마스터용 공유 가이드
<meta property="og:title" content="콘텐츠 제목">
<meta property="og:url" content="웹페이지 URL">
<meta property="og:type" content="웹페이지 타입(blog, website 등)">
<meta property="og:image" content="표시되는 이미지">
<meta property="og:title" content="웹사이트 이름">
<meta property="og:description" content="웹페이지 설명">트위터 미리보기 설정
트위터 사이트는 모든 게시물을 '카드(card)' 형태로 구현합니다. 이것을 트위터 카드라고 하는데, 내가 만든 웹 페이지를 트위터로 공유하려면 트위터 카드에 맞게 오픈 그래프를 설정해야 합니다.
[참고]
<meta name="twitter:card" content="트위터 카드 타입(요약정보, 사진, 비디오)">
<meta name="twitter:title" content="콘텐츠 제목">
<meta name="twitter:description" content="웹페이지 설명">
<meta name="twitter:image" content="표시되는 이미지">
간단하게 오픈 그래프 소스를 만들어 주는 사이트 - Meta Tags
앞에서 살펴본 것처럼 <meta> 태그에서 설정해 줘야 하는 속성들이 꽤 많습니다. 트위터의 경우에는 별도로 소스를 작성해야 하고요.
오픈 그래프 소스를 간편하게 생성해 주는 사이트가 있습니다.
Meta Tags — Preview, Edit and Generate
With Meta Tags you can edit and experiment with your content then preview how your webpage will look on Google, Facebook, Twitter and more!
metatags.io
사용법)
1. 공유할 SNS 사이트를 선택합니다. 클릭해서 파란색으로 바뀌면 선택된 상태입니다.
2. 미리보기에 사용할 이미지를 드래그하고, 웹 페이지 제목과 요약 내용을 입력합니다.
미리보기 이미지와 내용이 바로 오른쪽에 나타나기 때문에, 각 SNS 사이트에서 어떤 형태로 표시될지 미리 알 수 있죠.
3. 현재 상태로 사용하겠다면 사이트 오른쪽에 있는 [GENERATE META TAGS] 버튼을 클릭합니다.
4. <Copy>를 클릭해 화면에 표시된 소스를 복사한 후 자신의 웹 페이지 소스에서 <head>와 </head> 사이에 붙여넣습니다.
단, 이 때 주의할 것은 og:image의 값, 즉 미리보기 이미지는 단지 예시일 뿐이므로 제공하는 소스에 있는 경로를 사용하면 안되고
직접 이미지를 서버에 올려놓은 후 서버의 이미지 파일 경로를 작성해야 합니다.
'html' 카테고리의 다른 글
| 파비콘(favicon) 사용하기 (0) | 2022.03.08 |
|---|
