문서 메타데이터 요소들

메타 데이터 요소는 해당 페이지의 정보를 제공하며 <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)로 일반적으로 웹서버가 제공하는 웹페이지가 어떻게 제공되어야 하는지에 대한 정보를 제공.

예시

name 속성이 설정된 경우

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

메타 데이터의 속성

1. charset

2. http-equiv

3. content

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

4. name

application name

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

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

간단한 웹 페이지란?

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

참고 → 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

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

keywords

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

author

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

robots

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

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

  • robots의 값 → MDN

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

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

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

    • nofollow : 따라가지 않는다.

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

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

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

웹 크롤러(Web Crawler)란?

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

viewport

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

  • width

  • height

  • initial-scale

  • maximum-scale m

  • inimum-scale

  • user-scalable

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)를 설정.

예시

기본 스타일시트 설정

대체 스타일시트 설정

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

<style>

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

속성

  • type

  • media

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

  • title

  • disabled : 허용하지 않음

예시

scoped 속성 사용 예

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

<base>

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

예시

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

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

참고

5KB
metadata.html
Open
Previous문서에 사용 되는 주 언어 설정Next제목과 단락

Last updated

Was this helpful?