[html] meta 태그란 왜 있는 것인가? meta 태그 정리

최근에 메타인지라는 용어가 널리 사용되고 있습니다. 저는 고영성, 신영준의 "완벽한 공부법"이라는 책에서 처음 이 단어를 접했던 기억이 있습니다. 그 의미를 살펴보자면 자기 자신을 얼마나 알고 있는지, 자기 자신의 능력과 수준을 얼마나 객관적으로 인지하고 있는지에 대한 용어라고 생각하시면 되겠습니다. 자신이 무엇을 알고 무엇을 모르는지를 정확히 알고 있는 사람은 메타인지력이 높은 사람인 것입니다.

 

메타인지: "자신의 인지 과정에 관한 인지 능력"

 

메타 태그란?

웹 사이트를 개발할 때 html  문서를 작성하게 되는데, html 문서의 상단에 head 영역에 여러 종류의 메타 태그가 들어갑니다. 아래는 제가 만든 티스토리 스킨 "LinuXkin"에 사용된 메타 태그들입니다. 

 

 

메타 태그란 해당 웹 문서에 대한 정보를 알리기 위한 태그라고 생각하시면 됩니다. "나 이런 문서야"라고 문서 스스로 알려주는 것이라고 볼 수 있습니다. 메타 태그를 잘 작성해야 구글, 네이버, 다음과 같은 각종 검색 사이트에서 잘 검색될 확률이 높아진다고 합니다. 물론 일단 기본적으로 검색이 되게 하려면 기본적으로 구글 서치 콘솔, 네이버 서치어드바이저 등에 먼저 사이트를 등록을 해야합니다. 구글 검색 엔진 등이 등록된 사이트들에서 메타 태그를 체크하여 해당 사이트가 어떤 사이트인지에 대해 파악을 한다고 생각하면 되겠습니다. 보통 검색 엔진이 보기에 좋게 사이트를 만들어야 트래픽이 많아질 수 있다(많은 사람이 방문함)고 해서, 검색 엔진 최적화(search engine optimization, SEO)라는 용어를 많이 사용하죠. 파워 블로거분들은 이 SEO를 위해 무진장 노력하시기도 합니다. 어떻게 작성해야 구글, 네이버, 다음 검색 엔진에서 상위에 노출될 수 있을지 고민하면서 말이죠. 

 

아무튼 많이 사용되는 메타 태그들을 아래 하나씩 정리해보도록 하겠습니다.

 

메타 태그 종류

우선 vscode에서 html 문서를 하나 만들고 느낌표 + 탭을 눌렀을 때 자동으로 완성되는 코드를 보면서 가장 중요한 메타 태그들을 살펴보겠습니다. 중요하니까 자동완성으로 만들어지게 했겠죠?

 

 

총 3개의 메타 태그가 포함되어 있는 것을 확인할 수 있습니다. 

 

1. 문자 인코딩 방식

<meta charset="UTF-8">

코드를 컴퓨터가 잘 이해하기 위해 변환하는 과정을 인코딩이라고 하는데, UTF-8은 그 인코딩 방식 중 하나입니다. ASCII, ANSI, CP949, EUC-KR 등의 인코딩 방식이 있지만, 그냥 UTF-8을 쓰면 됩니다. 

 

2. 브라우저 호환성

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

인터넷익스플로러에서 작성한 페이지가 잘 보여지게 하기 위한 것이라고 볼 수 있을 것 같습니다. 

 

3. 뷰포트 설정

노트북, 태블릿, 스마트폰 등 모든 기기에서 사이트가 잘 보여지게 하기 위해서 사용합니다. 반응형 사이트를 만들 때면 꼭 필요합니다. 

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

 

이외에도 메타 태그의 종류는 다양합니다. 많이 쓰이는 것 위주로 정리해보겠습니다. 

 

4. 해당 문서의 제목

<meta name="title" content="페이지 제목">

ex) <meta name="title" content="하루에 1000만원 버는 방법">

 

5. 해당 문서의 저자(작성자)

<meta name="author" content="페이지 작성자">

ex) <meta name="author" content="나는부자">

 

6. 해당 문서에 대한 요약 설명

<meta name="description" content="페이지에 대한 요약 설명">

ex) <meta name="description" content="이 문서에서는 하루에 1000만원 버는 방법에 대해서 알려드립니다. 여러분도 의심하지 마시고 저만 잘 따라하시면 모두 부자가 되실 수 있습니다.">

 

7. 문서 작성시 사용한 편집기

<meta name="generator" content="페이지 작성시 사용한 편집기">

ex) <meta name="generator" content="visual studio code">

 

8. 키워드 정리

<meta name="keywords" content="키워드를 콤마로 구분하여 나열">

ex) <meta name="keywords" content="돈, 부자, 방법">

 

9. 사이트 주제

<meta name="Subject" content="사이트주제">

ex) <meta name="Subject" content="부자양성블로그">

 

10. 캐시(cache) 방지

<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Expires" content="-1">

 

해당 페이지에 대해 캐시를 못하게 막아야 하는 경우에 사용합니다. 캐시를 못하게 하면 모든 정보를 서버로부터 새로 가져와야 하기 때문에 페이지가 로드되는데 조금 더 많은 시간이 소요될 수 있습니다. 반면 페이지를 꾸며주기 위해 변경해준 CSS 파일 등이 바로바로 적용된다는 장점은 있습니다.

 

11. 검색 로봇 수집 허용

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

 

제가 사용해본 메타 태그 위주로 정리를 해봤는데, 이외에도 정말 많은 것들이 있습니다. 제가 언급하지 않았지만 많이 사용되는 메타 태그가 있다면, 댓글로 알려주시면 학습한 후 추가하도록 하겠습니다. 감사합니다.