[HTML] Meta Tags

1. 정의

<meta> 태그는 HTML 문서의 *metadata를 의미한다. Metadata는 중요한 데이터이다.

*메타데이터는 "데이터에 관한 데이터"를 의미한다. 문서에 관한 정보로 구성되어 어떤 정보로 구성되어야 하는가에 대한 규칙은 정해진 바 없다. 일반적으로 제공자(author), 저작권(copyright), 키워드(keyword), 언어(language)등 문서의 성격을 파악하는데 도움을 주는 정보가 포함된다. 이러한 정보는 사람보다는 기계(브라우저, 검색엔진)을 위한 것이다.

<meta> 태그는 항상 <head>안에 포함되어 있으며, 일반적으로 문자셋(character set), 페이지 설명(page description), 키워드, 문서의 저자(author of the document)와 뷰포트 설정(viewport settings)에 사용된다.

만약 name 속성이나 http-equiv 속성이 명시되었다면 반드시 content 속성도 함께 명시되어야 하며, 반대로 두 속성이 명시되지 않았다면 content 속성 또한 명시될 수 없다.

HTML5에서는 <meta>요소를 통해 웹 페이지에서 사용자가 볼 수 있는 영역인 뷰포트(view port)를 제어할 수 있도록 name 속성에 viewport 속성값을 제공한다.

2. 속성

2-1) charset

charset 속성은 문자 세트를 지정한다. 문자 세트는 사용언어를 표현하는데 필요한 모든 문자를 모아둔 것으로, 여기에는 기호, 공백 등도 포함된다. 문자 인코딩은 문자 세트를 기계가 이해할 수 있는 형식으로 만든 규칙이다. 이 규칙에 따라 하나의 문자 세트는 여러 개의 인코딩을 가질 수 있으며, 브라우저가 인코딩을 정확하게 알아야만 HTML 문서를 제대로 해석하여 문자로 표현 할 수 있다.

모든 HTML 문서는 반드시 인코딩 방식을 선언해야 하며, 이 선언은 문서당 한 번만 이루어저야 한다. 물론 인코딩 방식을 선언하지 않더라도 브라우저가 알아서 HTML 문서를 제대로 렌더링할 수 있으나, 모든 브라우저가 그런 것은 아니다.

<head>
  <meta charset="UTF-8" />
</head>

우리나라의 경우 웹 페이지에 사용되는 문자셋은 크게 euc-kr과 UTF-8가 있다.

EUC-KR
- 2350개의 한글문자, 한국에서 통용되는 한자, 영문을 표한할 수 있다.
- 문서를 작성할 때 한정된 범위내의 문자만을 사용할 경우 사용한다.
- 한글 한 자를 2바이트로 처리한다.
UTF-8
- 유니코드는 전세계의 모든 문자를 표현할 수 있는 인코딩이다. 언어에 제한받지 않고 문제없이 표현할 수 있다.
- 한글 한 자를 3바이트로 처리하기 때문에 문서가 다소 커질 수 있으나, 공백이나 영문 한 자는 1바이트롤 처리하는 유연함을 보여준다.
- 문자셋을 UTF-8로 작성한다면 HTML 파일을 저장할 떄 파일 타입도 UTF-8로 저장해야 한다.

브라우저가 문서의 문자 인코딩을 결정하는 우선순위

content-type 필드의 HTTP charset 파라미터
META 요소의 http-equiv에 의한 content-type과 charset 속성
특정 요소의 charset 속성

charset은 <title>이전에 선언해야 한다.

속성 값	설명
문자셋	* HTML문서의 문자 인코딩을 지정한다. * UTF-8 - 유니코드 문자 인코딩 * ISO-8859-1 - 라틴 알파벳 문자 인코딩 * 사용 가능한 모든 문자 인코딩을 보려면 IANA character sets를 보면된다.

Unicode와 UTF-8 간단히 이해하기

2-2) content

메타 정보의 내용을 지정.
단독으로 사용될 수 없으며 name, http-equiv 속성과 함께 사용해야 한다.
저작자 정의에 의해 새로운 메타데이터가 생길 수 있다. 자주 사용하는 메타데이터라 할지라도 저작자 의도에 따라 다른 용도로 사용될 수 있으므로 name 속성을 사용하여 메타데이터 이름을 지정했다면 content 속성을 사용하여 메타데이터가 어떤 용도이며, 어떤 성격인지 알 수 있도록 메타 정보를 제공해야 한다.

2-3) http-equiv

클라이언트와 서버간의 통신에서 주고받은 데이터 단위를 HTTP메시지라고 부르는데 이 HTTP 메시지는 HTTP헤더, 바디, 트레일러로 구성된다. 이 때 요청횟수와 전송량을 줄이기 위해 클라이언트와 서버는 HTTP 메시지의 바디(body)를 처리하기 전에 HTTP 헤더를 먼저 처리하므로 저작자가 적절한 HTTP헤더를 제공하면 클라이언트와 서버 사이의 작업 효율성을 증가 시킬 수 있다. http-equiv 속성은 이 HTTP 헤더와 같은 값을 지정하는 것이다.

<head>
  <meta http-equiv="content-security-policy|content-type|default-style|refresh">
</head>

2-3-1) http-equiv="content-type"

문자 인코딩 방식을 지정하는 것.
charset 속성의 대체 형식이며, 문자 인코딩 방식에 대한 선언은 한 번만 이루어져야 하므로 charset속성이든 http-equiv속성이든 하나만 사용해야 한다.

<meta http-equiv="content-type" content="text/html; charset=utf-8">

2-3-2) http-equiv="default-style"

기본 스타일 시트를 지정.
link 요소에 의해 여러 종류의 스타일 시트가 정의되어 있는 경우 기본 스타일 시트를 지정하는 것이다. link 요소의 title 속성값을 content 속성으로 지정하며 해당 link요소의 스타일 시트가 기본 스타일 시트가 된다.

<meta http-equiv="deefault-style" content="phone">
<link rel="stylesheet" href="phone.css" title="phone">
<link rel="stylesheet" href="desktop.css" title="desktop">

2-3-3) http-equiv="refresh"

문서의 새로고침을 지정.
속성값은 숫자 값으로 지정되며, 이 값은 초 단위의 시간 주기를 의미. 이 때, url를 지정하면 새로고침과 동시에 해당 url 에 있는 문서로 자동 이동한다. 만약 url을 지정하지 않으면 현재 문서가 다시 로딩된다.
해당 동작은 권장되지 않는다. 자동으로 url 리다이렉션은 최근 웹에서 지양하고 있으며 피싱 등의 위험으로 간주 될 수 있다. 또한 5초로 리다이렉트를 지정해놓았는데 그전에 사용자가 뒤로가기 했을 경우 5초 후 지정한 url로 이동될 수 있으니 사용하지 않는 것이 좋다.

<meta http-equiv="refresh" content="60; url=example.html">
<meta http-equiv="refresh" content="60">

2-3-4) http-equiv="X-UA-Compatible"

IE8이 개발되면서 생긴 호환성모드에 대응하기 위한 속성.
IE=edge 는 항상 최신의 표준엔진을 사용해 렌더링하게 한다.

<meta http-equiv="X-UA-Compatible" content="IE=edge">

2-4) name

메타데이터 이름을 지정.
메타데이터 이름을 지정했다면 content 속성으로 메타데이터의 용도와 성격을 지정한다. name과 content속성이 한 쌍으로 작성되는데 name 속성에는 이름, content 속성값을 작성한다.
중요도가 높거나 자주 사용하는 메타데이터는 아래와 같이 name속성값이 정해져 있다.

2-4-1) name="application-name"

웹 애플리케이션 이름을 지정.
웹 애플리케이션이 아닌 때에는 이 속성값을 사용할 수 없으며, 문서 내에서 한 번만 지정가능하다.

<meta name="application-name" content="Gmail">

2-4-2) name="author"

저작자 이름(author)을 지정.
일반적으로 제공자나 개발자 이름을 기입한다.

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

2-4-3) name="description"

문서 설명을 지정.
검색엔진은 이 문서 설명을 검색결과로 보여준다.
문서 내에서 한 번만 지정할 수 있다.

<meta name="description" content="현재 페이지의 요약글, 설명">

2-4-4) name="generator"

문서 작성에 사용한 저작 도구를 지정.
저작자가 저작 도구를 사용하지 않고 직접 작성한 때에는 이 속성값을 사용하지 않는다.

<meta name='generator' content="Dreamweaver CS5.5">

2-4-5) name="keywords"

키워드를 지정.
문서 내용과 관련있는 단어로 작성되며 콤마를 이용하여 복수의 키워드를 제공할 수 있다.

<meta name="keywords" content="html, css, javascript, php">

웹 문서의 META 요소를 이용하여 키워드(keyword)나 설명(description)을 제공할 수 있다.

이 키워드와 설명은 웹 문서에 나타나는 것이 아니라 검색엔진과 같은 사용자 도구가 문서 내용을 예측할 수 있도록 돕는다. 물론 스팸키워드처럼 관련 없는 키워드와 설명의 임의로 포함될 수 있기 때문에 구글과 같은 검색엔진 서비스는 메타데이터의 키워드와 설명을 제한적으로 참고하거나 아예 참고하지 않는다.

검색엔진 최적화(SEO)초보자 가이드

2-4-6) name="viewport"

모바일, 탭과 같은 다양한 기기들의 화면 크기를 제어한다.

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

width=device-width :: 반응형 웹 페이지에서 유동적으로 너비가 맞춰진다.
initial-scale=1 :: 페이지가 브라우저에 의해 처음 로드될 때 초기 줌 레벨을 설정한다.
content 속성값
- user-scalable=no :: 사용자의 확대보기 허용 여부(yes/no)
- initial-scale=1.0 :: 페이지 로딩시 확대비율
- maximum-scale=1.0 :: 최대확대비율
- minimum-scale=1.0 :: 최소축소비율
- width=device-width :: 플랫폼 가로 크기에 맞춤. 수치를 넣으면 그 수치에 맞게 맞춰짐
- target-densitydpi=medium-dpi :: dpi([dots per inch]) 모바일 화면 크기

2-4) OpenGraph

오픈그래프는 웹 페이지가 소셜미디어 또는 오픈그래프를 활용한 사이트로 공유될 때 사용되어지는 정보이다.
제일 흔한 예로 페이스북에 링크 붙여놓기, 카카오톡 링크 공유할 때 해당 게시물의 제목, 설명, 이미지가 간략하게 나타나는 경우가 오픈그래프가 활용되는 경우이다.

<meta property="og:type" content="website">
<meta property="og:title" content="페이지 제목">
<meta property="og:description" content="페이지 설명">
<meta property="og:image" content="image.jpg">
<meta property="og:url" content="페이지 url">

4. viewport 설정

viewport는 사용자들이 웹 페이지를 볼 수 있는 영역이다. 뷰포트는 장치에 따라 다르다. 페이지의 크기와 크기를 제어하는 방법에 대한 브라우저 지침이 제공된다.

width=device-width :: 페이지 너비를 설정한다.(장치에 따라 다름)

initial-scale=1.0 :: 페이지가 브라우저에 의해 처음 로드 될 때 초기 줌 레벨을 설정한다.

viewpoint 설정할 때 주의할 점.
- 사용자는 데스크탑과 모바일 장치 모두에서 웹 사이트를 세로로 스크롤 하지만 가로로는 사용하지 않는다. 따라서 사용자가 전체 웹 페이지를 보기 위해 가로로 스크롤 하거나 축소하면 사용자 환경이 저하된다.
- 큰 고정 너비 요소를 사용하지 말것.(가로 스크롤이 생기지 말 것) 이미지가 뷰포트보다 넓은 너비로 표시되면 뷰포트가 가로로 스크롤이 될 수 있다. 뷰포트 너비에 맞게 조정해야 한다.
- 내용을 잘 렌더링하기 위해서는 특정 뷰포트 너비에 의존하지 않도록 한다. CSS 픽셀의 화면 크기와 너비는 장치마다 크게 다르므로 내용을 잘 렌더링하기 위해서는 특정 뷰포트 너비에 의존해서는 안된다.
- CSS 미디어 쿼리를 사용하여 작고 큰 화면에 다른 스타일을 적용한다. 디자인에 맞게 컨텐츠가 분리되지않게 absolute를 쓰지 않고 relative를 사용하여 width: 100%와 같은 상대 너비값을 사용한다.

Reference

w3cschool.com :: HTML<meta>Tag](https://www.w3schools.com/tags/tag_meta.asp)
TCP School.com
HEAD(문서머리)영역#2 = META 요소
meta 태그를 알아보자(웹표준과 SEO)
HTML 마크업 소개

저작자표시 비영리 동일조건

'👩🏻‍💻STUDY > HTML' 카테고리의 다른 글

[HTML] abbr acronym (0)	2021.12.23
[HTML] HTML 그룹화 관련 요소 (0)	2020.10.22
[HTML] HTML 마크업 (0)	2020.10.21
[HTML5] form요소만들기 (0)	2020.03.18
[HTML5] form작성(MDN) (0)	2020.03.13

/* jmjmjm */

[HTML] Meta Tags 메타태그

[HTML] Meta Tags

1. 정의

2. 속성

2-1) charset

2-2) content

2-3) http-equiv

2-3-1) http-equiv="content-type"

2-3-2) http-equiv="default-style"

2-3-3) http-equiv="refresh"

2-3-4) http-equiv="X-UA-Compatible"

2-4) name

2-4-1) name="application-name"

2-4-2) name="author"

2-4-3) name="description"

2-4-4) name="generator"

2-4-5) name="keywords"

2-4-6) name="viewport"

2-4) OpenGraph

4. viewport 설정

Reference

'👩🏻‍💻STUDY > HTML' 카테고리의 다른 글

티스토리툴바

[HTML] Meta Tags 메타태그

[HTML] Meta Tags

1. 정의

2. 속성

2-1) charset

2-2) content

2-3) http-equiv

2-3-1) http-equiv="content-type"

2-3-2) http-equiv="default-style"

2-3-3) http-equiv="refresh"

2-3-4) http-equiv="X-UA-Compatible"

2-4) name

2-4-1) name="application-name"

2-4-2) name="author"

2-4-3) name="description"

2-4-4) name="generator"

2-4-5) name="keywords"

2-4-6) name="viewport"

2-4) OpenGraph

4. viewport 설정

Reference

'👩🏻‍💻STUDY > HTML' 카테고리의 다른 글

'👩🏻‍💻STUDY/HTML' Related Articles

티스토리툴바