HTML 메타데이터

<!DOCTYPE html>
<html lang="ko">
  <head>
    <!-- 이미 사용해 본 적 있는 meta 태그 -->
    <meta charset="utf-8">
    <title>문서의 제목</title>
  </head>
  <body>
  </body>
</html>

위 코드에서 <meta charset="utf-8">은 문서의 문자셋 정보를 추가해 다양한 문자를 인코딩할 수 있도록 설정한 부분입니다. 이처럼 <meta> 태그에는 메타데이터를 나타내는 속성들을 추가해 문서 정보를 표현할 수 있고, 이는 주로 결과 화면에 콘텐츠를 추가하는 것이 아닌 브라우저에게 문서의 정보를 전달하는 역할을 하게 됩니다. 이미 사용해 본 바 있는 유형 외에도, 다음과 같은 속성들을 추가하면 HTML 문서에 대한 다양한 추가 정보를 나타낼 수 있습니다.

name : 지정할 메타데이터의 이름(유형)을 지정합니다.
content : 메타데이터 설정 값을 지정합니다. name과 짝을 이루어 적용되곤 합니다.
charset : 문자 인코딩을 나타내는 "문자 집합 선언"을 지정합니다.
http-equiv : HTTP 헤더가 제공하는 정보와 동일한 "프래그마 지시문"을 설정합니다.

몇 가지 메타데이터 설정 방법을 공부해보기 전에, 중요한 질문을 던져볼 필요가 있습니다. 바로 '메타데이터는 왜 추가할까'라는 질문입니다. 앞서 말했듯 메타데이터는 화면에 표시되는 내용이 아닙니다. 그럼에도 불구하고 메타데이터를 학습하고 추가해야 하는 이유는 역시 웹 페이지의 서비스 품질을 향상시키기 위함입니다. <meta> 태그를 이용하면 문자 인코딩 방법을 비롯해 웹 문서 키워드 등을 지정할 수 있는데, 이러한 정보들은 검색 엔진이 웹 페이지를 검색하는 데 유용한 정보로 활용됩니다. 또한 <meta> 태그의 적절한 활용은 브라우저 호환성 이슈를 해결하거나 웹 접근성을 향상시키는 데에도 도움이 됩니다.

문서 정보를 나타내는 역할을 하므로, <meta> 태그는 <head> 태그 내부에 추가해주어야 합니다.

표준 메타데이터 사용 예

'명세'란 사용법을 정리한 문서를 뜻합니다.

문서 제작자 정보를 나타내는 author

문서를 작성한 사람에 대한 정보를 추가하는 메타데이터 이름입니다.

<meta name="author" content="homepage">

웹페이지에 대한 설명을 추가하는 description

페이지에 대한 짧고 정확한 요약을 추가하는 메타데이터입니다. 파이어폭스, 오페라 등 여러 브라우저에서는 즐겨찾기 페이지의 기본 설명 값으로 description의 값을 사용하기도 합니다.

<meta name="description" content="홈페이지 입니다.">

키워드 목록을 추가하는 keywords

keywords에는 웹 페이지의 콘텐츠와 관련된 키워드를 원하는 개수만큼 추가할 수 있습니다. 이때 키워드 간의 구분을 위해 쉼표를 이용합니다.

<meta name="keywords" content="animal, cat, dog, puppy, kitty">

모바일 기기에서의 사용을 위한 viewport

viewport 메타데이터는 PC 화면에서 보이는 페이지를 모바일 기기에서 보기 위해 추가하는 정보입니다. viewport(뷰포트)란 기기의 화면 상에서 콘텐츠가 표시되는 영역을 뜻하는 용어입니다. PC 화면과 모바일 화면은 뷰포트 크기 자체가 다르고, 또 그 안에서 화소(픽셀)를 표현하는 규모 또한 다르기 때문에 PC 화면과 모바일에서는 같은 코드의 페이지라도 배율 조정 때문에 다르게 보이는 현상이 발생하곤 합니다. 아래 이미지는 같은 페이지를 각각 PC와 모바일에서 확인한 예입니다.

위 두 화면은 완벽하게 같은 코드를 렌더링한 결과입니다.

메타데이터 viewport는 그 값을 어떻게 설정하는가에 따라 이러한 문제를 해결할 수 있는 메타데이터입니다.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

위 태그 예시는 웹 페이지 화면 영역의 너비를 기기의 너비(device-width)에 맞추고 초기 화면 배율(initial-scale)을 1로 지정한 메타데이터로 viewport 지정 시 가장 많이 사용하는 형태입니다. 이 외에 viewport의 content로 추가할 수 있는 값들은 다음과 같은 것들이 있습니다.

height : 웹 페이지를 렌더링 하고자 하는 viewport의 높이
maximum-scale : 가능한 최대 확대 비율
minimum-scale : 가능한 최소 확대 비율.
user-scalable : 사용자가 웹 페이지를 확대할 수 있는지 여부 지정하기. yes 또는 no로 결정합니다.

다양한 메타데이터가 추가된 페이지의 예

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <meta name="author" content="홈페이지">
  <meta name="description" content="예시를 위해 만들어 본 페이지입니다.">
  <meta name="keywords" content="메타데이터, meta, HTML, 프론트엔드, 웹 개발">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>메타데이터란 이런 것이다</title>
</head>
<body>
  <h1>표준 메타데이터 이름</h1>
  <p>
    &lt;meta&gt; 태그는 name 속성을 메타데이터의 이름으로, content 속성을 값으로 하여 메타데이터를 추가합니다. HTML 표준 명세를 비롯한 웹 페이지 관련 명세에는 사용 가능한 메타데이터 이름과 값들이 정의되어 있는데, 이를 '표준 메타데이터'라 합니다. 여기에서는 대표적인 표준 메타데이터 몇 가지를 알아보겠습니다.
  </p>
</body>
</html>