diff options
Diffstat (limited to 'files/ko/web/html/element/meta')
| -rw-r--r-- | files/ko/web/html/element/meta/index.html | 151 | ||||
| -rw-r--r-- | files/ko/web/html/element/meta/name/index.html | 312 |
2 files changed, 463 insertions, 0 deletions
diff --git a/files/ko/web/html/element/meta/index.html b/files/ko/web/html/element/meta/index.html new file mode 100644 index 0000000000..3454e4d866 --- /dev/null +++ b/files/ko/web/html/element/meta/index.html @@ -0,0 +1,151 @@ +--- +title: '<meta>: 문서 레벨 메타데이터 요소' +slug: Web/HTML/Element/meta +tags: + - Element + - HTML + - HTML document metadata + - Reference + - Web + - metadata +translation_of: Web/HTML/Element/meta +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML <code><meta></code> 요소</strong>는 {{HTMLElement("base")}}, {{HTMLElement("link")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}}, {{HTMLElement("title")}}과 같은 다른 메타관련 요소로 나타낼 수 없는 {{glossary("Metadata", "메타데이터")}}를 나타냅니다.</p> + +<table class="properties"> + <tbody> + <tr> + <th><a href="/ko/docs/Web/Guide/HTML/%EC%BB%A8%ED%85%90%ED%8A%B8_%EC%B9%B4%ED%85%8C%EA%B3%A0%EB%A6%AC">콘텐츠 카테고리</a></th> + <td>메타데이터 콘텐츠. <code><a href="/ko/docs/Web/HTML/Global_attributes/itemprop">itemprop</a></code>이 존재하면 <a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#플로우_콘텐츠">플로우 콘텐츠</a> 및 <a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#구문_콘텐츠">구문 콘텐츠</a>.</td> + </tr> + <tr> + <th>가능한 콘텐츠</th> + <td>없음. {{Glossary("empty element", "빈 요소")}}입니다.</td> + </tr> + <tr> + <th>태그 생략</th> + <td>빈 요소이므로 여는 태그는 존재해야 하고 닫는 태그는 존재해선 안됩니다.</td> + </tr> + <tr> + <th>가능한 부모 요소</th> + <td><code><meta charset></code>, <code><meta http-equiv></code>인 경우 {{htmlelement("head")}} 요소. {{htmlattrxref("http-equiv", "meta")}}가 인코딩 선언이 아닌 경우 <code><head></code> 내의 {{htmlelement("noscript")}} 요소도 가능합니다.</td> + </tr> + <tr> + <th scope="row">암시적 ARIA 역할</th> + <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">대응하는 역할 없음</a></td> + </tr> + <tr> + <th scope="row">가능한 ARIA 역할</th> + <td>없음</td> + </tr> + <tr> + <th>DOM 인터페이스</th> + <td>{{domxref("HTMLMetaElement")}}</td> + </tr> + </tbody> +</table> + +<p><code>meta</code> 요소가 제공하는 메타데이터는 다음 네 유형 중 하나입니다.</p> + +<ul> + <li>{{htmlattrxref("name", "meta")}} 특성을 지정하면 전체 페이지에 적용되는 "문서 레벨 메타데이터"를 제공합니다.</li> + <li>{{htmlattrxref("http-equiv", "meta")}} 특성을 지정하면 유사한 이름의 HTTP 헤더가 제공하는 정보와 동일한 "프래그마 지시문"이 됩니다.</li> + <li>{{htmlattrxref("charset", "meta")}} 특성을 지정하면 문서 인코딩에 사용한 문자 인코딩을 나타내는 "문자 집합 선언"이 됩니다.</li> + <li>{{htmlattrxref("itemprop")}} 특성을 지정하면 "사용자 정의 메타데이터"를 제공합니다.</li> +</ul> + +<h2 id="특성">특성</h2> + +<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes" title="HTML/Global attributes">전역 특성</a>을 포함합니다.</p> + +<div class="note"> +<p><strong>참고:</strong> {{htmlattrxref("name", "meta")}} 특성은 <code><meta></code> 요소에 대해 특정한 의미를 가집니다. 하나의 <code><meta></code> 요소에서, {{htmlattrxref("itemprop", "meta")}} 특성을 {{htmlattrxref("name", "meta")}}, {{htmlattrxref("http-equiv", "meta")}} 또는 {{htmlattrxref("charset", "meta")}} 특성과 함께 설정할 수 없습니다.</p> +</div> + +<dl> + <dt>{{htmlattrdef("charset")}}</dt> + <dd>페이지의 문자 인코딩을 선언합니다. 이 특성이 존재할 경우, 그 값은 반드시 문자열 "<code>utf-8</code>"의 대소문자 구분 없는 {{glossary("ASCII")}} 표현이어야 합니다.</dd> + <dt>{{htmlattrdef("content")}}</dt> + <dd>{{htmlattrxref("http-equiv", "meta")}} 또는 {{htmlattrxref("name", "meta")}} 특성의 값을 담습니다.</dd> + <dt>{{htmlattrdef("http-equiv")}}</dt> + <dd> + <p>프래그마 지시문을 정의합니다. 특성의 이름(<code><strong>http-equiv</strong>(alent)</code>)에서 알 수 있듯이, 가능한 값은 특정 HTTP 헤더입니다.</p> + + <ul> + <li><code>content-security-policy</code> + + <p>현재 페이지의 <a href="/ko/docs/Web/HTTP/Headers/Content-Security-Policy">콘텐츠 정책</a>을 정의할 수 있습니다. 대부분의 콘텐츠 정책은 허용하는 서버 출처와 스크립트 엔드포인트를 지정해 사이트 간 스크립트 공격 방어에 도움을 줍니다.</p> + </li> + <li><code>content-type</code> + <p>지정할 경우, <code>content</code> 특성의 값은 반드시 "<code>text/html; charset=utf-8</code>"이어야 합니다. <strong>참고:</strong> <code>text/html</code> <a href="/ko/docs/Web/HTTP/Basics_of_HTTP/MIME_types">MIME 유형</a>으로 제공하는 문서에서만 사용할 수 있으며, XML MIME 유형의 문서에서는 사용할 수 없습니다.</p> + </li> + <li><code>default-style</code> + <p>기본 <a href="/ko/docs/Web/CSS">CSS 스타일 시트</a> 세트의 이름을 지정합니다.</p> + </li> + <li><code>x-ua-compatible</code> + <p>지정할 경우, <code>content</code> 특성의 값은 반드시 "<code>IE=edge</code>"여야 합니다. 사용자 에이전트는 이 프래그마를 무시해야 합니다.</p> + </li> + <li><code>refresh</code> + <div>다음을 지정합니다.</div> + + <ul> + <li>{{htmlattrxref("content", "meta")}} 특성에 양의 정수 값을 설정한 경우, 페이지를 다시 불러오기 전까지의 초 단위 대기시간.</li> + <li>{{htmlattrxref("content", "meta")}} 특성이 양의 정수 값을 가지고 그 뒤를 문자열 <code>;url=</code>과 유효한 URL이 뒤따른다면, 해당 URL로 이동하기 전까지의 초 단위 대기시간.</li> + </ul> + + <h5 id="접근성_고려사항">접근성 고려사항</h5> + + <div><code>refresh</code> 값을 지정한 페이지의 경우 새로고침 사이 간격이 너무 짧을 우려가 있습니다. 스크린 리더 등의 보조 기술로 탐색하는 사용자는 자동 새로고침 이전에 페이지의 내용을 읽고 이해하지 못할 수 있습니다. 또한 저시력 사용자에게 있어, 갑작스럽고 사전 안내도 없는 콘텐츠 업데이트는 어지러울 수 있습니다.</div> + + <ul> + <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Operable#Guideline_2.2_—_Enough_Time_Provide_users_enough_time_to_read_and_use_content">MDN Understanding WCAG, Guideline 2.1 explanations</a></li> + <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Understandable#Guideline_3.2_—_Predictable_Make_Web_pages_appear_and_operate_in_predictable_ways">MDN Understanding WCAG, Guideline 3.1 explanations</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/time-limits-required-behaviors.html">Understanding Success Criterion 2.2.1 | W3C Understanding WCAG 2.0</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/time-limits-postponed.html">Understanding Success Criterion 2.2.4 | W3C Understanding WCAG 2.0</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/consistent-behavior-no-extreme-changes-context.html">Understanding Success Criterion 3.2.5 | W3C Understanding WCAG 2.0</a></li> + </ul> + </li> + </ul> + </dd> + <dt>{{htmlattrdef("name")}}</dt> + <dd> + <p><code>name</code>과 <code>content</code> 특성을 함께 사용하면 문서의 메타데이터를 이름-값 쌍으로 제공할 수 있습니다. <code>name</code>은 이름, <code>content</code>는 값을 담당합니다.</p> + + <p><a href="/ko/docs/Web/HTML/Element/meta/name">표준 메타데이터 이름</a> 문서에서 HTML 명세에 포함된 표준 메타데이터 목록을 살펴보세요.</p> + </dd> +</dl> + +<h2 id="예제">예제</h2> + +<pre class="brush: html notranslate"><meta charset="utf-8"> + +<!-- 3초 후 리다이렉트 --> +<meta http-equiv="refresh" content="3;url=https://www.mozilla.org"> +</pre> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'semantics.html#the-meta-element', '<meta>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Added <code>itemprop</code> attribute</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<div>{{Compat("html.elements.meta")}}</div> diff --git a/files/ko/web/html/element/meta/name/index.html b/files/ko/web/html/element/meta/name/index.html new file mode 100644 index 0000000000..76333202b1 --- /dev/null +++ b/files/ko/web/html/element/meta/name/index.html @@ -0,0 +1,312 @@ +--- +title: 표준 메타데이터 이름 +slug: Web/HTML/Element/meta/name +tags: + - Attribute + - HTML + - HTML document metadata + - Reference + - metadata + - 메타데이터 +translation_of: Web/HTML/Element/meta/name +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary">{{htmlelement("meta")}} 요소는 {{htmlattrxref("name", "meta")}} 특성을 메타데이터 이름으로, {{htmlattrxref("content", "meta")}} 특성을 값으로 하여 문서 메타데이터를 이름-값 쌍의 형태로 제공할 때 사용할 수 있습니다.</span></p> + +<h3 id="HTML_명세가_정의하는_표준_메타데이터_이름">HTML 명세가 정의하는 표준 메타데이터 이름</h3> + +<p>HTML 명세는 다음과 같은 표준 메타데이터 이름을 정의하고 있습니다.</p> + +<ul> + <li> + <p><code>application-name</code>: 웹 페이지에서 구동 중인 애플리케이션의 이름.</p> + + <div class="note"><strong>참고:</strong> + + <ul> + <li>브라우저가 이 값을 사용해 애플리케이션을 식별할 수 있습니다. {{htmlelement("title")}} 요소 역시 보통 애플리케이션 이름을 포함하지만, <code>application-name</code>과는 달리 문서 이름이나 상태 등 다른 정보도 존재할 수 있다는 점에서 차이가 있습니다.</li> + <li>단순한 웹 페이지에서는 <code>application-name</code>을 지정하지 말아야 합니다.</li> + </ul> + </div> + </li> + <li><code>author</code>: 문서 저작자.</li> + <li><code>description</code>: 페이지에 대한 짧고 정확한 요약. Firefox, Opera 등 여러 브라우저는 즐겨찾기 페이지의 기본 설명 값으로 <code>description</code> 메타데이터를 사용합니다.</li> + <li><code>generator</code>: 페이지를 생성한 소프트웨어의 식별자.</li> + <li><code>keywords</code>: 페이지의 콘텐츠와 관련된, 쉼표로 구분한 키워드 목록.</li> + <li><code>referrer</code>: 문서에서 시작하는 요청의 HTTP {{httpheader("Referer")}} 헤더를 아래 표와 같이 통제합니다. + <table class="standard-table"> + <caption><code><meta name="referrer"></code> 특성에 대한 <code>content</code> 특성의 값</caption> + <tbody> + <tr> + <td><code>no-referrer</code></td> + <td>HTTP {{httpheader("Referer")}} 헤더를 전송하지 않습니다.</td> + </tr> + <tr> + <td><code>origin</code></td> + <td>문서의 {{glossary("origin", "출처")}}를 전송합니다.</td> + </tr> + <tr> + <td><code>no-referrer-when-downgrade</code></td> + <td>목적지가 현재 문서와 동일하거나 더 높은(HTTP(S)→HTTPS) 보안 수준을 가진 경우 전체 URL을 전송하고, 더 취약(HTTPS→HTTP)한 경우 전송하지 않습니다. 기본 동작 방식입니다.</td> + </tr> + <tr> + <td><code>origin-when-cross-origin</code></td> + <td>동일 출처 요청에는 매개변수를 제거한 전체 URL을 전송합니다. 교차 출처 요청에는 출처만 전송합니다.</td> + </tr> + <tr> + <td><code>same-origin</code></td> + <td>동일 출처 요청에는 매개변수를 제거한 전체 URL을 전송합니다. 교차 출처 요청에는 아무 레퍼러 정보도 보내지 않습니다.</td> + </tr> + <tr> + <td><code>strict-origin</code></td> + <td>목적지가 현재 문서와 동일하거나 더 높은(HTTP(S)→HTTPS) 보안 수준을 가진 경우 출처를 전송하고, 더 취약(HTTPS→HTTP)한 경우 전송하지 않습니다.</td> + </tr> + <tr> + <td><code>strict-origin-when-cross-origin</code></td> + <td>동일 출처 요청에는 매개변수를 제거한 전체 URL을 전송합니다. 목적지가 현재 문서와 동일하거나 더 높은 보안 수준(HTTP(S)→HTTPS)을 가진 경우 자신의 출처를 전송합니다. 그 외의 경우 아무 레퍼러 정보도 보내지 않습니다.</td> + </tr> + <tr> + <td><code>unsafe-URL</code></td> + <td>동일 출처와 교차 출처 요청 모두에 대해서 전체 URL을 전송합니다.</td> + </tr> + </tbody> + </table> + + <div class="note"><strong>참고:</strong> + + <ul> + <li><code><meta name="referrer"></code>의 값을 {{domxref("Document.write", "document.write()")}} 또는 {{domxref("Node.appendChild", "appendChild()")}}를 사용해 동적으로 삽입할 경우 레퍼러 동작을 예측할 수 없습니다.</li> + <li>여러 정책이 서로 충돌할 경우에는 <code>no-referrer</code> 정책을 사용합니다.</li> + </ul> + </div> + </li> + <li><code><a href="/ko/docs/Web/HTML/Element/meta/name/theme-color">theme-color</a></code>: 사용자 에이전트가 페이지 혹은 주위의 사용자 인터페이스를 표시할 때 사용해야 할 색상에 대한 힌트. <code>content</code> 특성은 유효한 CSS {{cssxref("<color>")}} 색상을 포함해야 합니다.</li> +</ul> + +<h3 id="다른_명세가_정의하는_표준_메타데이터_이름">다른 명세가 정의하는 표준 메타데이터 이름</h3> + +<p>CSS Color Adjustment 명세는 다음과 같은 메타데이터 이름을 정의합니다.</p> + +<ul> + <li> + <p><code>color-scheme</code>: 문서와 호환되는 하나 이상의 색채 조합.</p> + + <p>브라우저는 이 정보에 더해 자신과 장치의 사용자 설정을 함께 사용해 배경, 전경, 양식 컨트롤, 스크롤 바 등 대부분의 색상을 결정합니다. <code><meta name="color-scheme"></code>의 주 용도는 문서의 "다크 모드"와 "라이트 모드"중 호환 가능한 조합 및 둘 중 선호하는 쪽을 나타내는 것입니다.</p> + + <p><code>color-scheme</code>과 사용 가능한 {{htmlattrxref("content", "meta")}} 특성의 값은 다음과 같습니다.</p> + + <dl> + <dt><code>normal</code></dt> + <dd>문서가 특별한 색채 조합을 알지 못합니다. 렌더링 시 기본 색상 팔레트를 사용해야 합니다.</dd> + <dt>[<code>light</code> | <code>dark</code>]+</dt> + <dd>문서와 호환되는 하나 이상의 색채 조합. 동일한 색채 조합을 여러 번 지정하더라도 한 번 지정한 것과 다르지 않습니다. 여러 색채 조합을 명시하는 경우 문서는 맨 앞 항목을 선호하지만, 사용자가 원할 경우 다른 조합도 사용할 수 있음을 나타냅니다.</dd> + <dt><code>only light</code></dt> + <dd>문서가 오직 라이트 모드, 즉 밝은 배경과 어두운 전경색만 지원함을 나타냅니다. 명세에 따라 <code>only dark</code>는 유효하지 않습니다. 완전히 호환되지 않음에도 불구하고 문서를 다크 모드로만 렌더링 할 경우 콘텐츠를 읽을 수 없기 때문입니다. 지정하지 않은 경우, 모든 주요 브라우저는 라이트 모드를 기본값으로 사용합니다.</dd> + </dl> + + <p>예를 들어, 문서가 다크 모드를 선호하나 라이트 모드도 지원 가능하다는 것을 알리려면 다음과 같이 작성하세요.</p> + + <pre class="brush: html notranslate"><meta name="color-scheme" content="dark light"></pre> + + <p><code>name="color-scheme"</code>은 문서 전체의 선호 및 가능한 색채 조합을 지정한다면, CSS {{cssxref("color-scheme")}} 속성은 개별 요소 단위로 지정합니다. CSS {{cssxref("@media/prefers-color-scheme", "prefers-color-scheme")}} 미디어 기능을 사용하면 스타일이 현재 색채 조합에 적응하도록 작성할 수도 있습니다.</p> + </li> +</ul> + +<p>CSS Device Adaptation 명세는 다음과 같은 메타데이터 이름을 정의합니다.</p> + +<ul> + <li> + <p><code>viewport</code>: {{glossary("viewport", "뷰포트")}}의 초기 사이즈에 대한 힌트. 모바일 장치에서만 사용합니다.</p> + + <table class="fullwidth-table"> + <caption><code><meta name="viewport"></code>의 값</caption> + <thead> + <tr> + <th scope="col">값</th> + <th scope="col">가능한 하위 값</th> + <th scope="col">설명</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>width</code></td> + <td>양의 정수 또는 <code>device-width</code></td> + <td>웹 사이트를 렌더링 하고자 하는 뷰포트 너비를 정의합니다.</td> + </tr> + <tr> + <td><code>height</code></td> + <td>양의 정수 또는 <code>device-height</code></td> + <td>웹 사이트를 렌더링 하고자 하는 뷰포트 높이를 정의합니다.</td> + </tr> + <tr> + <td><code>initial-scale</code></td> + <td><code>0.0</code>과 <code>10.0</code> 사이의 수</td> + <td>장치 너비(세로 모드에서는 <code>device-width</code>, 가로 모드에서는 <code>device-height</code>)와 뷰포트 너비의 비율을 정의합니다.</td> + </tr> + <tr> + <td><code>maximum-scale</code></td> + <td><code>0.0</code>과 <code>10.0</code> 사이의 수</td> + <td>가능한 최대 확대 비율을 정의합니다. <code>minimum-scale</code> 이상이어야 하며, 미만으로 지정한 경우의 동작은 정의되지 않았습니다. 브라우저 설정에 따라 무시할 수 있고, iOS10 이상은 기본값으로 무시합니다.</td> + </tr> + <tr> + <td><code>minimum-scale</code></td> + <td><code>0.0</code>과 <code>10.0</code> 사이의 수</td> + <td>가능한 최소 확대 비율을 정의합니다. <code>maximum-scale</code> 이하여야 하며, 초과한 값을 지정한 경우의 동작은 정의되지 않았습니다. 브라우저 설정에 따라 무시할 수 있고, iOS10 이상은 기본값으로 무시합니다.</td> + </tr> + <tr> + <td><code>user-scalable</code></td> + <td><code>yes</code> 또는 <code>no</code></td> + <td><code>no</code>인 경우 사용자가 웹 페이지를 확대할 수 없습니다. 기본값은 <code>yes</code>입니다. 브라우저 설정에 따라 무시할 수 있고, iOS10 이상은 기본값으로 무시합니다.</td> + </tr> + <tr> + <td><code>viewport-fit</code></td> + <td><code>auto</code>, <code>contain</code>, <code>cover</code></td> + <td> + <p><code>auto</code> 값은 초기 뷰포트 레이아웃에 영향을 주지 않으며, 전체 웹 페이지를 볼 수 있습니다.</p> + + <p><code>contain</code> 값은 디스플레이 내에 맞출 수 있는 가장 큰 사각형에 맞춰 뷰포트의 크기를 조절합니다.</p> + + <p><code>cover</code> 값은 뷰포트의 크기를 조절해 디스플레이 전체를 채웁니다. <a href="/ko/docs/Web/CSS/env">안전 영역</a> 환경 변수를 사용해 중요한 콘텐츠가 화면 밖에 놓이는 불상사가 없도록 하는 것이 좋습니다.</p> + </td> + </tr> + </tbody> + </table> + + <div class="note"><strong>참고:</strong> + + <ul> + <li>비록 표준은 아니지만, <code>viewport</code>의 사실상 표준적인 위치로 인해 대부분의 모바일 브라우저가 선언을 준수합니다.</li> + <li>장치와 브라우저마다 기본값이 다를 수 있습니다.</li> + </ul> + </div> + + <h5 id="Accessibility_concerns_with_viewport_scaling">Accessibility concerns with viewport scaling</h5> + + <div><code>user-scalable</code>을 <code>no</code>로 지정해 확대 기능을 비활성화하면 저시력 사용자가 페이지의 내용을 읽고 이해하는 것을 방해합니다.</div> + + <ul> + <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN Understanding WCAG, Guideline 1.4 explanations</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html">Understanding Success Criterion 1.4.4 | W3C Understanding WCAG 2.0</a></li> + </ul> + + <h5 id="같이_보기">같이 보기</h5> + + <p>CSS {{cssxref("@viewport")}} @-규칙</p> + </li> +</ul> + +<h3 id="다른_메타데이터_이름">다른 메타데이터 이름</h3> + +<p><a class="external" href="https://wiki.whatwg.org/wiki/MetaExtensions">WHATWG Wiki MetaExtensions 페이지</a>는 거대한 수의 비표준 메타데이터 목록을 포함합니다. 그러나 다음 메타데이터 이름을 포함한 일부 항목은 실제로도 꽤 자주 사용하고 있습니다.</p> + +<ul> + <li><code>creator</code>: 단체, 협회 등 문서 저작자의 이름. 다수의 저작자가 존재할 경우 다수의 {{HTMLElement("meta")}} 요소를 사용해야 합니다.</li> + <li><code>googlebot</code>은 <code>robots</code>의 동의어로, Googlebot(Google의 색인 크롤러)만 준수합니다..</li> + <li><code>publisher</code>: 문서를 출판한 자의 이름.</li> + <li><code>robots</code>: 협조적인 크롤러, 또는 "로봇"의 동작을 지정합니다. 아래 표의 항목을 쉼표로 구분한 목록을 값으로 사용합니다 + <table class="standard-table"> + <caption><code><meta name="robots"></code>의 값</caption> + <thead> + <tr> + <th scope="col">값</th> + <th scope="col">설명</th> + <th scope="col">사용처</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>index</code></td> + <td>크롤러가 페이지를 색인할 수 있습니다. (기본값)</td> + <td>모두</td> + </tr> + <tr> + <td><code>noindex</code></td> + <td>크롤러가 페이지를 색인하지 않도록 요청합니다.</td> + <td>모두</td> + </tr> + <tr> + <td><code>follow</code></td> + <td>크롤러가 페이지 내의 링크를 따라갈 수 있습니다. (기본값)</td> + <td>모두</td> + </tr> + <tr> + <td><code>nofollow</code></td> + <td>크롤러가 페이지 내의 링크를 따라가지 않도록 요청합니다.</td> + <td>모두</td> + </tr> + <tr> + <td><code>all</code></td> + <td><code>index, follow</code>와 동일합니다.</td> + <td><a class="external" href="https://support.google.com/webmasters/answer/79812">Google</a></td> + </tr> + <tr> + <td><code>none</code></td> + <td><code>noindex, nofollow</code>와 동일합니다.</td> + <td><a class="external" href="https://support.google.com/webmasters/answer/79812">Google</a></td> + </tr> + <tr> + <td><code>noarchive</code></td> + <td>크롤러가 페이지를 캐시에 포함하지 않도록 요청합니다.</td> + <td><a class="external" href="https://developers.google.com/webmasters/control-crawl-index/docs/robots_meta_tag#valid-indexing--serving-directives">Google</a>, <a class="external" href="https://www.bing.com/webmaster/help/which-robots-metatags-does-bing-support-5198d240">Bing</a></td> + </tr> + <tr> + <td><code>nosnippet</code></td> + <td>검색 엔진 결과에 어떤 설명도 표시하지 않도록 지정합니다.</td> + <td><a class="external" href="https://developers.google.com/webmasters/control-crawl-index/docs/robots_meta_tag#valid-indexing--serving-directives">Google</a>, <a class="external" href="https://www.bing.com/webmaster/help/which-robots-metatags-does-bing-support-5198d240">Bing</a></td> + </tr> + <tr> + <td><code>noimageindex</code></td> + <td>크롤러가 페이지 이미지를 색인하지 않도록 요청합니다.</td> + <td><a class="external" href="https://developers.google.com/webmasters/control-crawl-index/docs/robots_meta_tag#valid-indexing--serving-directives">Google</a></td> + </tr> + <tr> + <td><code>nocache</code></td> + <td><code>noarchive</code>와 동일합니다.</td> + <td><a class="external" href="https://www.bing.com/webmaster/help/which-robots-metatags-does-bing-support-5198d240">Bing</a></td> + </tr> + </tbody> + </table> + + <div class="note"><strong>참고:</strong> + + <ul> + <li>협조적인 크롤러만 규칙을 존중합니다. 이메일 주소 수집기가 요청을 따를 것이라고 기대하지 마세요.</li> + <li>메타 태그의 규칙을 읽기 위해선 크롤러가 페이지에 접근을 하긴 해야 합니다. 대역폭을 아끼려면 {{glossary("robots.txt")}}를 사용하세요.</li> + <li>이미 등록된 페이지를 검색 결과에서 제거할 수단으로 <code>noindex</code>를 사용하는 것도 가능하지만, 수정 후 크롤러가 페이지에 재방문해야만 반영되므로 <code>robots.txt</code> 파일이 방문을 방지하고 있지는 않은지 확인하세요.</li> + <li><code>index</code>와 <code>noindex</code>, <code>follow</code>와 <code>nofollow</code>처럼 특정 값은 서로 배타적입니다. 그러나 같은 페이지에서 동시에 사용한 경우 크롤러의 행동은 정의되지 않았으며 둘 중 어느 것이라도 취할 수 있습니다.</li> + <li>Google과 Bing 등 일부 크롤러는 위의 값을 HTTP <code>X-Robot-Tags</code> 헤더에 추가해도 인식하므로, 이미지처럼 HTML이 아닌 문서에서도 동일한 설정을 적용할 수 있습니다.</li> + </ul> + </div> + </li> +</ul> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">명세</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', '#standard-metadata-names', 'standard metadata names')}}</td> + </tr> + <tr> + <td>{{SpecName('CSS Color Adjust', '#color-scheme-meta', 'the "color-scheme" metadata name')}}</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Device', '#viewport-meta', 'the "viewport" metadata name')}}</td> + </tr> + <tr> + <td>{{SpecName('Referrer Policy', '#referrer-policy-delivery-meta', 'the "referrer" metadata name')}}</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<div class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div> + +<p>{{Compat("html.elements.meta.name")}}</p> |