제목:

소셜 미디어 연동을 위한 오픈그래프 태그

날짜: Posted on

이 포스트에서는 오픈그래프 태그에 관한 내용을 다룹니다.

오픈그래프(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/

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다