SNS 를 사로잡는 메타태그와 오픈그래프!

SNS 를 사로잡는 메타태그와 오픈그래프!

SNS 의 활발한 사용과 함께 다양한 미디어와 웹 문서의 공유는 일상이 되었습니다. 이번 포스팅에서는 웹문서가 공유될 때 표현되는 요약 내용을 정의하는 메타 태그에 대해서 알아보도록 하겠습니다.

1. 메타 태그란?

메타 태그는 웹문서의 내용에 대한 간략한 정의를 기록한 정보로 메타 태그는 html 문서의 <head> 와 </head> 사이에 웹페이지의 제목(title), 설명(description), 저자(author), 키워드(keyword) 등의 정보가 메타 태그로 작성됩니다.

이 정보는 사용자가 보는 화면에서 노출되지 않지만 검색 엔진의 크로울러-봇이 웹문서를 색인하여 사용자에게 보여 주거나 SNS 를 통해 페이지가 링크 공유될 때 해당 정의 내용이 사용자에게 웹페이지에 대한 요약으로 제공 됩니다.

 

2. 메타 태그가 중요한 이유!

a. 더 많은 유입을 만드는 메타 태그!

검색 서비스나 SNS 공유를 통해 콘텐츠가 노출될 때 전체 콘텐츠를 한꺼번에 다 노출될 수 없기 때문에 요약된 정보를 카드형태로 구성하여 나열 합니다. 이때 웹문서의 제목, 표시 URL, 간단한 설명, 대표 이미지 등의 정보가 공통적으로 노출 되며, 사용자는 요약정보를 보고 콘텐츠를 선택하게 되기 때문에 메타 태그를 통해 지정된 정보는 사용자의 유입에 매우 큰 영향을 미칩니다. 그렇기 때문에 사용자의 눈을 한번에 잡을 수 있는 메타 태그 설정은 매우 중요합니다.

b. SEO 에서의 중요한 요소!

뿐만 아니라 검색엔진은 메타 태그의 내용으로 콘텐츠의 색인을 만들고 각각의 콘텐츠를 분석하는 알고리즘을 통해 사용자에게 콘텐츠를 추천하게 됩니다. 그렇기 떄문에 메타 태그의 작성은 SEO(검색엔진최적화)에서도 빼놓을 수 없는 매우 중요한 요소 입니다.

 

<네이버 검색 결과 지정된 메타 태그 정보들이 노출되는 것을 볼 수 있다.>

 

3. 일반적으로 사용되는 메타 태그의 종류

뉴스 페이지나 블로그 등의 피드가 발행되는 웹문서의 경우 보통 기본 메타 태그와 오픈 그래프(Open Graph)를 많이 사용 합니다.

a. 기본 메타 태그

기본 메타 태그의 경우 검색엔진의 크로울러-봇(색인을 구성하기 위해 웹을 돌아다니며 정보를 수집하는 일종의 프로그램)이 기본적으로 수집을 하여 검색 서비스의 색인에 반영하게 됩니다.
(요즘은 오픈그래프의 또한 매우 일반화되어 기본 메타 태그 뿐만 아니라 오픈그래프도 같이 수집을 합니다.)

기본 메타 태그의 경우 주로 텍스트 정보를 정의 한다는 점이 뒤에 설명할 오픈 그래프와의 차이점 입니다.

b. 오픈 그래프 (Open Graph)

오픈 그래프 프로토콜 이라고 부르며 웹페이지를 SNS 와 사용자 경험 측면에서 더욱 밀접하게 연결하기 위한 일종의 법칙 입니다.

기본 메타 태그의 내용과 매우 유사하나 이미지, 소셜 아이디 등의 다양한 미디어와 SNS 연동을 위한 정보를 정의할 수 있어 사용자의 만족도를 높일 수 있습니다.

  • <meta property=”og:title” content=”웹문서의 제목, 현재 페이지(콘텐츠)의 제목 입니다.” />
  • <meta property=”og:type” content=”웹문서의 분류” />
  • <meta property=”og:image” content=”대표 이미지 경로” />
  • <meta property=”og:site_name” content=”사이트명으로 웹문서의 제목과는 별개 입니다.” />
  • <meta property=”og:url” content=”표시하고 싶은 URL” />
  • <meta property=”og:description” content=”현재 페이지(콘텐츠)에 대한 설명” />

*’og’ 는 ‘open graph’의 약자 입니다.

 

<페이스북에 공유된 웹문서와 오픈그래프>

대표 이미지(og:image)의 경우 화면 크기가 작은 모바일 환경에서는 특히 중요한 요소로 다음과 같은 규칙을 가지고 있습니다.

  • 최소 이미지 사이즈는 50 x 50 입니다.
  • png, jpeg, gif 파일 형식을 지원 합니다.
  • 페이스북의 최적화 이미지 사이즈는 1200 x 630 픽셀 입니다.

 

4. 메타 태그와 콘텐츠의 내용이 다르면?

메타 태그의 내용에 따라서 유입되는 트래픽이 차이가 크기 때문에 트래픽을 높이기 위해 콘텐츠와 전혀 관계없는 메타 태그의 내용을 작성하는 경우가 있습니다. 이 경우 사용자의 니즈와는 다른 콘텐츠가 사용자에게 제공되기 때문에 곧바로 이탈로 이어지고, 각각의 검색 엔진은 고유의 분석 알고리즘을 통해 메타 태그의 내용과 콘텐츠의 내용의 일치도에 대한 분석을 하기 때문에 노출 제한이 될 수 있습니다. 그렇기 때문에 메타 태그의 내용과 콘텐츠의 내용이 다르게 작성되어서는 안됩니다.

 

5. 정리

메타 태그는..

  • 자신의 콘텐츠를 다양한 플랫폼에 색인하기 위한 도구 입니다.
  • SEO에 영향을 주기 때문에 콘텐츠 노출에 영향을 줍니다.
  • 대표 이미지, 문서 제목, 설명 등의 요약 정보를 통해 클릭률에 영향을 줍니다.
  • 노출되는 요약정보와 실제 콘텐츠가 일치하지 않는다면 어뷰징으로 문제가 될 수 있습니다.

좋은 콘텐츠를 만드는 크리에이티브와 이를 웹에 발행하는 기술 두가지 모두를 통해 멋진 커뮤니케이션을 만들기를 바랍니다.

Gene.W.

W / 남편 / 아빠 / 마케터 / 커피덕후