Open Graph Protocol
Open Graph Protocol은 페이스북에서 정의하고 만들어 공개/표준화한 Meta Tag Protocol입니다. 기본적으로 하나의 URL이 페이스북에 공유될 때 표시될 콘텐츠를 정의하는 것을 목적으로 합니다. 이미 표준을 오픈소스로 공개하여 현재는 아주 다양한 곳에서 이 표준안을 활용하여 서비스를 하고 있습니다. The Open Graph protocol을 방문하시면 표준안 전체를 보실 수 있습니다. 웹만이 아닌 다양한 미디어를 공유하기 위한 표준이기에 꽤 많은 타입이 존재합니다.
표준으로 공개 후 급속히 활용 범위가 넓어지면서 현재는 Naver에서는 스니펫에 활용된다든지, Kakao의 경우 메신저에서 URL이 공유될 때 나오는 썸네일 등에 활용됩니다.
<html prefix="og: https://ogp.me/ns#"> <head> <title>The Rock (1996)</title> <meta property="og:title" content="The Rock" /> <meta property="og:type" content="video.movie" /> <meta property="og:url" content="https://www.imdb.com/title/tt0117500/" /> <meta property="og:image" content="https://ia.media-imdb.com/images/rock.jpg" />
실제로 가장 많이 사용하게 되는 태그 타입은 아래의 5가지입니다. Kakao와 Naver에서도 이 5개의 태그를 주로 활용합니다.
- “og:title”
- “og:type”
- “og:url”
- “og:image”
- “og:description”
html tag <title> 과 “og:title”은 거의 같다고 생각하시겠지만 활용에서 약간의 차이가 있으며 결정적으로 “og:title”에서는 서비스명이나 회사명이 들어가면 안됩니다. <title> 에서는 대부분 페이지내용 – 서비스명이나 회사명, 또는 “|” 기호를 넣어서 작성하는데 반해 “og:title”에는 삭제하여야 합니다. 잘 발생하지는 않으나 SNS으로부터 패널티가 있을 수 있습니다.
일반적으로 관리 중인 페이지의 URL을 페이스북에 공유했을 때 나타나는 모양이나 내용이 생각했던 것과 다르다면 페이스북의 cache를 확인해볼 필요가 있습니다. “og:url”로 정의된 동일 URL에 대해서 기존에 만들어둔 캐시의 내용을 계속 활용하기 때문입니다. 카카오톡에서 링크 공유 시 나오는 이미지 등이 계획과 다른 경우 역시 cache 를 재설정 해야합니다.1 페이스북은 공식적으로 30일마다 한번씩 내용을 갱신하기에 최장 30일 동안 잘못된 내용이 공유될 수 있습니다.
페이스북의 경우 페이스북에서 제공하는 공유 디버거와 일괄 무효화 도구를 활용하면 됩니다.2 또한 Kakao의 경우 초기화 도구3를 통해 초기화 할 수 있습니다.
Twitter Card
이제는 페이스북에 많이 뒤쳐진 것 같지만 그래도 한때의 왕자 트위터에도 같은 용도의 Meta Tag가 존재합니다. Twitter Card라고 부르는 이 표준은 페이스북의 Open Graph 대비 많은 옵션을 제공하고 상세하게 설정도 가능합니다만 아무래도 og tag 만큼 활성화는 되어 있지 않습니다. Twitter Developer에 상세한 내용이 설명되어 있습니다.
기존에는 twitter card와 open graph를 둘다 사용하는 것을 당연하게 생각했습니다만 트위터에서 twitter card가 없고 og tag만 존재할 경우 유사성을 판단하여 twitter card로 활용하게되어 특별히 복잡한 항목을 가지고 있지 않는 이상 og tag만으로도 트위터에서 동일한 효과를 얻을 수 있게 되었습니다.
아래 코드는 og tag와 twitter card가 함께 표기되어 있는 샘플 코드입니다. 트위터에서 “og:url”, “og:title”, “og:description”, “og:image”를 해석해서 twitter card로 활용합니다.
<meta name="twitter:card" content="summary" /> <meta name="twitter:site" content="@nytimesbits" /> <meta name="twitter:creator" content="@nickbilton" /> <meta property="og:url" content="http://bits.blogs.nytimes.com/2011/12/08/a-twitter-for-my-sister/" /> <meta property="og:title" content="A Twitter for My Sister" /> <meta property="og:description" content="In the early days, Twitter grew so quickly that it was almost impossible to add new features because engineers spent their time trying to keep the rocket ship from stalling." /> <meta property="og:image" content="http://graphics8.nytimes.com/images/2011/12/08/technology/bits-newtwitter/bits-newtwitter-tmagArticle.jpg" />
이렇게 트위터에서 og tag를 활용해주기에 조금은 코드가 짧아지고 개발하는 과정도 단순해질 수 있었습니다. 이전에는 페이스북과 트위터 외에 여러개가 더 있어서 관련 태그만해도 10여줄이 넘어가는 흑역사도 있었습니다. 이미 역사의 저편으로 사라진 Google+에서는 schema.org에서 정의된 마이크로데이터를 사용하는걸로 되어 있습니다.
SNS와 SEO
og tag와 twitter card는 웹페이지가 SNS에서 공유/표현될 때 미리보기에 더욱 풍성한 정보를 포함시킬 수 있으므로 사용자 참여도를 높이는 효과를 거둘 수 있습니다. 단순히 URL만 나열되는 것보다는 더 나은 참여(클릭)을 유도하게 되겠죠. 그렇기 때문에 일부에서는 어떻게 더 많은 클릭을 유도할 수 있을까를 고민하기도 하고 별도의 SNS 전용 이미지를 삽입하여 흥미를 유발하기도 합니다.
검색엔진은 웹페이지의 내용만이 아니라 이 meta tag의 내용 또한 참고하여 검색엔진에 반영하기도 하며, 콘텐츠를 추천하기도 합니다. 또한 장기적으로는 더 많은 공유와 참여를 통해 SEO에 더 나은 결과를 만들기도 합니다만 꽤나 장기적인 투자가 됩니다. 하지만 구글에서는 공식적으로 얼마나 반영하고 있다고 밝히지는 않지만4 페이스북과 트위터를 통한 공유가 SEO에 반영된다고 밝혔으며, 그 링크를 통한 트래픽 또한 SEO에 영향을 준다고 이야기 하고 있습니다. 페이스북의 좋아요와 트위터에서 리트윗은 SEO에 긍정적인 영향을 끼칩니다.