메타(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)" />
'FRONTEND > HTML, CSS' 카테고리의 다른 글
| [CSS] margin과 padding (0) | 2023.05.11 |
|---|---|
| [CSS] %와 vh/vw 차이 (0) | 2023.04.30 |
| [CSS] 네이밍 규칙 (0) | 2023.03.24 |
| [CSS] 적용 우선순위 (0) | 2023.03.16 |
| [CSS3] gradient (liner-gradient) (0) | 2023.02.03 |
