(HTML)meta 태그

meta 태그는 문서가 어떤 내용을 담고 있고, 문서의 키워드는 무엇이며, 누가 제작했는지 등의 문서 자체에 대한 정보를 담고있다.

웹 사이트의 검색엔진 최적화를 위한 중요한 태그이다. head 태그 내에 위치해야 하며, 닫는 태그는 없다.

<meta charset="UTF-8">

HTML 문서의 인코딩 방식을 지정한다.

다양한 인코딩을 넣을 수 있는데, 꼭 특정 인코딩을 이용해야만 하는게 아니라면 기본적으로 UTF-8을 이용하는 것이 좋다.
전세계적으로 가장 많이 이용되고 있고, 전세계의 거의 모든 문자를 표현할 수 있기 때문이다.

<meta name="description" content="메타태그란 무엇일까요?">

meta 태그의 속성을 보면 name과 content로 이루어진 경우가 많다.

name은 이 meta 태그가 어떤 종류의 정보를 나타내고 있는지 알려주는 속성이고, content는 meta 태그의 내용을 알려주는 속성이다.

그 중에서도 description은 검색결과에 표시되는 유일한 태그이다.
검색결과에 보여지기 때문에 description을 잘 작성함으로써 클릭률이 올라가고, 페이지 랭크가 상승될 수 있다.

주의할 점은 description에 글자 수 제한은 없지만, 일정 글자 수를 초과하면 뒷부분은 … 으로 생략표시 된다. 대략 100글자 정도가 적당하다고 한다.

<meta name="keywords" content="meta,html,seo">

이 페이지의 핵심 키워드가 무엇인지 알려주는 태그이다.

주로 단어들을 콤마를 통해 구분하며, 중복되는 단어가 있으면 오히려 악영향을 미치기 때문에 지양해야 한다.
그리고 중요하고 의미있는 단어일수록 앞쪽에 배치해야 한다.

<meta name="author" content="홍혜영">

문서를 만든 작성자에 대한 정보를 의미한다.

<meta name="robots" content="index,follow">

사용자가 어떤 키워드를 검색했을 때, 검색엔진은 사용자에게 검색결과를 제공한다.

이렇게 빠른 시간내에 제공하기 위해서 검색엔진은 온라인 상의 여러 문서들을 이미 수집해놔야 하고, 잘 정리되어 있어야 한다.

이 때, 수집하는 것을 크롤링이라고 하고 이를 정리하는 것을 인덱싱이라고 한다.
content 속성의 index는 페이지의 인덱싱 여부를, follow는 페이지 내의 링크들에 대한 크롤러의 접근 여부를 제어한다.

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

viewport는 말 그대로 화면 표시와 관련된 태그로, 최적화 된 모바일 페이지를 만들기 위해 많이 이용된다.
width=device-width는 화면의 너비가 기기의 너비라는 의미이고, initial-scale은 화면에 표시할 웹 페이지의 초기화면 배율을 의미한다.

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

이 태그를 사용하면 content 속성에 입력한 초마다 새로고침이 실행된다.
이를 이용해서 사이트 내에서 동적으로 로딩되는 내용을 갱신할 수 있다.

하지만 예상치 못한 새로고침은 사용자로 하여금 불편함을 야기하며, 특히 스크린리더로 접근하는 사용자에게는 더욱 그렇다.
부분적인 영역의 새로고침 같은 경우는 자바스크립트를 이용해주고, 이 태그는 사용하지 않는게 좋다고 한다.

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

IE10 이하 버전은 문서를 읽을 때 쿼크 모드 혹은 IE7모드를 사용해서 웹 페이지를 표시한다.

사용자가 최근 브라우저를 사용하고 있어도 웹 페이지가 적절하게 렌더링되지 않을 수도 있는데, 이때 meta 태그를 이용해서 최신 엔진으로 페이지를 렌더링 할 수 있도록 설정할 수 있다.