HTML <meta> 태그 – 올바른 이해와 사용 방법

`<meta>` 태그의 정의 및 사용법

<meta> 태그는
<title>, <base>, <link>, <style>, <script>와 같은
HTML의 특정 목적을 위한 메타데이터 태그에서 다룰 수 없는 다양한 메타데이터를 나타내는 태그입니다.

여기에서 메타데이터(metadata)란,
HTML 문서를 다루고 기술적으로 처리하기 위해 필요한 코드화된 추가 정보를 의미합니다.

HTML에서는 다음과 같은 "특정한 목적을 위해 미리 지정된 용도"의 메타데이터에 관련된 태그가 있습니다.

이러한 태그들의 용도 이외의 메타데이터를 나타낼 때 <meta> 태그를 사용합니다.

예를 들어, 문서의 인코딩, 요약 설명, 검색 엔진 최적화(SEO) 정보, 소셜 미디어 공유 정보, 웹 애플리케이션 데이터 등 다양한 정보를 나타낼 수 있습니다. 또한, 사용자 정의 메타데이터를 통해 웹 분석, 사용자 추적, 맞춤형 콘텐츠 제공 등 사용자 정의 목적에 맞는 다양한 메타데이터를 나타내고 활용할 수 있습니다.

<meta> 태그는 하위 콘텐츠를 가질 수 없는 빈 요소(Void element)입니다. 이는 닫는 태그(</meta>)가 없다는 의미입니다.
그리고, 문서에는 여러 개의 <meta> 태그를 사용할 수 있습니다.

`<meta>` 태그가 제공하는 메타데이터와 관련된 속성

<meta> 태그는 "특정한 목적을 위해 미리 지정된 용도"의 메타데이터에 관련된 용도 이외의 메타데이터를 다음의 관련 속성으로 나타낼 수 있습니다.

meta 태그가 제공하는 메타데이터와 관련된 네 가지 속성
`charset`	문서의 문자 인코딩 지정합니다. 이 속성의 값은 문자열 형식이며, 대소문자를 구분하지 않습니다. HTML5 버전에서는 값을 "`utf-8`"로 지정해야 합니다.
`http-equiv`	이 속성은 HTTP 헤더에 해당하는 메타데이터를 지정합니다. 주로 문서의 '새로고침'이나 캐시 제어 등을 위해 사용됩니다. 이 속성의 가능한 값은 특정 HTTP 헤더 값입니다. `content` 속성을 함께 사용해서 지정한 메타데이터의 값으로 지정합니다.
`name`	이 속성은 문서 레벨 수준의 메타 데이터를 나타내는 `charset`, `http-equiv` 속성 이외의 문서 레벨 수준의 메타데이터를 나타낼 때 사용됩니다. 메타데이터의 이름과 값을 쌍으로 지정할 수 있다는 특징이 있습니다. 이 속성의 값은 사용하는 메타데이터의 이름을 지정하며, `content` 속성을 함께 사용해서 지정한 메타데이터의 값으로 지정합니다. 명세서에 포함된 표준 값이 있으며, 비표준이지만 대부분의 브라우저에서 지원하는 값, 그리고 특정 검색엔진에서 활용하는 값들이 있습니다. 그 밖에도 원하는 문서 레벨 수준의 메타데이터를 이 속성의 값, 즉 메타데이터의 이름으로 지정할 수 있으며, `content` 속성으로 그 메타데이터의 값으로 지정할 수 있습니다.
`content`	이 속성에는 사용되는 속성에 따라 `http-equiv`나 `name` 속성의 값을 나타냅니다.
`itemprop`	이 속성은 문서 레벨 수준이 아닌 콘텐츠 아이템 수준의 "사용자 정의 메타데이터"를 제공할 때 사용합니다. 이 속성의 값은 "사용자 정의 메타데이터의 값"이 됩니다. HTML 요소가 특정 속성을 가지는 경우에 주로 사용되며, 마크업된 콘텐츠의 의미론적 정보(검색 엔진 등에서 활용할 수 있도록 구조화된)를 제공하기 위한 "사용자 정의 메타데이터"로 사용되는 경우가 많습니다.

`charset`

이 속성은 문서의 문자 인코딩 지정합니다.

이 속성의 값은 문자열 형식이며, 대소문자를 구분하지 않습니다. HTML5 버전에서 charset 속성의 값은 반드시 "utf-8"로 지정해야 합니다.

<meta> 태그에 charset 속성을 사용하면 <head> 태그의 자식 요소로 사용하세요!

`http-equiv`

이 속성은 HTTP 헤더에 해당하는 메타데이터를 지정합니다. 주로 문서의 '새로고침'이나 캐시 제어 등을 위해 사용됩니다.

이 속성의 가능한 값은 특정 HTTP 헤더 값입니다.

<meta> 태그에 http-equiv 속성을 사용하면 <head> 태그의 자식 요소로만 사용해야 합니다.
단, http-equiv 속성의 값이 인코딩에 관련된 값(예를 들어, <meta http-equiv="content-type" content="text/html; charset=utf-8">)이 아닌 경우에는 <head> 태그 내의 <noscript> 태그의 자식 요소로 사용할 수 있습니다.

content 속성을 함께 사용해서 지정한 메타데이터의 값으로 지정합니다.

`http-equiv="content-security-policy"`

현재 문서의 콘텐츠 보안 정책을 정의하는 데 사용됩니다. 이 보안 정책은 브라우저가 웹 페이지의 리소스를 로드하고 실행할 때 적용됩니다.

콘텐츠 보안 정책에 관해서는 MDN - Content-Security-Policy를 참조하세요.

`http-equiv="content-type"`

http-equiv="content-type"은 문서 콘텐츠의 MIME 유형과 문서의 문자 인코딩을 나타냅니다.

http-equiv="content-type"를 사용할 경우 content 속성의 값은 반드시 "text/html; charset=utf-8""로 지정해야 합니다.

참고: text/html로 제공되는 문서에서만 사용할 수 있으며 XML MIME 유형으로 제공되는 문서에서는 사용할 수 없습니다.

`http-equiv="default-style"`

기본 CSS 스타일시트 세트의 이름을 설정합니다.

`http-equiv="x-ua-compatible"`

웹 페이지가 특정 버전의 Internet Explorer에서 어떻게 렌더링되어야 하는지를 지정하는 데 사용됩니다.

Internet Explorer 브라우저는 더 이상 사용되지 않습니다.
따라서, http-equiv="x-ua-compatible"도 더 이상 사용하지 않습니다.

`http-equiv="refresh"`

문서가 새로 고쳐지는 시간 간격을 지정합니다.
함께 사용하는 content 속성의 값이 음이 아닌 정수가 포함된 경우에만 해당됩니다. 이 때 정수는 초 단위를 나타냅니다.

너무 빨리 문서를 새로 고치면 웹 접근성에 방해가 될 수 있으니 주의해서 사용해야 합니다.

content 속성의 값이 양의 정수 값을 가지고 그 뒤를 문자열 "; url="과 그 뒤에 유효한 URL이 포함된 경우에는 페이지가 다른 페이지로 리디렉션되어야 할 때까지의 시간(초 단위)을 나타냅니다.

위 예제에서 content="5;url=https://example.com/"은 페이지가 3초 후에 https://example.com/로 이동하도록 지정하는 것을 의미합니다. 즉, 페이지가 로드된 후 3초가 지난 후에 지정된 URL로 자동으로 이동합니다.

`name`

이 속성은 문서 레벨 수준의 메타 데이터를 나타내는 charset, http-equiv 속성 이외의 문서 레벨 수준의 메타데이터를 나타낼 때 사용됩니다.
메타데이터의 이름과 값을 쌍으로 지정할 수 있다는 특징이 있습니다.

이 속성의 값은 사용하는 메타데이터의 이름을 지정하며, content 속성을 함께 사용해서 지정한 메타데이터의 값으로 지정합니다. 명세서에 포함된 표준 값이 있으며, 비표준이지만 대부분의 브라우저에서 지원하는 값, 그리고 특정 검색엔진에서 활용하는 값들이 있습니다.

그 밖에도 원하는 문서 레벨 수준의 메타데이터를 이 속성의 값, 즉 메타데이터의 이름으로 지정할 수 있으며, content 속성으로 그 메타데이터의 값으로 지정할 수 있습니다.

위 예제에서 name="description"은 해당 메타데이터가 웹 페이지의 설명을 나타내는 것임을 나타내며, content 속성은 실제 설명 내용을 지정합니다.

name 속성은 다양한 목적을 가진 표준 메타데이터 이름을 사용할 수 있습니다. 예를 들어, 검색 엔진 최적화를 위해 description, keywords와 같은 메타데이터를 지정할 수 있습니다.

name 속성은 웹 페이지의 메타데이터를 정의하는 데 중요한 역할을 하며, 검색 엔진이나 소셜 미디어와 같은 플랫폼에서 페이지를 인식하고 해석하는 데 도움이 됩니다.

`itemprop`

이 속성은 문서 레벨 수준이 아닌 콘텐츠 아이템 수준의 "사용자 정의 메타데이터"를 제공할 때 사용합니다. 이 속성의 값은 "사용자 정의 메타데이터의 값"이 됩니다.
HTML 요소가 특정 속성을 가지는 경우에 주로 사용되며, 마크업된 콘텐츠의 의미론적 정보(검색 엔진 등에서 활용할 수 있도록 구조화된)를 제공하기 위한 "사용자 정의 메타데이터"로 사용되는 경우가 많습니다.

일반적으로 itemprop 속성은 다음과 같이 사용됩니다.

HTML

<div itemscope itemtype="http://schema.org/Person">
    <p>제 이름은 <span itemprop="name">홍길동</span>입니다.</p>
    <p>나이는 <span itemprop="age">30</span>살입니다.</p>
</div>

위 예제에서 itemprop="name"은 해당 요소가 사람의 이름을 나타내는 것을 나타내며, itemprop="age"는 해당 요소가 나이를 나타내는 것을 나타냅니다. 이러한 마크업은 구조화된 데이터로 제공되어 검색 엔진이 이해하고 콘텐츠를 표시하는 데 도움이 됩니다.

itemprop 속성은 주로 Schema.org와 같은 구조화된 데이터 표준을 따르는 경우에 사용됩니다. 이를 통해 웹 페이지가 검색 결과에 더 잘 나타날 수 있고, 검색 엔진에서 더욱 풍부한 정보를 제공할 수 있습니다. 자세한 내용은 Getting started with schema.org using Microdata를 참조하세요.

예제

다음의 예제를 통해서 <meta> 태그의 사용 방법을 확인해 보세요.

HTML

<head>
    <meta charset="utf-8">
    <title>메타 태그의 사용방법</title>
    <meta name="description" content="메타 태그의 사용방법에 대해 알아보겠습니다.">
    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
</head>

위 예제처럼 문서에는 여러 개의 <meta> 태그를 사용할 수 있습니다.

그 밖의 `<meta>` 태그의 메타데이터와 관련된 속성

소셜 미디어 공유 미리보기 설정을 위해서는 오픈 그래프 프로토콜(Open Graph protocol)을 사용합니다. 웹 페이지가 Facebook이나 X(옛 트위터) 등의 소셜 미디어 플랫폼에서 공유될 때 링크와 함께 미리보기 이미지, 제목, 간단한 설명이 함께 표시되는 것을 볼 수 있습니다.

이것은 HTML의 <head> 태그 내에 삽입된 오픈 그래프 프로토콜에서 제시하는 메타데이터를 소셜 미디어 플랫폼에서 올바르게 인식하고 활용할 수 있도록 하기 때문입니다.

메타데이터는 <meta> 태그를 사용하며 property="og:와 property="description: 속성을 사용해서 정보를 정의합니다.

HTML Facebook에 공유되는 Youtube 페이지 메타데이터 사용 예시

<head>
    <title>Facebook에 공유되는 Youtube 페이지 메타데이터</title>
    ...
    <meta property="og:url" content="https://www.youtube.com">
    <meta property="og:title" content="YouTube">
    <meta property="og:type" content="website">
    <meta property="og:description" content="Enjoy the videos and music you love, upload original content, and share it all with friends, family, and the world on YouTube.">
    <meta property="og:image" content="https://www.youtube.com/img/desktop/yt_1200.png">
    ...
</head>

오픈 그래프 프로토콜(Open Graph protocol)에 관한 주제를 참고하세요.