[HTML] Meta 태그

HTML에서 meta 태그에 대해 알아보도록 하겠습니다.

Meta

meta 태그는 보이지 않는 태그라고 볼 수 있습니다. 즉 meta는 부가적인 정보를 보여주는 것이죠.

 

예를 들어 구글에 넷플릭스를 검색하고 아내와 같은 로그인 링크를 볼 수 있는데, 그 아래 세부 정보중 '스마트 TV, 태블릿...'과 같은 텍스트를 확인할 수 있습니다. 이것을 넷플릭스 홈페이지의 개발자 도구를 통해 확인해보면 meta의 content 안에 그대로 들어가 있는 것을 확인할 수 있습니다.

그리고 meta 태그는 닫는 태그가 없이 사용됩니다.

<meta />

위에서 봤던 것처럼 meta 태그는 두 개의 속성을 가지고 있습니다. 바로 name =""과 content =""입니다. 

Meta 태그 활용

meta 태그는 위와 같이 문서의 정보를 담고 있는 태그입니다. 실제 웹을 설계하고 구축할 때 필수적으로 들어가야 되는 문서의 정보인 것이죠. meta는 활용 용도에 따라 다양하게 나타날 수 있는데, 아래와 같이 이용 가능합니다.

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  <!-- 해당 문서의 언어 설정 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <!-- 렌더링 모드 설정 아래에 설명이 있습니다.-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes"> <!-- 모바일에서 접속시 모바일크기에 맞춘 화면을 렌더링설정 -->

<meta name="title" content="이 문서의 제목은 000 입니다. "/> 
<meta name="keyword" content="키워드1,키워드2,키워드3, .... "/> 
<meta name="author" content="000"/>
<meta name="description" content="이 문서는 html 소개를 위한 문서입니다. ~~~~ "/>

utf-8

meta태그 중에 가장 중요한 태그 속성이 있는데, 바로 utf-8입니다. 

<meta charset="utf-8">

이 태그를 사용하면 한글이나 다른 특수문자가 있는 언어를 입력할 때 브라우저가 그 문자들을 이해하지 못할 때가 있는데 이 매타 태그를 사용하게 되면 정상적으로 텍스트가 보이게 됩니다. 그러므로 반드시 html에 사용해야 하는 태그입니다. 

SEO 검색 엔진 최적화

meta 태그를 사용하여 SEO 검색 엔진을 최적화할 수 도 있는데, 이는 아까 전에 나왔던 넷플릭스 부분을 보면 됩니다.

<meta name="keywords" content="html, CSS, JS" />
<meta name="description" content="HTML,CSS,JS 를 활용한 웹페이지 만들기" />

만약 html, css, js를 소개함과 동시에 웹 페이지를 만드는 방법을 소개하는 웹페이지라면, 위와 같이 그 문서의 키워드인 'html', 'css', 'js' 단어를 "keywords" meta 태그에 담을 수 있습니다.

 

그리고 'HTML, CSS, JS를 활용한 웹페이지 만들기'라는 html 문서 소개를 "description" meta 태그에 담을 수 도 있죠.

 

이들 meta 태그를 그 html 문서의 사이에 넣어 두는 것입니다. 검색 엔진(로봇) 이 웹 문서를 검색할 때 "keywords", "description" meta 태그를 통해 검색하는 경우가 있기 때문입니다.

 

검색엔진에서 검색어를 입력하고 엔터를 치면 검색엔진은 입력한 검색어와 같은 단어가 keywords, description meta 태그 내에 등장하는 문서를 찾아내서 검색 결과를 통해 보여주게 됩니다.

TIP

 

 

요약해 말하자면 가장 중요한 것은 description 이고 이것이 구글이 검색할 때 찾는 태그이다.

웹 검색 엔진에 검색 피하는 방법

반대로 웹 검색 엔진 로봇에 검색이 안되도록 숨겨줄 수도 있습니다.

 

웹 크롤러(Web crawler)는 웹 상의 여러 문서들을 긁어서 문서를 적당한 형태로 저장합니다. 웹 크롤러는 기본적으로 긁어 온 웹 페이지 내용을 캐시 형태로 저장해서 매 검색 시마다 웹 전체를 뒤지지 않고 저장된 캐시를 검색해서 빠른 속도로 검색 결과를 보여줍니다.(구글의 '캐시')

 

대표적으로 구글 혹은 네이버는 웹 페이지를 긁어 오는 작업을 정기적으로 하고 있으며, 크롤링을 자주 하는 곳일수록 캐시 내에 최근 내용이 저장되어 있으므로 보다 최신의 검색 결과를 보여줍니다.

 

여기서 문제는 웹에 이런 웹 크롤러(web crawler)들이 아주 많이 떠돌아다니고 있어서 외부에 노출하고 싶지 않은 문서까지 공개될 수 도 있으며, 심지어 저장될 수 있습니다.

 

이것을 방지하기 위해 robots라는 meta 태그를 사용하면 됩니다.

<meta name="robots" content="noindex, nofollow" />

위 태그는 웹 크롤러가 수집을 할 때, index 하지 않도록 하는 작업입니다. nofollow는 문서에 링크된 다른 문서를 긁어가는 것을 건너뜁니다.

<meta name="robots" content="index,follow" /> <!--이 문서도 긁어가고 링크된 문서도 긁어감.-->
<meta name="robots" content="noindex,follow" /> <!--이 문서는 긁어가지 말고 링크된 문서만 긁어감.-->
<meta name="robots" content="index,nofollow" /> <!--이 문서는 긁어가되, 링크는 무시함.-->
<meta name="robots" content="noindex,nofollow" /> <!--이 문서도 긁지 않고, 링크도 무시함.-->

---

오늘은 이렇게 meta 태그를 사용하는 방법에 대해 알아보았습니다.

 

읽어주셔서 감사합니다🤟

 

참고 문헌 REFERENCE

[HTML] Meta 태그란 무엇인가?!