meta tag ?
- 문서의 자체 특성을 담고 있습니다.
- 검색엔진에게 문서의 내용을 요약해주기도 하며, 웹 브라우저에게 정보를 전달하는 역활도 합니다.
- 메타태그를 잘 입력하면 SEO에 유리합니다.
메타태그 속성정리
charset
- HTML 문서의 문자 인코딩을 지정
content
- meta 정보의 내용을 지정
name
- meta 정보의 이름을 지정
- 보통 검색엔진에게 정보를 전달하기 위한 속성
http-equiv
- content 속성에 명시된 값에 대한 HTTP 헤더를 제공
- HTML문서가 웹브라우저에 전송되었을때만 의미를 가짐
- 보통 웹브라우저가 서버에 정보를 전달하기 위한 속성
메타태그 활용정리
<meta name="viewport" content="width=device-width, initial-scale=1">
# 반응형 사이트를 위해 설정합니다
<meta http-equiv="title" content="meta tag" />
# 페이지 제목을 지정합니다
<meta name="keywords" content="meta tag 정리">
# 검색 엔진에 의해 검색되는 단어를 지정합니다
<meta name="description" content="meta tag 정리 입니다">
# 검색 결과에 표시되는 문자를 지정합니다
<meta http-equiv="author" content="name" />
# 페이지 제작자를 지정합니다
<meta http-equiv="publisher" content="company" />
# 페이지 제작사를 지정합니다
<meta http-equiv="reply-To" content="test@naver.com" />
<meta http-equiv="email" content="test@naver.com" />
# 메일 주소를 지정합니다
<meta name="robots" content="noindex, nofollow">
# 검색로봇에 대한 명령입니다. content 속성에는 다음과 같이 지정할 수 있습니다
- all : “index, follow” 를 지정한것과 같습니다
- none : “noindex, nofollow” 를 지정한것과 같습니다
- index : 페이지를 수집대상으로 합니다
- noindex : 페이지를 수집대상으로 하지 않습니다
- follow : 페이지를 포함해 링크가 걸린 곳을 수집대상으로 합니다
- nofollow : 페이지를 포함해 링크가 걸린 곳을 수집대상으로 하지 않습니다
HTML 5
<meta charset="UTF-8">
HTML 4.01
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
# 문자 인코딩을 설정합니다
<meta http-equiv="X-UA-Compatible" content="IE=edge" >
# 브라우저 호환성을 지정합니다
<meta http-equiv="imagetoolbar" content="no" />
# 이미지 위에 마우스 오버시 이미지 관련 툴바가 생기지 않도록 합니다
<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="Pragma" content="no-cache" />
# 페이지를 cache에서 가져오지 않게 합니다
<meta http-equiv="Refresh" content="60" />
# content의 초마다 페이지 새로고침을 합니다
<meta http-equiv="Refresh" content="5;url=주소" />
# content의 주소로 5초후 이동합니다
