메타태그는 사이트에 관한 정보를 검색엔진에 제공하는 데 유용하게 사용할 수 있고, 모든 유형의 클라이언트에 정보를 제공하는데 사용할 수 있습니다. 메타태그는 정의할 수 있는 항목이 너무 많고, 접근 방식에 따라 달라질 수 있기 때문에 어디까지 정의를 해야 하는지 궁금했습니다.
구글(Google)에서 이해할 수 있는 메타태그
구글 서치 콘솔(Google Search Console) 고객센터에서 제공하는 ‘Google에서 이해할 수 있는 메타태그‘를 참고해봤습니다. 구글에서는 아래의 메타태그만 처리하고 나머지는 무시한다고 합니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="Description" CONTENT="작성자: A.N. 작성자, 삽화가: P. Picture, 카테고리: 도서, 가격: £9.24, 분량: 784페이지">
<meta name="google-site-verification" content="+nxGUDJ4QpAZ5l9Bsjdi102tLVC21AIh5d1Nl23908vVuFHs34="/>
<title>예제 도서 - 어린이를 위한 양질의 중고 도서</title>
<meta name="robots" content="noindex,nofollow">
기본적으로 위와 같이 처리되고, 추가로는
<meta name="google" content="notranslate" /> <meta http-equiv="Content-Type" content="...; charset=..." /> <meta http-equiv="refresh" content="...;url=..." /> <meta name="viewport" content="..."> <meta name="rating" content="adult" /> <meta name="rating" content="RTA-5042-1996-1400-1577-RTA" />
여기까지 구글에서 이해하고 처리한다고 공식 고객센터에서 설명하고 있습니다.
네이버 웹마스터도구
네이버 웹마스터도구에서도 웹 표준 최적화 기본 가이드와 더불어 네이버 웹마스터도구 사용 가이드를 제공하고 있습니다. 이 중에서 웬 표준 HTML 마크업 가이드를 살펴보면 메타태그에 대해서 가이드를 주고 있습니다. 하지만 네이버의 경우 웹 표준 메타태그에 대해서 모두 설명하고 있어서 오픈 그래프, 소셜 미디어까지 가이드를 하고 있습니다.
오픈 그래프
<head> <meta property="og:type" content="website"> <meta property="og:title" content="페이지 제목"> <meta property="og:description" content="페이지 설명"> <meta property="og:image" content="http://www.mysite.com/myimage.jpg"> <meta property="og:url" content="http://www.mysite.com"> </head>
소셜 미디어
<head> ... <meta property="og:type" content="website"> <meta property="og:title" content="페이지 제목"> <meta property="og:description" content="페이지 설명"> <meta property="og:image" content="http://www.mysite.com/article/article1_featured_image.jpg"> <meta property="og:url" content="http://www.mysite.com/article/article1.html"> ... <meta name="twitter:card" content="summary"> <meta name="twitter:title" content="페이지 제목"> <meta name="twitter:description" content="페이지 설명"> <meta name="twitter:image" content="http://www.mysite.com/article/article1.html"> <meta name="twitter:domain" content="사이트 명"> ... </head>
여기에 모바일 앱 연결 내용까지 있으니 네이버에 최적화 되었다고 보기에는 힘들고, 말 그대로 웹 표준에 대한 정의라고 할 수 있습니다.
결론
사이트에 많은 정보를 담고 있으면 물론 좋겠지만, 검색엔진에서 기본적으로 확인을 하는 정보가 확실하게 들어가 있으면 되지 않을까라는 개인적인 생각입니다. 구글에서 분명히 확인하는 메타태그를 우선으로 넣었고, 네이버에서 요구하는 오픈그래프까지 넣었습니다. 정답은 없으니, 각자 생각하는 방식대로 진행하시면 되겠습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="canonical" href="대표 주소">
<meta name="Description" content="페이지 설명">
<meta name="Keywords" content="페이지 키워드">
<meta name="google-site-verification" content="구글 검색등록 인증 코드"/>
<meta name="naver-site-verification" content="네이버 검색등록 인증 코드"/>
<title>페이지 제목 - 검색결과의 제목</title>
<meta name="robots" content="index,follow">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta property="og:type" content="website">
<meta property="og:title" content="페이지 제목">
<meta property="og:url" content="대표 주소">
<meta property="og:description" content="페이지 설명">
<meta property="og:image" content="">