META태그란?
HTML문서의 정보를 담고 있는 element이다.
META태그는 기본적은 HTML의 마크업의 열고닫는 구조가 없는 태그이다.
META태그는 HTML의 Head안에 들어간다. 즉 <META .... >와 같이 작성한다.
일반적으로 문자 집합, 페이지 설명, 키워드, 문서 작성자 및 보기 포트 설정을 지정하는 데 사용됩니다.
메타데이터는 페이지에 표시되지 않지만 검색엔진이나 브라우저에 읽힙니다.
이러한 메타태그로 charset description keyword author refresh mode viewport 등의 정보를 표기할수있습니다.
메타태그의 속성
메타태그는 http-equiv name content 세가지의 속성이있습니다.
- http-eqyiv 이속성은 문서에서 초기정보를 나타내는 속성으로 메타요소에서 정의된 명령사항들을 먼저 실행한 후 페이지를 로딩합니다. HTML 문서가 응답 헤더와 함께 웹 서버로부터 웹 브라우저에 전송되었을 때에만 의미를 갖습니다. 기본언어(content-language) MIME 타입(content-type) 브라우저호환성설정(X-UA-Compatible) 페이지 리로드(refresh) 등을 나타낼 수 있습니다.
- name 속성값으로는 subject, title, author, keywords 등이 있습니다. 검색엔진에게 문서의 내용을 요약해 주는 역할을 담당한다고 할 수 있습니다.
- content 메타태그의 정보를 지정해줍니다.
메타태그(meta tag)의 종류
-
기본언어(content-language) 전처리될 기본 언어를 지정할 수 있습니다. 선언하지 않는 경우 기본언어가 존재하지 않는것으로 간주합니다. content 에는 그에 맞는 값을 입력해야합니다. 아래 예제에서는 ko(한국어) 로 지정되어있습니다.
<meta http-equiv="content-language" content="ko" /> -
MIME 타입(content-type) 이 속성은 현재 페이지의 인코딩(문자셋)을 어떠한 방식으로 출력할 지 결정하는 속성입니다. 만약 제작한 웹 페이지의 한글이 깨져 보인다면, 거의 이 메타정보와 실제 페이지의 문자셋이 달라 생긴 문제일 가능성이 매우 큽니다. MIME타입 을 지정해준다음 세미콜론(;) 으로 구분합니다. 국내에서는 보통 UTF-8 과 EUC-KR 을 많이 사용하고 있습니다. 그리고 현재 추세는 다른 언어의 사용자가 접근 시에도 올바르게 보여질 수 있는 UTF-8 를 권장하고 있습니다.
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-
브라우저호환설정(X-UA-Compatible) 이 메타 정보는 IE(인터넷 익스플로러)가 하위 버전 IE모드로 렌더링 하도록 만들어 줍니다. 예를 들어 content속성 값에 "IE=EmulateIE7"로 넣는 경우, IE8 이상의 최신 IE 브라우저라도 IE7 버전처럼 페이지를 렌더링 합니다.
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
-
페이지 리로드(refresh) 페이지를 주기적으로 새로고침 하게 만들어줍니다. 예상치못한 새로고침은 사용자로하여금 불편함을 느끼게 할수있습니다. 아래 예시코드는 content 값에 숫자를 입력후 세미콜론(;) 으로 구분지어 url 로 주소를 넣어주면 해당 시간 뒤에 지정해준 url로 페이지가 이동된다는 뜻 입니다.
<meta http-equiv="refresh" content="30; url=hppt://www.google.com" />
- 소개내용(description) 정보 같은 경우는 현재 페이지를 간략히 소개하는 문구를 적도록 합니다. 이를 검색엔진이 검색된 페이지에 페이지 제목과 같이 표현하며, '공유하기' 같은 것을 했을 때에 활용이 될 수도 있습니다.
<meta name="Description" content="내용" />
- 키워드(Keywords) 페이지에 대한 키워드 정보들을 담고 있습니다. 페이지의 주요한 단어들을 콤마(,)로 구분하여 값을 넣어주도록 합니다. 이 키워드 정보는 검색엔진이 보다 검색엔진을 용이하도록 하게 만듭니다만, 이를 악용한 광고성 페이지들은 실제 콘텐츠와는 다른 단어들을 무작위로 넣기도 합니다.<meta name="Keywords" content="카워드1, 키워드2, 키워드3" />
- 작성자(author) 페이지의 저자를 나타냅니다. content의 값으로 저자를 나타내는 문자열을 써야 합니다. 이 메타정보가 큰 의미를 가지진 않지만, 소스 상에서도 자신이 제작했음을 명시할 수 있습니다.<meta name="author" content="이름" />
