meta tag

웹 서버와 웹 브라우저간에 상호 교환되는 정보를 정의함

head tag 사이에 입력하는 특수 태그

사이트의 디자인에는 영향을 미치지않으며 문서가 어떤 내용을 담고 있는지, 키워드, 저자 등의 문서 자체의 특성을 담는다

(저자와 설명, 항목명을 추가(name, content, http-equiv))

검색엔진 결과 페이지에서도 사용됨

복수 지정시 콤마, 사용

 

종류

 

모바일 접속시 모바일 크기에 맞춤

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
<!-- initial-scale=1.0 은 초기 로드 시 줌 레벨 설정 -->
<!-- user-scalabl=yes 는 화면 확대 및 축소 여부 설정 (no설정 시 확대 및 축소 불가능) -->

문서 인코딩 방식 지정

<meta charset="utf-8" />

검색 엔진에 의해 검색되는 단어

<meta name="Keywords" content="키워드1, 키워드2, 키워드3, ..." />

검색 결과에 표시되는 문자를 지정

<meta name="Description" content="키워드1, 키워드2 ~ 를 활용한 페이지 만들기(웹페이지 설명에 대한 정의)" />

검색 로봇 제어

<meta name="Robots" content="noindex, nofollow" />
<!-- noindex(index 하지 않도록 함), nofollow(문서에 링크된 다른 문서를 긁어가는 것을 건너뜀) -->
<meta name="robots" content="index, follow" />
<!-- 문서, 링크 긁어감 -->
<meta name="robots" content="noindex, follow" />
<!-- 문서는 긁어가지 않음, 링크 긁어감 -->
<meta name="robots" content="index, nofollow" />
<!-- 문서는 긁어감, 링크 안 긁어감 -->

페이지 전환(자동으로 새로고침)

<meta http-equiv="refresh" content="10" url="https://www.naver.com" />
<!-- content 에 딜레이 값 입력, url에 띄워줄 주소 입력 -->
<!-- 접속자가 많을 때 임시방편으로 사용가능, 10초 후 해당 url 주소로 이동 -->
<meta http-equiv="refresh" content="30">
<!-- 30초마다 문서 새로고침 -->

브라우저 호환성

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

홈페이지 주제

<meta http-equiv="Subject" content="먼쥐 블로그" />

문서 제목

<meta name="title" content="문서의 제목" />

페이지 작성자 정의

<meta name="author" content="minji07" />

모바일 홈 화면 추가 시 어플 이름을 지정, 웹 애플리케이션이 아닌 때에는 이 속성을 사용할 수 없으며 문서 내에서 한번만 지정 가능함

<meta name="application-name" content="어플이름" />