<meta> 태그에 대해

<meta> 태그란?

HTML 문서의 head 태그 내에 여러 meta 태그에 대해서 본 적이 있을 겁니다. meta 태그는 어떤 역할을 하는 태그고 우리가 어떻게 이해하면 될지에 대해서 알아보았습니다.

우선 <meta> 태그에 대해 알아보기 전에 <head> 태그에 대해 알아보겠습니다. <head> 태그는 문서에 대한 기본적인 machine-readable한 정보를 웹브라우저나 검색 엔진에 정보를 제공하는 태그입니다. 즉 사용자보다는 기계를 위한 정보를 담고 있는 태그입니다. <head> 태그 내부에는 여러가지 다른 태그들이 들어 올 수 있습니다. 대표적으로 <script>, <link>, <style>, <title>가 있습니다.

<meta> 태그의 종류

name 속성이 정의된경우: document-level metadata를 제공
http-equiv 속성이 정의된 경우: pragma directive, 비슷하게 이름을 가진 http 헤더의 값과 동일한 값을 제공
charset 속성이 정의된 경우: 문서의 문자 인코딩 방식
itemprop 속성이 정의된 경우: User-defined 메타 데이터를 제공

하나씩 알아보겠습니다.

name 속성이 정의된 <meta> 태그

meta 태그에 name 속성이 정의된 경우, 해당 문서에 대한 메타 데이타를 제공합니다. name의 속성 값 이름의 종류는 다음과 같습니다.

author : 저자에 대한 정보
description: 페이지의 설명
application-name : 웹 애플리케이션의 이름
viewport : 웹 페이지의 뷰 포트 영역
keywords : 검색 엔진을 위한 키워드 목록
generator : 문서에 사용되는 소프트웨어 패키지

해당 속성에 대한 값은 content 속성에 정의합니다.

<meta name="author" content="Jun Seub Lim" />

http-equiv이 정의된 <meta> 태그

http-equiv이 정의된 경우, 프래그마 지시문을 정의합니다. 모든 가능한 값은 http 헤더의 이름과 동일합니다.

content-security-policy: 해당 페이지에 대한 content-policy를 정의할 수 있습니다.
content-type: MIME type과 character 인코딩 방식을 정의할 수 있습니다.
default-style: 디폴트 css 스타일시트의 이름을 정의할 수 있습니다.
refresh: 몇 초뒤 새로고침할지 정의합니다.

<meta http-equiv="refresh" content="3" />

charset 속성이 정의된 <meta> 태그

charset이 정의된 <meta> 태그는 해당 문서의 인코딩 방식을 제공합니다. 값은 무조건 utf-8이어야 하는데, 이는 utf-8이 HTML5 문서에서 허용하는 유일한 인코딩 방식이기 때문입니다. 대부분의 브라우저는 디폴트 인코딩 방식이 utf-8이기에 없어도 무관합니다. 또한 해당 태그는 문서의 첫 1024 바이트 내에 위치해야 합니다.

<meta charset="utf-8" />

itemprop 속성이 정의된 <meta> 태그

itemprop은 <meta>태그에만 정의된 속성이 아니고 모든 HTML Element가 가지는 global attribute입니다. name, http-equiv와 마찬가지로 content 속성의 값을 value로써 사용합니다.

<meta itemprop="itemprop" content="content" />

개발 일지 블로그