[HTML] Open graph (오픈 그래피, og 태그)

안녕하세요. 명월입니다.

이 글은 html 태그 중 opengraph에 대한 설명입니다.

사실 opengraph도 html 메타 태그 종류 중의 하나입니다만 그 성질이 약간 다르기 때문에 따로 글을 작성했습니다.

opengrash는 사실 SNS(소셜 네트워크)에서 그 개념이 시작되었는데 우리가 SNS을 통해 해당 링크를 복사하여 SNS에 개시를 하면 링크를 클릭해서 들어가기 전까지 이 링크가 어떤 데이터를 가지고 있는지 알 수가 없습니다.

예를 들면, 제가 페이스북에 블로그를 알리기 위해, url 링크를 개시하면 단순히 url만으로는 개발 관련 사이트인지, 성인 사이트인지 알 수 없습니다. 또 지금같이 악성 코드가 범람하는 시대에 아무 의심없이 링크를 클릭해서 들어가기도 망설여 집니다.

그럴 때 사용하는 태그로써 미리보기 이미지나 그 링크에 대한 설명, 제목을 표사하기 위한 태그입니다.

위 이미지는 제가 트위터에 개시한 이미지입니다. 보시면 url 링크를 개시했는데 저렇게 이미지와 블로그 제목이 표기가 됩니다.

그럼 그 opengraph 태그에 대해 알아보겠습니다.

링크 - http://ogp.me

opengraph의 기본 태그

1. og:title - 사이트의 제목 태그

2. og:type - 사이트의 종류 스타일 예) video.movie

3. og:image - 사이트를 나타낼 대표 이미지

4. og:url - 사이트의 대표 url

<meta property="og:title" content="명월일지" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://nowonbun.tistory.com" />
<meta property="og:image" content="https://t1.daumcdn.net/cfile/tistory/1935C94C505D9F8B13" />

opengraph의 옵션 태그

1. og:audio - 사이트에 포함되는 오디오 파일 url

2. og:description - 사이트의 설명

3. og:determiner - 문장 시작에 나타나는 단어 선택(?)이라는 것 같은데, 한글과는 관계가 없을 듯 싶네요. 그냥 공란입니다.

4. og:locale - 사이트의 언어 선택입니다. 기본값은 en_US입니다만, 한글의 경우는 ko_KR입니다.

5. og:locale:alternate - 사이트의 다른 언어 종류라는데, 다국적 사이트일 때 적용하는 태그일 듯 싶습니다.

6. og:site_name - 전체 사이트는 title로 표시하면 site_name은 좀 더 세부적인 카테고리 정도의 레벨입니다.

7. og:video - 사이트에 포함되는 비디오 파일 url

<meta property="og:audio" content="http://example.com/bond/theme.mp3" />
<meta property="og:description"  content="개발 즐겁게 합시다." />
<meta property="og:determiner" content="the" />
<meta property="og:locale" content="en_GB" />
<meta property="og:locale:alternate" content="fr_FR" />
<meta property="og:locale:alternate" content="es_ES" />
<meta property="og:site_name" content="Open graph 태그" />
<meta property="og:video" content="http://example.com/bond/trailer.swf" />

opengraph의 구조 프로퍼티

og:오브젝트:url - 이미지 혹은 비디오, 오디오 오브젝트의 경로

og:오브젝트:secure_url - SSL(HTTPS)의 경로

og:오브젝트:type - 오브젝트 타입의 종류

og:오브젝트:width - 오브젝트 너비

og:오브젝트:height - 오브젝트 높이

og:오브젝트:alt - 오브젝트 설명

<meta property="og:image" content="http://example.com/ogp.jpg" />
<meta property="og:image:secure_url" content="https://secure.example.com/ogp.jpg" />
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:width" content="400" />
<meta property="og:image:height" content="300" />
<meta property="og:image:alt" content="A shiny red apple with a bite taken out" />

<meta property="og:video" content="http://example.com/movie.swf" />
<meta property="og:video:secure_url" content="https://secure.example.com/movie.swf" />
<meta property="og:video:type" content="application/x-shockwave-flash" />
<meta property="og:video:width" content="400" />
<meta property="og:video:height" content="300" />

<meta property="og:audio" content="http://example.com/sound.mp3" />
<meta property="og:audio:secure_url" content="https://secure.example.com/sound.mp3" />
<meta property="og:audio:type" content="audio/mpeg" />

저 위 링크를 통해 조사한 것인데 Arrays(배열) 과 Object Types의 경우는 필요가 없을 것 같네요.

예를 들면 music:duration는 음악 파일인 경우 음악 파일의 길이를 표시하는 것같은데, 이게 SNS상에서 표시가 되나? 제가 facebook이랑 twitter에서 시험해 봤는데 이 정보는 공유가 안되네요.

검색 엔진에서 좋은 건가? 개인적으로 좀 이해가 안되서 생략했습니다.

여기까지 opengraph에 대해서 조사했는데 많은 분들이 opengraph를 사용하면 검색 최적화가 된다라고 쓰여 있기는 하는데 제가 조사한 google 메뉴얼에는 어디에도 opengraph가 검색 순위에 영향을 준다라고 설명한 글은 없네요.

링크 - https://support.google.com/webmasters/answer/7451184?hl=ko

그러나 확실히 google 검색 랭크에는 다른 평판이 높은 사이트에 얼마나 링크가 되어있는지에 따라 블로그의 순위가 결정된다고 되어있습니다. 즉, opengraph 자체로는 구글 검색 엔진에 미치는 영향은 없지만 여러 SNS에 등록이 되어서 많은 사람들이 그 링크를 타고 오게 되면 2차적으로 구글 검색 순위에 도움이 된다고 할 수 있습니다.

여기까지 html 태그 중 opengraph에 대한 설명이었습니다.

궁금한 점이나 잘못된 점이 있으면 댓글 부탁드립니다.