FRONTEND/HTML, CSS

[HTML] 메타(meta) 태그

숭코기 2021. 2. 12. 17:09
728x90

 

메타(meta) 태그란?

 

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

HTML 문서의 <head></head> 사이에 입력하는 특수 태그로서 사이트의 디자인에는 전혀 영향을 미치지 않고

HTML 문서가 어떤 내용을 담고 있고, 그 문서의 핵심 키워드는 무엇이며, 누가 만들었는지 문자 세트 (언어 설정)는 어떤 것을 사용하는지 등의 정보를 담고있는 태그이다.

 

** 메타 태그는 닫는 태그가 없는 태그이다.

 

메타태그의 속성

 

메타태그 속성에는 http-equiv, name, content 3가지 속성이 있다.

 

- http-equiv="항목명"

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

 

- content="정보값"

meta 정보의 내용을 지정한다.

 

- name="정보 이름"

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

 

 

메타태그의 종류

  • Keywords : 검색엔진에 의해 검색되는 단어 지정
<meta name="Keywords" content="" />

 

  • Description : 검색 결과에 표시되는 문자 지정
<meta name="Description" content="" />

 

  • Robots : 검색 로봇 제어
<meta name="Robots" content="noindex, nofollow" />

 

- All (기본값) : 색인 생성이 게재에 대한 제한이 없다. 기본값이므로 명시적으로 표시해도 효과 없다.

- noindex : 검색 결과에 이 페이지를 표시 하지 않는다.

- nofollow : 이 페이지의 링크를 따라가지 않는다.

- noarchive : 검색결광 저장된 페이지 링크를 표시하지 않는다.

- Non : noindex, nofollow 와 같다

- index : 그 페이지를 수집대상으로 한다.

- Follow :  그 페이지를 포함해 링크가 걸린 곳을 수집대상으로 한다.

 

  • Charset : 문자 코드의 종류 설정
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 

  •  Date : 날짜-제작일
<meta name="Date" content="2020-02-12T05:35:20+09:00" />

 

  • Content-Script-Type : 웹 페이지에 쓰인 언어
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />

 

  •  X-UA-Compatible : 브라우저 호환성
<meta http-equiv="X-UA-Compatible" content="IE=edge" />

 

<meta http-equiv="Subject" content="홈페이지 주제" />

 

<meta http-equiv="Title" content="제목" />

 

<meta http-equiv="Author" content"페이지를 작성한 제작자명" />

 

<meta http-equiv="Publisher" content="제작사" />

 

<meta http-equiv="Other Agent" content="웹 책임자" />

 

<meta http-equiv="Generator" content="제작 도구" />

 

<meta http-equiv="Reply-To" content="메일 주소" />
<meta http-equiv="Email" content="google@gmail.com" />

 

<meta http-equiv="Filename" content="파일 이름" />

 

<meta http-equiv="Location" content="위치" />

 

<meta http-equiv="Copyright" content="저작권" />

 

<meta http-equiv="Distribution" content="배포자" />

 

<meta http-equiv="Build" content="제작 년,월,일" />

 

<meta http-equiv="Last-Modified" content="최종 수정일" />

 

  • Imagetoolbar : 그림 위 마우스 오버시 이미지 관련 툴바 생기지 않게 하기
<meta http-equiv="imagetoolbar" content="no" />

 

  •  Cache-Control / Pragma : 캐쉬가 되지 않도록 하기 위해 정의
<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="Pragma" content="no-cache" />

 

<meta http-equiv="Expires" content="캐쉬 만료일" />

 

  •   Refresh : 새로고침 (60초마다 새로고침)
<meta http-equiv="Refresh" content="60" />

 

  • Refresh : 입력한 주소로 5초후 이동
<meta http-equiv="Refresh" content="5;url="주소" />

 

  •  Page-Enter : 페이지 들어갈 때 장면 전환 효과
<meta http-equiv="Page-Enter" content="revealtrans(Duration=1,Transition=12)" />

 

 

 

 

 

 

728x90