HTML의 <meta> 요소를 제대로 이해하고 활용하는 방법을 알아봅니다.
meta 요소란 무엇인가?
<meta> 요소는 HTML 문서에 대한 다양한 종류의 메타데이터(metadata)를 정의하는 데 사용됩니다. 여기서 메타데이터란 '정보'를 뜻하며, 좀 더 정확히 말하면 다른 데이터를 설명하고 그에 관한 정보를 제공하는 데이터를 의미합니다.
<meta> 요소는 여러 가지 속성과 값을 가질 수 있으며, 그중에서도 name 속성이 가장 중요한 속성 중 하나입니다.
name 속성은 다양한 값을 가질 수 있습니다. 예를 들어 description 값은 content 속성과 함께 사용되어 페이지를 설명하는 역할을 합니다.
<head>
<meta name="description" content="HTML meta 요소에 대해 배워보세요" />
</head><meta> 요소는 오직 <head> 요소 내부에만 위치할 수 있습니다.
메타데이터는 웹 페이지 화면에는 표시되지 않지만, 서버·브라우저·검색 엔진 같은 기계(머신)가 이를 읽고 처리합니다.
SEO에서 meta 요소가 중요한 이유
이러한 특성 때문에 <meta> 요소는 SEO(검색 엔진 최적화) 측면에서 가장 중요한 HTML 요소 중 하나로 꼽힙니다. 구글 같은 검색 엔진에게 웹사이트 콘텐츠 외에 추가적인 정보를 제공하여, 사이트가 어떤 주제를 다루는지 그리고 사용자의 검색어와 얼마나 관련성이 높은지를 판단하게 해주기 때문입니다.
meta description은 검색 엔진이 온페이지 콘텐츠보다 더 적절하다고 판단할 경우, 검색 결과 페이지(SERP)에 사이트 설명을 생성하는 데 간혹 사용되기도 합니다.
viewport 태그
viewport meta 태그는 모바일에 최적화되지 않은 웹사이트가 작은 화면에서도 더 잘 보이도록 도와줍니다. 아래의 viewport 설정이 모바일에 최적화된 기본값이며, 특별한 이유가 없다면 반드시 사용하는 것이 좋습니다.
<meta name="viewport" content="width=device-width, initial-scale=1" />width=device-width: 브라우저에게 페이지 너비를 사용자 기기의 화면 너비에 맞추도록 지시합니다.initial-scale: 페이지가 처음 로드될 때의 확대/축소 수준을 조절합니다.initial-scale=1은 100% 확대율을 의미하며,initial-scale=2로 설정하면 첫 로딩 시 200% 확대된 상태로 표시됩니다.
viewport는 <meta> 요소 중에서도 비교적 고급에 해당하는 태그이므로, 기본 설정을 임의로 변경하기 전에 충분히 학습한 후 사용하는 것이 좋습니다. Mozilla(MDN)에서 viewport 태그에 대한 방대한 공식 문서를 제공하고 있으니 참고하시기 바랍니다.
robots meta 태그
robots meta 태그('robot meta directives'라고도 불림)는 index 또는 noindex 속성 값을 사용해 검색 엔진이 해당 페이지를 색인(indexing)할지 여부를 지정합니다.
기본값은 index이므로, 웹사이트가 검색 엔진에 색인되기를 원하지 않는다면 content 값으로 noindex를 명시하면 됩니다.
<meta name="robots" content="noindex" />robots 태그는 검색 엔진이 사이트 내 링크를 따라갈(follow)지 여부를 지정하는 데에도 사용할 수 있으며, 이때는 follow 또는 nofollow 값을 사용합니다.
<meta name="robots" content="nofollow" />두 값을 하나의 요소 안에서 조합하는 것도 가능합니다.
<meta name="robots" content="noindex, nofollow" />robots 설정 시 주의사항
<meta> robots 설정은 매우 신중하게 다뤄야 합니다. 위 코드처럼 실제로 noindex, nofollow로 설정하면, 검색 엔진이 콘텐츠와 링크 모두를 색인하지 않도록 전체 웹사이트 범위에서 전역적으로(global) 차단하게 됩니다. 이는 SEO에 심각한 악영향을 미치므로 거의 사용해서는 안 됩니다.
noindex의 일반적인 활용 사례는 웹사이트가 아직 개발 중이어서 대중에게 공개할 준비가 되지 않았을 때입니다. WordPress에는 이러한 목적으로 페이지 색인을 임시로 비활성화하는 옵션이 내장되어 있습니다.
링크의 경우, nofollow를 전역(모든 링크)으로 적용하기보다는 특정 외부(outbound) 링크에만 선택적으로 적용하는 것이 더 실용적입니다. 예를 들어 유료 광고 링크처럼 검색 엔진이 따라갈 필요가 없는 링크에 앵커(anchor) 요소에 직접 지정하는 방식입니다.
<a href="#" rel="nofollow">스폰서 보러 가기</a>참고로 하이퍼링크는 기본적으로 follow로 설정되어 있습니다.