프로그래밍/HTML5

메타태그 정리 (html meta 태그) 정보의 설명

콘파냐 2017. 12. 12. 17:23
반응형

지금까지 많은 태그들을 살펴보았지만 오늘 살펴볼 메타태그는 웹 사이트의 검색 최적화와 관련된 중요한 태그다. 메타(meta)라는 말의 의미는 다양하지만 여기에서 메타는 "정보를 설명하는 정보" 정도가 적당할 듯하다. 다시말해 HTML 문서는 웹에서 어떤 정보를 전달하기 위한 형태의 문서이며 메타태그는 HTML 문서가 어떤 문서인지에 대해서 설명하거나 추가적인 정보를 알리기 위해 사용되는 태그다.

비유하자면 HTML 문서가 책이라면 메타 태그는 책의 겉 표지라고 볼 수 있겠다. 책의 겉 표지는 책의 제목과 가격, 지은이, 책을 대표하는 그림 등의 정보가 있어 책이 어떤 성격의 책인지를 쉽게 파악할 수 있도록 만든다. 마찬가지로 메타태그 역시 HTML 문서가 어떤 정보를 포함하며 어떤 성격의 문서(사이트)인지 설명하는 역할을 한다.

기본적으로 검색엔진에 사이트들이 검색될 때 이 메타태그의 정보가 검색에 큰 영향을 미친다. 물론 실제로 그에 맞는 정보가 담겨있는지도 중요하다. 검색엔진은 메타태그의 정보와 실제 내용이 너무 다르거나 메타태그가 너무 과하다면 해당 페이지를 스팸으로 처리할 수도 있으므로 메타태그의 사용은 적절하게 해야 한다.

우선 하나씩 어떤 것들이 있는지 정리하도록 해보겠다.

html 메타태그(meta태그) 정리

titile 태그와 마찬가지로 메타태그는 HEAD 태그 안에 작성한다. 메타태그의 종류는 여러가지가 있고 검색엔진마다 취급하는 메타태그도 따로 있을 수도 있다. 이런 이유로 검색엔진은 이해할 수 있는 메타태그만 처리하고 이해할 수 없는 것들은 무시한다. 

우선 공통적이고 기본적인 태그들을 살펴보자.


<meta charset="UTF-8">

HTML 문서의 인코딩 방식을 지정한다. UTF-8은 유니코드의 인코딩 형식 중에 하나이며 가장 널리 쓰이는 인코딩 방식이다. 최신 문서들은 거의 대부분은 UTF-8 방식으로 인코딩 되어 있으므로 뭔지 몰라도 그냥 이대로 설정하면 된다.

<meta name="description" content="메타태그 설명">

meta태그 속성을 보면 다는 아니지만 대부분 name과 content 속성을 짝으로 한다. name은 설명하려는 정보를 의미하고 content는 실제 설명을 의미한다. 이 태그는 name이 "description"으로 웹 페이지에 대한 설명을 하는 메타정보를 의미한다. content는 "메타태그 설명"으로 검색엔진에게 이 페이지(사이트)가 메타태그에 대한 설명을 다루는 페이지라고 알려줄 수 있다.

<meta name="keywords" content="메타태그, meta, tag, html">

마찬가지로 핵심 키워드(keywords)를 의미하며 "description"과 같이 검색엔진에게 페이지의 정보를 알려주는 역할을 한다. 그런데 이 태그들이 검색의 최적화를 위해서 중요하기 때문에 많은 웹페이지들이 오남용을 많이 해왔다. 

(SEO는 Search Engine optimization를 뜻한다.)

따라서 너무 남용을 하게 되면 검색엔진으로부터 불량사이트로 낙인 찍힐 수가 있다. 검색 알고리즘은 외부로 공개되지 않고 최적화 가이드만 알려주므로 구굴이나 네이버에 노출을 위해서는 각 사이트에서 권장하는 최적화 가이드를 읽어볼 필요가 있다. (참고 구글에서 이해할 수 있는 메타태그 )

<meta name="author" content="콘파냐">

문서를 만든 저자에 대한 정보를 의미한다. 실제로 이 정보가 어떻게 쓰이는지는 필자 역시 의문이다.

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

viewport는 다양한 기기에 대해서 웹페이지의 크기를 결정하는 태그다. 설명을 하려면 길기 때문에 간단히 설명하고 넘어가는데 viewport는 화면의 크기라고 생각하면 된다. content 값에 "width=device-width"는 화면의 너비가 장치(PC,모바일 등)의 너비라는 의미다.  "initial-scale=1.0"은 화면에 표시할 웹 페이지의 배율을 의미한다. 뭔가 설명이 어려운데 이 내용은 나중에 따로 정리하도록 하겠다.

X-UA-Compatible

X-UA-Compatible 은 브라우저 버전에 대한 호환성에 대한 태그다. 위 코드는 "ie=edge"로 정했으므로 인터넷 익스플로러 최신 버전으로 웹페이지를 랜더링 하라는 뜻이다. 이 태그도 특별히 바꿀필요 없이 이대로 사용면 되므로 그냥 넘어가도록 하자.

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

이 태그를 사용하면 3초마다 새로고침을 하게된다. content가 3이므로 3초마다 사이트가 새로고침이 된다. 이를 이용해서 사이트 내에서 동적으로 로딩하는 내용을 갱신하도록 할 수도 있겠다. 또는 다음과 같이

<meta http-equiv="refresh" content="3, url=http://naver.com">

3초 후에 새로운 페이지를 로딩할 수도 있다.(redirection)

반응형