meta태그

🤔meta태그란?

메타태그는 웹 서버와 웹 브라우저간에 상호 교환되는 정보를 정의하는데 사용합니다.

HTML 문서의 와 사이에 입력하는 특수 태그로서 사이트의 디자인에는 전혀 영향을 미치지 않고 문서가 어떤 내용을 담고 있고, 문서의 키워드는 무엇이며, 누가 만들었는지 등의 문서 자체의 특성을 담고 있는 즉, 문서 그 자체를 설명하는 태그이다. 닫는 태그가 없는 태그입니다.

🤗meta태그의 속성

• http-equiv="항목명

  웹 브라우저가 서버에 명령을 내리는 속성으로 name 속성을 대신하여 사용될 수 있으며, HTML 문서가 응답 헤더와 함께 웹 서버로부터 웹 브라우저에 전송되었을 때에만 의미를 갖습니다

• content="정보값"

  meta 정보의 내용을 지정합니다.

• name="정보 이름"

  몇 개의 meta 정보의 이름을 정할 수 있으며 지정하지 않으면 http-equiv 와 같은 기능을 합니다.

🧐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="이 문서의 제목은 XXX 입니다. "/> 
<!-- 검색 엔진에 의해 검색되는 단어를 지정합니다. -->
<meta name="keyword" content="키워드1,키워드2,키워드3, .... "/>
<!-- 페이지를 작성한 제작자명을 지정 -->
<meta name="author" content="000"/>
<!-- 검색 결과에 표시되는 문자를 지정합니다.-->
<meta name="description" content="이 문서는 html 소개를 위한 문서입니다. ~~~~ "/>
<!-- 최종 수정일을 정의 -->
<meta http-equiv="Last-Modified" content="Mon,20 Jul 2016 19:30:30" />
<!-- 그림 위에 마우스 오버시 이미지 관련 툴바를 생기지 않도록 하기 위해 지정 -->
<meta http-equiv="imagetoolbar" content="no" />
<!-- 캐쉬가 되지 않도록 하기 위해 정의.
    페이지를 cache에서 가져오지 않게 하며 항상 서버에 접속해서 페이지를 가져옵니다.
    그러므로 방문자의 브라우저가 항상 cache를 읽도록 해 놓아도 이것을 무시하고 페이지를 갱신합니다.-->
<meta http-equiv="Cache-Control" content="no-cache" /> 
<meta http-equiv="Pragma" content="no-cache" />
<!-- 캐쉬 만료일을 정의 -->
<meta http-equiv="Expires" content="Mon, 08 Sep 2016 10:10:10 GMT" />
<!-- 60초마다 새로고침을 정의 -->
<meta http-equiv="Refresh" content="60" />

🔧렌더링 모드 설정

기존 IE8 이하의 브라우저에서는 호환성 보기 버튼을 보신적이 있으실겁니다. 이는 웹표준을 지키지 않은 구 버전의 브라우저에서 관용모드로서 렌더링되게합니다. 시간이 흘러 웹표준을 지키는 브라우저들을 기준으로 제작된 웹페이지들은 이 호환성 보기 버튼이 굳이 필요하지 않음이 생겼고, 해당 브라우저의 최신 렌더링 모드로 작동하게 강제할 필요가 생겼습니다. 이에 메타태그를 이용하여 렌더링 모드를 강제하게 됩니다.

• IE=5 : 관용모드(quirks mode)로 지정된 DOCTYPE에 상관없이 IE5 렌더링 방식이 사용됩니다.
• IE=7 : IE7 표준모드로 지정된 DOCTYPE에 상관없이 IE7 표준 모드 렌더링 방식이 사용됩니다.
• IE=EmulateIE7 : IE7 에뮬레이션 모드로 지정된 DOCTYPE에 따라 IE7 표준모드나 관용모드로 렌더링됩니다.
• IE=8 : IE8 표준모드로 지정된 DOCTYPE에 상관없이 IE8 표준모드로 렌더링됩니다 .
• IE=EmulateIE8 : IE8 에뮬레이션 모드로 지정된 DOCTYPE에 따라 IE8 표준모드나 관용모드로 렌더링됩니다.
• IE=edge : 최신모드로 지정된 DOCTYPE에 상관없이 IE8 이상 버전에서 항상 최신 표준 모드로 렌더링됩니다.

🔧viewport설정

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

width 속성은 뷰포트의 크기를 조정합니다.. 특정한 숫자를 사용해 width=700라고 할 수도 있고 device-width와 같은 특정한 값을 사용할 수도 있습니다. 여기서 나온 device-width는 100% 스케일에서 CSS 픽셀들로 계산된 화면의 폭을 의미합니다. 또한 ' initial-scale=1.0' 은 초기 로드 시 줌 레벨을 설정함을 의미하며, 'user-scalable=yes' 라는 부분은 화면을 확대하거나 축소 함(줌인, 줌아웃)을 할 수 있도록 설정함을 의미합니다. 반대의 경우 no로 설정하시면 됩니다.

🔧SEO (검색엔진최적화) 설정

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

만약 html, css, js 를 소개함과 동시에 웹 페이지를 만드는 방법을 소개하는 웹페이지라면 위와 같이 그 문서의 키워드인 'html', 'css', 'js' 단어를 "keywords" 메타 태그에 담으며, 'HTML,CSS,JS 를 활용한 웹페이지 만들기' 라는 (x)html 문서 소개를 "description" 메타 태그에 담습니다. 이들 메타 태그를 그 (x)HTML 문서의 사이에 넣어 두는 것입니다. 검색 엔진(로봇) 이 웹 문서를 검색할 때 이들 "keywords", "description" 메타 태그를 통해 검색하는 경우가 있기 때문입니다. 검색엔진에서 검색어를 입력하고 엔터를 치면 검색엔진은 입력한 검색어와 같은 단어가 keywords, description 메타 태그 내에 등장하는 문서를 찾아내서 검색 결과를 통해 보여줍니다.

🔨검색 로봇 제어

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

웹 크롤러(Web crawler)는 웹 상의 여러 문서들을 긁어서 문서를 적당한 형태로 저장합니다. 웹 크롤러는 기본적으로 긁어 온 웹 페이지 내용을 캐쉬 형태로 저장해서 매 검색 시마다 웹 전체를 뒤지지 않고 저장된 캐쉬를 검색해서 빠른 속도로 검색 결과를 보여줍니다.(구글의 '캐쉬') 대표적으로 구글 혹은 네이버는 이렇게 웹 페이지를 긁어 오는 작업을 정기적으로 하고 있으며 크롤링을 자주 하는 곳일수록 캐쉬 내에 최근 내용이 저장되어 있으므로 보다 최신의 검색결과를 보여줍니다.

문제는 웹에 이런 웹 크롤러(web crawler)들이 아주 많이 떠돌아 다니고 있어서 외부에 노출하고 싶지 않은 문서까지 공개되며, 심지어 저장될 수 있습니다. 그것을 방지하고자 robots라는 메타 태그가 있습니다.
대표적인 사용방법으로 <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" />
  : 이 문서도 긁지 않고, 링크도 무시함.