이 포스트에서는 오픈그래프 태그에 관한 내용을 다룹니다.
오픈그래프(Open Graph)는 웹 페이지를 소셜 미디어와 연동하기 위한 기법입니다. 사이트가 소셜 미디어(트위터, 페이스북, 인스타그램 등)로 공유될 때 오픈그래프 정보가 우선적으로 활용됩니다. 여기에는 제목, 설명, 대표 이미지, URL 등이 들어갑니다.
오픈그래프 정보를 웹 페이지에 삽입할 때는 <head> … </head> 안에 메타 태그(<meta>)의 형태로 삽입합니다. 예를 들면, 다음과 같습니다.
<meta property="og:title" content="Juwan Park" /> <meta property="og:description" content="웹 개발자 & 디자이너 블로그입니다." /> <meta property="og:type" content="website" /> <meta property="og:url" content="https://blog.pjw48.net" /> <meta property="og:site_name" content="Juwan Park" /> <meta property="og:image" content="https://blog.pjw48.net/wp-content/themes/indreni/img/indreni_feedback.png" />
<meta property="og:title" content="안녕하세요! – Juwan Park" /> <meta property="og:description" content="웹 개발자 & 디자이너 블로그입니다." /> <meta property="og:type" content="article" /> <meta property="og:url" content="https://blog.pjw48.net/2017/02/04/hello-world/" /> <meta property="og:site_name" content="Juwan Park" /> <meta property="og:image" content="https://blog.pjw48.net/wp-content/themes/indreni/img/indreni_feedback.png" />
이와 같이 property 속성값에 ‘og’ 네임스페이스를 넣고 ‘title’, ‘description’, ‘type’, ‘url’, ‘site_name’, ‘image’ 등을 씁니다. 그리고 그에 맞는 값을 content 속성값에 넣습니다. 첫 번째는 사이트의 메인 페이지에 사용한 예이고, 두 번째는 사이트 내의 개별 페이지에 사용한 예입니다.
- og:title
- 페이지의 제목을 지정합니다.
- og:description
- 페이지의 간단한 설명을 서술합니다.
- og:type
- 페이지의 형태를 지정합니다. 일반 페이지라면 ‘website’를, 블로그 등의 개별 페이지라면 ‘article’을 씁니다. 그 외에도 몇 가지 형태가 더 있습니다.
- og:url
- 페이지로 연결되는 URL입니다.
- og:site_name
- 사이트의 이름입니다.
- og:image
- 사이트를 대표하는 이미지입니다.
기본적으로는 이렇게 하면 오픈그래프 기법으로 소셜 미디어와 웹 페이지를 연동할 수 있습니다. 위에 서술된 항목 외에도 여러 추가적인 항목들이 있으므로 웹 페이지의 형태에 따라 알맞게 선택하여 사용하면 됩니다.
* 오픈그래프 프로토콜과 관련된 공식 사이트는 다음과 같습니다: http://ogp.me/