소개
오픈 그래프(Open Graph) 메타 태그는 웹 페이지의 콘텐츠를 소셜 미디어나 메신저에서 공유할 때 어떻게 표시될지를 제어하기 위해 사용되는 HTML 태그이다. 원래 페이스북에서 개발한 프로토콜이지만, 현재 다양한 플랫폼에서 이를 지원한다.
이 태그를 통해 웹 페이지의 제목, 설명, 이미지, URL 등을 명확하게 지정함으로써 각 플랫폼에서 오픈 그래프 정보를 읽어 사용자가 콘텐츠를 공유할 때 깔끔한 정보로 보여줄 수 있게 해준다.
카카오톡이나 SNS 등에서 특정 링크를 붙여놓으면 알아서 만들어주는 기능을 볼 수 있을텐데 그 역할을 하는 것이 이것이다.
오픈 그래프 메타 태그는 <meta> 태그로 작성하고, 주로 <head> 태그 안에 포함된다. 예를 들면 아래와 같이 작성할 수 있다.
<meta property="og:locale" content="ko_KR"/>
<meta property="og:type" content="website"/>
<meta property="og:url" content="https://example.com/"/>
<meta property="og:title" content="사이트 제목"/>
<meta property="og:description" content="사이트 설명"/>
<meta property="og:site_name" content="사이트 이름"/>
<meta property="og:image" content="표시될 이미지"/>주요 태그
- og:title - 공유 시 표시될 페이지 제목
- og:description - 페이지에 대한 설명
- og:image - 공유될 때 표시되는 대표 이미지의 URL. 플랫폼마다 이미지의 권장 크기가 다르므로 적절한 이미지 해상도를 설정해야 하며 절대 경로 URL로 설정해야 한다.
- og:url - 콘텐츠의 URL
- og:type - 콘텐츠의 타입
- website - 일반 웹 사이트
- article - 기사나 블로그 글
- video.movie - 동영상 콘텐츠
- og:site_name - 사이트의 이름
- og:locale - 콘텐츠의 언어 및 지역. 기본값은 en_US
효과
- 클릭률 향상
- 제목, 설명, 이미지를 명확히 설정해서 사용자의 관심을 끌 수 있다.
- 일관된 콘텐츠 표현
- 플랫폼마다 페이지가 다르게 보이는 문제를 방지한다.
- 긍정적인 SEO
- 소셜 미디어 공유 시 더 많은 트래픽을 유도할 수 있다.
검증
- 페이스북 디버거 - https://developers.facebook.com/tools/debug/
- 트위터 카드 검증기 - https://cards-dev.twitter.com/validator
※자세한 내용은 https://ogp.me/ 에서 확인할 수 있다.
'프로그래밍 > HTML, CSS' 카테고리의 다른 글
| [CSS] Clearfix Hack (0) | 2016.08.30 |
|---|