표준 메타데이터 이름

<meta> 요소는 문서의 메타데이터를 키-값 쌍의 형태로 제공합니다. name 특성은 메타데이터의 이름을, content 특성은 메타데이터의 값을 나타냅니다.

HTML 명세에 정의된 표준 메타데이터 이름

다음은 HTML 명세가 정의하는 표준 메타데이터의 이름 목록입니다.

application-name

웹 페이지에서 구동 중인 애플리케이션의 이름입니다.

브라우저는 애플리케이션을 식별할 때 이 값을 사용할 수 있습니다. application-name은 <title>과는 다른데, <title>의 경우 보통 애플리케이션 이름을 포함하긴 하지만 문서의 이름과 상태처럼 다른 정보도 담을 수 있기 때문입니다.

단순한 웹 페이지는 application-name을 정의하지 말아야 합니다.

author

문서 저자의 이름입니다.

color-scheme

문서가 지원하는 한 개 이상의 색 조합을 지정합니다. 브라우저는 이 메타데이터와 사용자의 브라우저 또는 장치 설정에 따라서 배경과 전경색, 양식 컨트롤과 스크롤바 등 문서와 UI에서 사용할 다양한 색을 결정합니다. <meta name="color-scheme">의 주 목적은 라이트와 다크 테마 호환성 및 선호 순서를 나타내는 것입니다. 사용 가능한 content 특성의 값은 다음과 같습니다.

normal: 문서가 별도의 색 조합을 인지하지 못하므로 기본 팔레트로 렌더링해야 함을 의미합니다.
[light | dark]+: 문서가 지원하는 한 개 이상의 색 조합입니다. 같은 색 조합을 여러 번 지정해도 한 번 지정한 것과 다르지 않습니다. 두 개 이상의 색 조합을 지정할 경우, 문서가 첫 번째 색 조합을 선호하긴 하지만 사용자 설정에 따라 그 이후 조합도 지원한다는 의미입니다.
only light: 문서가 라이트 모드, 즉 밝은 배경색과 어두운 전경색만 지원한다는 의미입니다. 반대로 only dark는 명세에 따라 유효하지 않습니다. 다크 모드를 완전히 지원하지 않는 문서가 only dark를 지정하게 되면 콘텐츠를 읽을 수 없기 때문입니다. 모든 주요 브라우저는 이 값을 기본 값으로 사용합니다.

예를 들어, 문서가 다크 모드를 선호하지만 라이트 모드도 지원한다는 것을 나타내려면…

<meta name="color-scheme" content="dark light">

color-scheme 메타데이터는 CSS color-scheme 속성이 요소 단위로 지원/선호 색 조합을 지정하듯, 문서 단위의 지원/선호 색 조합을 지정합니다. CSS prefers-color-scheme 미디어 기능을 사용하면 현재 색 조합에 따라 다른 스타일을 적용할 수 있습니다.

description

페이지의 내용을 간결하고 명확하게 요약한 텍스트입니다. Firefox와 Opera를 포함한 일부 브라우저에서는 이 메타데이터를 즐겨찾기 페이지의 기본 설명으로 사용합니다.

generator

이 페이지를 생성한 소프트웨어의 식별자입니다.

keywords

페이지의 내용과 관련된 키워드의 쉼표 구분 리스트입니다.

referrer

이 문서에서 전송하는 요청의 HTTP Referer 헤더를 제어합니다.

`<meta name="referrer">`의 `content` 특성 값과 동작
값	설명
`no-referrer`	`Referer` 헤더를 전송하지 않습니다.
`origin`	문서의 출처를 전송합니다.
`no-referrer-when-downgrade`	기본 동작입니다. 목적지가 현재 페이지만큼 안전한 경우 (HTTP(S) → HTTPS) 전체 URL을 전송합니다. 그 외에는 (HTTPS → HTTP) 리퍼러를 전송하지 않습니다.
`origin-when-cross-origin`	동일 출처로 요청할 땐 전체 URL(매개변수 제외)을 전송합니다. 다른 출처로 요청할 땐 출처만 전송합니다.
`same-origin`	동일 출처로 요청할 땐 전체 URL(매개변수 제외)을 전송합니다. 다른 출처로 요청할 땐 리퍼러를 전송하지 않습니다.
`strict-origin`	목적지가 현재 페이지만큼 안전한 경우 (HTTP(S) → HTTPS) 출처를 전송합니다. 그 외에는 (HTTPS → HTTP) 리퍼러를 전송하지 않습니다.
`strict-origin-when-cross-origin`	동일 출처로 요청할 땐 전체 URL(매개변수 제외)을 전송합니다. 목적지가 현재 페이지만큼 안전한 경우 (HTTP(S) → HTTPS) 출처를 전송합니다. 그 외에는 (HTTPS → HTTP) 리퍼러를 전송하지 않습니다.
`unsafe-URL`	모든 요청에 전체 URL(매개변수 제외)을 전송합니다.

<meta name="referrer">를 동적으로 삽입(document.write(), appendChild() 등)하게 되면 리퍼러 동작이 불확실해집니다.
서로 충돌되는 리퍼러 정책 다수를 정의한 경우 no-referrer로 취급합니다.

theme-color

사용자 에이전트가 페이지 구성 요소나 자신의 UI를 표시할 때 사용해야 할 추천 색상을 정의합니다. content 특성의 값은 유효한 CSS <color>여야 합니다.

다른 명세에 정의된 표준 메타데이터 이름

다음은 CSS Device Adaptation 명세가 정의하는 메타데이터의 이름입니다.

viewport

뷰포트의 초기 사이즈에 대한 힌트를 제공합니다.

`<meta name="viewport">`의 `content` 특성 값과 동작
값	사용 가능한 하위 값	설명
`width`	양의 정수 또는 `device-width`	웹 사이트를 렌더링하고자 하는 뷰포트의 픽셀 너비를 정의합니다.
`height`	양의 정수 또는 `device-height`	웹 사이트를 렌더링하고자 하는 뷰포트의 픽셀 높이를 정의합니다.
`initial-scale`	`0.0`과 `10.0` 사이의 수	장치의 너비(세로 뷰에서는 `device-width`, 가로 뷰에서는 `device-height`)와 뷰포트 크기 사이의 비율을 정의합니다.
`maximum-scale`	`0.0`과 `10.0` 사이의 수	최대 확대 배율을 정의합니다. `minimum-scale` 이상의 값이어야 하며, 미만일 때의 동작은 정의되지 않았습니다. 브라우저 설정에 따라 이 값은 무시될 수 있으며, iOS 10+에서는 기본 설정에서 무시합니다.
`minimum-scale`	`0.0`과 `10.0` 사이의 수	최대 확대 배율을 정의합니다. `maximum-scale` 이하의 값이어야 하며, 초과할 때의 동작은 정의되지 않았습니다. 브라우저 설정에 따라 이 값은 무시될 수 있으며, iOS 10+에서는 기본 설정에서 무시합니다.
`user-scalable`	`yes` 또는 `no`	`no`를 지정할 경우 사용자가 페이지를 확대할 수 없습니다. 기본 값은 `yes`입니다. 브라우저 설정에 따라 이 값은 무시될 수 있으며, iOS 10+에서는 기본 설정에서 무시합니다.
`viewport-fit`	`auto`, `contain`, `cover`	`auto`일 경우 초기 레이아웃 뷰포트에 영향을 주지 않으며 전체 웹 페이지가 보입니다. `contain`일 경우, 페이지 내에서 가장 큰 직사각형이 화면에 온전히 보일 수 있도록 뷰포트 크기를 조절합니다. `cover`일 경우, 뷰포트 크기를 조절해 장치 화면을 가득 채웁니다. `cover`를 사용할 땐 안전 영역 인셋 환경 변수를 사용해서 콘텐츠가 화면 밖으로 나가지 않도록 조절하는 걸 추천합니다.

user-scalable을 no로 설정해 확대 기능을 비활성화하면 저시력 사용자가 페이지 콘텐츠를 읽고 이해하기 힘들어집니다.

기타 메타데이터 이름

WHATWG 위키의 MetaExtensions 페이지에는 아직 명세에 포함되지 않은 많은 수의 비표준 메타데이터 이름이 나열돼있습니다. 비록 표준은 아니지만, 아래 목록을 포함해서 일부 메타데이터 이름은 이미 널리 쓰이고 있습니다.

creator

문서를 생성한 사람이나 단체 등의 이름입니다. 여러 이름을 나열해야 하면 그 수 만큼의 <meta> 요소를 사용해야 합니다.

googlebot

robots 메타데이터의 별칭으로, Googlebot만 사용합니다. (Google의 색인 크롤러)

publisher

문서 발행자의 이름입니다.

robots

협조적인 크롤러들이 이 페이지 내에서 따라야 할 동작을 정의합니다. 쉼표로 구분하는 리스트로, 사용 가능한 값은 다음과 같습니다.

값	설명	사용하는 검색 엔진
`index`	크롤러가 페이지를 색인할 수 있습니다. (기본 값)	모두
`noindex`	크롤러에게 패이지를 색인하지 않도록 요청합니다.	모두
`follow`	크롤러가 페이지 내의 링크를 따라갈 수 있습니다. (기본 값)	모두
`nofollow`	크롤러에게 페이지 내의 링크를 따라가지 말라고 요청합니다.	모두
`all`	`index, follow`와 같습니다.	Google
`none`	`noindex, nofollow`와 같습니다.	Google
`noarchive`	검색 엔진에게 페이지 콘텐츠를 캐시에 추가하지 않도록 요청합니다.	Google, Bing
`nosnippet`	검색 결과에서 페이지의 설명을 보여주지 않습니다.	Google, Bing
`noimageindex`	크롤러에게 페이지의 이미지를 색인하지 않도록 요청합니다.	Google
`nocache`	`noarchive`와 같습니다.	Bing

협조적인 크롤러만 위의 규칙을 준수합니다. 이메일 주소 수집기처럼 악의적인 크롤러를 막을 수 있으리라 기대하지 마세요.
크롤러가 메타데이터를 읽으려면 페이지에 접근을 한 번은 해야 합니다. 대역폭을 절약하려면 robots.txt 파일을 사용하세요.
페이지를 검색 결과에서 제거하는 방법으로 noindex를 사용할 수는 있지만, 크롤러가 페이지를 방문해서 메타데이터가 추가된 것을 먼저 확인해야 합니다. robots.txt 파일이 크롤러의 재방문을 막고 있지는 않은지 확인하세요.
index와 noindex, follow와 nofollow 등 일부 값은 서로 함께 사용할 수 없습니다. 동시에 지정한 경우의 크롤러 동작은 정의되지 않았으므로 언제든지 달라질 수 있습니다.
Google과 Bing을 포함한 크롤러는 위 값을 HTTP X-Robots-Tag 헤더로 응답해도 인식합니다. 그러므로 이미지 등 HTML이 아닌 문서에도 같은 규칙을 적용할 수 있습니다.

명세

브라우저 호환성

MDN `browser-compat-data`
	데스크톱			모바일
	데스크톱			iOS	Android
	Safari	Chrome	Firefox	Safari	Chrome	Firefox	Samsung Internet
`name`
`color-scheme`
`referrer`
`theme-color`