문서 메타데이터 요소들

메타 데이터 요소는 해당 페이지의 정보를 제공하며 <head>내부에 정의되는 요소이다.

<head>

  • 문서의 제목과 스타일시트, 스크립트 링크 또는 선언을 포함하는 문서의 일반적인 정보(메타데이터)를 제공한다.

  • 대부분 브라우저는 마크업에서 요소가 생략될 경우, 자동으로 요소를 생성하지만 일부는 그렇지 않다.

[자동으로 요소를 생성하지 않는 브라우저 환경]

  • Android <= 1.6

  • iPhone <= 3.1.3

  • Opera <= 9.27

  • Safari <= 3.2.1.

  • Nokia 90

<title>

  • 브라우저의 타이틀 바(Title Bar)나 페이지 탭에 보여지는 문서의 제목을 정의.

    텍스트만 포함할 수 있으며 포함된 태그들은 해석되지 않음.

<meta>

  • 다른 메타 요소들(<title>, <base>, <link>, <style>)로 나타낼 수 없는 메타 데이터를 정의할 때 사용한다.

메타 데이터의 종류

charset 속성이 설정된 경우

  • charset 선언. 즉, 웹페이지를 작성하는 일련의 형식에 사용 되는 문자 인코딩(charset)에 대한 설정.

  • 이 속성보다 요소의 lang 속성이 우선하여 적용됨.

    • 예를 들어 <div lang="fr"> 구문이 뒤에 마크업 되면 해당 텐츠는 프랑스어로 적용된다. 즉, 덮어쓰기 된다.

http-equiv 속성이 설정된 경우

  • pragma 지시어(Directive)로 일반적으로 웹서버가 제공하는 웹페이지가 어떻게 제공되어야 하는지에 대한 정보를 제공.

예시 

<!-- 문자 인코딩 -->
✤ HTML 5에서는 더 이상 아래와 같이 사용되길 권장하지 않음.
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />

이제는 아래와 같은 구문을 사용한다. 
<meta charset="UTF-8" />

✤ 3초 뒤에 url 값에 설정된 페이지로 이동하게 됨.
<meta http-equiv="refresh" content="3url=https://google.com" />

name 속성이 설정된 경우

문서 수준 메타 데이터의 이름을 정의하며, content 속성 값을 통해 설정.

<meta name="메타 데이터 이름" content="값" />

메타 데이터의 속성

1. charset

2. http-equiv

3. content

이 속성은 텍스트에 따라 http-equiv또는 name속성 과 연결된 값을 제공.

4. name

application name

  • 웹 페이지에서 실행중인 웹 애플리케이션 이름 정의.

  • 간단한 웹 페이지는 application-name 메타를 정의하면 안됨.

<meta name="application-name" content="LectureApp" />

간단한 웹 페이지란?

애플리케이션 기능이 없는 웹 페이지를 말한다.

참고 → Website와 Webapplication

application-name

이 값은 페이지가 나타내는 웹 애플리케이션의 이름을 제공하는 짧은 문자열 이어야 합니다. 페이지가 웹 애플리케이션이 아닌 경우 application-name 메타 데이터 이름을 사용하면 안됩니다. 애플리케이션에 사용된 언어를 lang 속성에 설정하면 애플리케이션 이름 번역을 제공 할 수 있습니다. 사용자가 웹 브라우저에서 "홈 화면에 추가"를 선택하면, 설정된 이름이 모바일 폰의 앱 아이콘 아래에 표시됩니다.

사용자 에이전트(예: 브라우저)는 application-name 값을 HTML 문서 title 값보다 우선하여 UI에 표시할 수 있습니다. title 값에는 특정 시점의 페이지 상태와 관련된 상태 메시지 등이 포함될 수 있기 때문입니다.

사용자 에이전트가 애플리케이션에 설정된 언어 정보를 알고리즘에 따라 분석해 처리하는 방식은 원문을 참고해 보세요.

참고 자료

- W3C HTML 5.2 표준 문서, 4.2. Document metadata - meta: 문서-레벨의 메타데이터 요소, MDN - 2017년에는 어떤 메타 태그를 사용해야 할까요?(영문)

description

페이지의 내용에 대한 짧고 정확한 요약을 설정.

<meta name="description" content="웹 페이지의 내용을 요약해서 기술" />

keywords

쉼표로 구분된 문자열로 페이지의 내용과 관련된 키워드를 설정.

<meta name="keywords" content="웹페이지에 주요 키워드를 콤마(,)로 구분하여 작성." />

author

문서 작성자의 이름을 정의.

<meta name="author" content="웹페이지 제작자" />

robots

  • 검색 로봇이 웹 페이지를 크롤링하는 동작에 대한 정의.

  • index와 noindex / follow와 unfollow는 같이 사용 해서는 안된다.

  • robots의 값 → MDN

    • index(기본값) : 페이지 내용을 색인한다.

    • noindex : 크롤러가 페이지를 색인하지 않도록 요청합니다.

    • follow(기본값) : 크롤러가 페이지 내의 링크를 따라갈 수 있습니다.

    • nofollow : 따라가지 않는다.

    • noarchive : 크롤러가 페이지를 캐시에 포함하지 않도록 요청합니다.

    • nosnippet : 검색 엔진 결과에 어떤 설명도 표시하지 않도록 지정합니다.

    • noimageindex : 크롤러가 페이지 이미지를 색인하지 않도록 요청합니다.

    <meta name="robots" content="index" />

웹 크롤러(Web Crawler)란?

웹페이지를 방문하여 자동적으로 수집하는 프로그램이다.

viewport

(비표준) 초기 viewport 크기 설정에 관한 힌트를 제공. 이 속성은 몇 개의 모바일 디바이스에 의해서만 사용됨.

  • width

  • height

  • initial-scale

  • maximum-scale m

  • inimum-scale

  • user-scalable

<!-- 모바일에서 아래의 설정이 없을 경우 기본적으로 960px로 나타난다. -->
<meta name="viewport" content="width=480px" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
기기에 폭에 맞춰 화면 최적화, initial-scale : 화면을 배율로 설정

content="width"를 고정값으로 설정하지 않는 이유

만약 고정값으로 480px으로 설정한다면 스크린의 너비가 960px로 커졌을 때 480px 너비 만큼만 콘텐츠가 보이게 된다.

이 문제를 해결하기 위해서 변수를 만들어서 사용한다. "device → 기기의 이름, width → 너비" 라고 해서 device-width로 설정하고 initial-scale(배수)는 1로 설정한다. (대부분 그렇다는 것이지 필수 값은 아니다.) 단, 해당 속성은 비표준 속성이다.

<link>

현재 문서와 외부 리소스(CSS, JS 등)와의 관계(relation)를 명시한다. 이 요소는 스타일시트를 링크 하는데 가장 많이 사용됨.

속성

  • rel : 문서와의 관계 명시.

  • type : 링크된 리소스 MIME 타입 정의. (기본 적용: text/css, text/html, text/javascript)

  • href : 링크된 리소스 URL 설정.

  • hreflang : 링크된 리소스의 언어 설정.

  • media : 링크된 리소스가 적용될 미디어(media)를 설정.

예시

기본 스타일시트 설정

<link href="style.css" rel="stylesheet" />

대체 스타일시트 설정

View > Page Style 메뉴에서(fire fox) 사용할 스타일시트를 고를 수 있다. (Chrome은 해당 X)

<link href="default.css" rel="stylesheet" title="기본 스타일" />
<link href="fancy.css" rel="alternate stylesheet" title="팬시" />
<link href="basic.css" rel="alternate stylesheet" title="베이직" />

<style>

문서나 문서 일부에 대한 스타일 정보를 포함. 기본적으로 CSS 언어가 사용됨.

속성

  • type

  • media

  • scoped : 지정한 섹션 내부에서만 스타일이 적용된다. 다른 곳에서는 적용안됨

  • title

  • disabled : 허용하지 않음

예시

<style type="text/css">
  /* type="text/css"은 기본값이기 때문에 생략해도 무방하다. */
  body {
    color: #323232;
  }
</style>

scoped 속성 사용 예

현재 제대로 지원하는 브라우저 없음.

<section>
  <style scoped>
    p {
      color: #902c1f;
    }
  </style>
  <p>...</p>
</section>

<base>

문서에 포함된 모든 상대 URL들의 기준 URL을 나타냄. 한 문서에 하나의 요소만 존재해야 함.

예시

아래의 link, base, meta 링크를 클릭하면 base에 설정한 기준 URL의 상대 위치에 link, base, meta가 가각 더해져서 해당 링크로 이동한다.

예) link 클릭시 https://developer.mozilla.org/ko/docs/Web/HTML/Element/link로 이동 된다. 

<head>
  <base target="_blanck" 
        href="https://developer.mozilla.org/ko/docs/Web/HTML/Element/" />
</head>
<body>
  <ul>
    <li><a href="meta">meta</a></li>
    <li><a href="link">link</a></li>
    <li><a href="base">base</a></li>
  </ul>
</body>

참고

Previous문서에 사용 되는 주 언어 설정Next제목과 단락

Last updated