Estimated reading time: 4 minutes
메타데이터 개념
구글 SEO 및 네이버 SEO 설정 시, 메타데이터는<head> </head> 사이에 들어가는 ‘페이지에 대한 정보’를 의미합니다.
위의 이미지를 예시로 들어보자면, “이 페이지는 전구에 대해서 설명을 하고 있다.” 라는 정보를 <head> 파트에 알려, 로봇이 먼저 인지할 수 있도록 도와주어야 합니다.
그러므로 전구의 사진, 전구 사진에 대한 alt, 전압, 사양, 빛의 조도 등이 그러한 내용입니다.
물론, 이 정보를 봐도 전구가 발휘할 수 있는 기능 수준을 모두가 이해하지는 못 합니다. 하지만, 메타 태그에 “따뜻하고 밝은 색을 내는 흰색 조명” 이라고 설명을 추가한다면, 관련 키워드를 검색한 사람들이 발견할 수 있을 것입니다.
이러한 메타 데이터는 검색창에서 사용자들이 “따뜻한 조명” 이라고 검색하면, title의 설명 이외 아래에 나와 있는 설명에서 노출됩니다.
메타데이터 Meta tag 작성 이해하기
따뜻한 조명 검색 결과를 바탕으로, meta tag의 코드를 살펴보자면 다음과 같습니다.
<html>
<head>
#기타 메타태그 생략
<title> 차가운 조명 아니면 따뜻한 조명?</title>
#중략
<meta name="description" content="따뜻한 조명은 침실이나 거실처럼 안락한 느낌을 원하는 공간에 좋습니다...(중략)>
<meta name="robots" content="index, folow, max-snippet-1...(중략)>
</head>검색엔진에서 검색로봇이 읽어가는 정보는 본문의 내용보다 메타태그에서 설명하는 내용을 우선으로 합니다.
그러므로 이 페이지에서 무엇을 설명하고 있는지, 메타데이터 영역 내에서 검색 사용자들의 의도와 관련 있는 정보를 되도록 자세하게 설명해주는 것이 가장 바람직합니다.
SEO에 영향을 줄 수 있는 또 다른 메타데이터
rel=canonical tag
SEO 설정을 하실 때, 콘텐츠들이 중복을 방지하려면 원본 소스를 검색 엔진에게 알려주어야 합니다. 이때 rel=canonical tag 태그를 이용할 수 있습니다.
메타 태그에서 title, description을 입력하는 것 만큼 rel=canonical tag 도 매우 중요한 영향을 미칩니다. 사이트 내에 배치되어 있는 여러 콘텐츠들 중 먼저 보여주어야 하는 우선 순위를 정해두지 않는다면, 로봇이 해당 사이트에 대해서 올바르게 이해하기 어려운 까닭입니다.
이와 관련하여, 예시 코드를 작성해보자면 다음과 같습니다.
<head>
<link rel="canonical" href="https://example.com/paagewriter/seo-content/" />
</head>생각보다 작성 방법은 매우 간단하죠? 이 방법은 검색엔진 관점에서 사이트 내에서 비슷한 링크를 가진 페이지들끼리 병합하여 이해하고, 리디렉션 하지 않고 보여주는 단일 표준 버전의 URL로 이해합니다.
rel=amphtml
페이지나 포스트를 모바일 친화적인 형태인 AMP로 변형하려면 rel=amphtml 태그를 <head> 파트에 삽입하면 됩니다. 이 방법은 네이버나 다음 등에서는 아직 모바일 친화적인 페이지 등을 분류하고 있지 않아서 적용되는 사항은 아니지만, 구글에서는 매우 의미 있는 태그입니다.
워드프레스 등 CMS를 이용하고 있다면, AMP 페이지 관련 플러그인을 이용해보세요. 자동으로 rel=amphtml 링크가 생성됩니다.
dns-prefetch
위의 메타데이터는 특정한 파일을 찾고 있는 검색엔진에게 미리 알려주는 태그입니다. dns-prefetch 태그가 매칭된다면, 링크를 정의하고 있는 페이지 요소들을 검색 엔진이 빠르게 찾고, 검색 사용자들에게 제공합니다.
<link rel="dns-prefetch" href="https://pagewriter.kr/">메타 태그는 위의 예시 코드처럼 작성하시면 됩니다.
Rel=author
위의 메타데이터는 게시물의 작성자를 알려주는 태그입니다. 작성자가 아주 유명한 사람이라면 유용한 메타데이터이지만, 2015년 10월 검색엔진 패치 이후 지금은 검색결과에 별달리 반영되지 않는 추세입니다.
종종 tistory 등에서 만들어진 테마 등에서 Rel=author 태그를 자주 발견할 수 있는데, 개별로 홈페이지를 제작하고 구글 SEO 및 네이버 SEO를 계획하고 있다면 큰 의미를 둘 필요는 없습니다.
hreflang
위의 태그는 다국어 사이트를 운영하는 경우, 둘 이상 언어로 사이트 및 페이지를 운영하고 있다고 알리는 태그입니다. 최근 국제화 혹 수출을 위해 홈페이지를 만드는 기업들이 굉장히 많은 한편, 위의 메타 태그가 누락되어 있는 경우들을 종종 보곤 하였습니다.
<link rel="alternate" href="http://example.com/"
hreflang="ko" />
<link rel="alternate" href="http://example.com/en-gb/"
hreflang="ko-kr" />
<link rel="alternate" href="http://example.com/de/"
hreflang="de" />태그는 위와 같이 작성하면 됩니다. 위의 예시는 영어에서 한국어로, 영국식 영어에서 한국어로 등 어떤 언어의 사이트로 구성되어 있는지, 원본 언어는 무엇인지 일러주는 기능을 합니다.
소셜 메타데이터 및 오픈그래프 등
다음 글에서는 메타데이터 중, SEO를 위해 매우 중요한 요소로 여겨지는 소셜 메타데이터, 오픈그래프, 소셜카드(페이스북, 트위터 등)에 대해서 자세히 다루어보겠습니다.
감사합니다.
