[HTML] #5 Meta 태그 알아보기

1. meta 태그가 뭐야?

 

 meta태그는 meta data에 대한 태그이다.

 meta data란, 웹페이지가 담고 있는 컨텐츠가 아닌 웹페이지 자체의 정보를 뜻한다.

 이 meta 태그가 중요한 이유는 웹페이지의 정보를 알리는 것도 있지만 웹페이지의 요약이 되어주기도 하기 때문이다.

 

 최근 들어 검색 엔진 마케팅(Search Engine Marketing)의 중요성이 끊임없이 상승하고 있기에,

 웹페이지가 검색이 되는 첫 얼굴인 메타 태그(Meta TAG)는 더더욱 중요해지는 것이다.

 

 그 중에서도 meta 태그 중 기본으로 들어가는 정보들을 알아보려한다.

 이 내용은 W3Schools에도 올라가있으니 아래의 사이트를 참조해보아도 좋다.

 

  https://www.w3schools.com/tags/tag_meta.asp

HTML meta tag

 

 

2. 흔히 사용되는 meta tag

 

 흔히 사용되는 meta 태그는 아래와 같다.

 그리고 이 중에서도 HTML 문서에서 필수로 들어가는 것도 있기에 잘 알아두어야 한다.

 

! <meta charset="UTF-8">

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

 <meta name="description" content="Free Web tutorials">

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

 <meta name="keywords" content="HTML, CSS, JavaScript">

 <meta http-equiv="refresh" content="30">

 * ! : 필수

 

 1) <meta charset="UTF-8">

 이 웹페이지의 언어 인코딩 방식을 UTF-8 방식으로 사용하겠다는 뜻이다.

 UTF-8은 조합형 인코딩 방식으로 3바이트가 할당이 되며, 초성 + 중성 + 종성을 조합하여 한글을 표현한다.

 이 메타 태그를 선언하지 않으면 웹페이지에서 한글이 깨지게 되는 현상이 발생할 수 있다.

 

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

 모든 장치에서 HTML 문서를 잘 보이게 하기 위해 포트를 설정하는 태그이다.

 이 태그는 애플이 아이폰, 아이패드 등 자사의 모바일 브라우저의 뷰포트(viewport) 크기 조절을 위해 만들었다.

 그러다 아이폰 운영체제의 브라우저인 safari가 널리 사용되면서 사실상 표준처럼 사용되고 있고, 다른 브라우저들(Opera, Android, Mobile firefox 등) 도 이 태그를 채택하게 되었다.

 물론 IE10은 뷰포트 크기 조절을 위해 이 meta viewport 태그 대신에 표준으로 제안된 @viewport rule을 사용하지만 그럼에도 여전히 meta viewport 설정을 고수하는 브라우저들이 있다.

 따라서 아이폰과 IE10 브라우저 양쪽을 타겟으로 웹페이지를 설계하기 위해선 두 가지 방식으로 viewport 크기 조절을 하는 것이 필수이기에 이 메타 태그가 필수가 되는 것이다.

 

 3) <meta name="description" content="Free Web tutorials">

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

 이 태그는 이 웹페이지에 대한 다양한 정보들을 나타내는 태그이다.

 위의 태그들은 이 페이지의 설명, 그리고 페이지의 저자를 나타낸다.

 

 4) <meta name="keywords" content="HTML, CSS, JavaScript">

 이 태그는 검색엔진에서 이 페이지가 검색될 때의 키워드를 정의하는 태그이다.

 

 5) <meta http-equiv="refresh" content="30">

 이 태그는 30초마다 주기적으로 현재 HTML 문서를 새로고침하게 하는 태그이다.