html을 작성할때 많은 meta 태그가 사용된다.
특히 검색엔진에 등록할 때 meta 태그를 적어주면 검색에 관련된 키워드, 설명등등 용이하게 작용된다.
검색엔진에 등록할 경우
<meta name="keywords" content="웹 코딩의 기본" />
<meta name="description" content="웹의 관련된 코딩을 설명을 해주는 블로그" />
<meta name="author" content="이아임">
meta name="keywords" 같은 경우는 사용자가 검색했을 경우 이 키워드를 통해 검색이 된다.
meta name="description" 일 경우에는 그 키워드로 검색 후 이 사이트가 어떤 사이트 인지 설명을 적어주는 곳이다.
meta name="author" 일 경우에는 저작자의 표시다.
하지만 요새 사이트 같은 경우는 이 meta 태그를 악용하는 사례가 많기 때문에 전혀 다른 태그를 사용한다.
keywords 메타 태그는 무시하는 경우가 많지만 description과 author 메타 태그를 수집해서 검색에 반영하기 때문에 잘 작성해주는게 좋다.
description 메타 태그 내에 페이지 요약을 넣을 때 가급적 20단어를 넘지 않아야 한다.
검색 엔진은 description을 적당한 크기까지만 읽고 나머지는 임의로 무시하기 때문이다.
만약 지극히 개인적인 사이트이고, 사이트가 검색엔진에 노출되기를 원하지 않는다라고 한다면, robots 네임을 사용하면 되는데
<meta name="robots" content="index,follow" />
- 모든 걸 허용
<meta name="robots" content="noindex,follow" />
- 문서는 가져가지 않는 대신에 링크를 가져감
<meta name="robots" content="index,nofollow" />
- 문서를 가져가는 대신에 링크를 가져가지 않음
<meta name="robots" content="noindex,nofollow" />
- 문서와, 링크 둘가 가져가지 않음.
위에서 보면 대충은 이해가 될 것이다.
index의 경우 문서 허용, follow 일 경우 링크 허용이다.
index : 로봇이 문서 가져가기 허용
follow : 로봇이 링크 가져가기 허용
noindex : 로봇이 문서 가져가기 비허용
nofollow : 로봇이 링크 가져가기 비허용
웹 주소가 바꼇을 경우에는
<meta http-equiv="refresh" content="5; url=http://naver.com/" />
처럼 5초후에 naver.com으로 넘어가줘라란 뜻이다.
글씨가 깨질경우 인코딩 변경
필자가 개발하는 환경은 UTF-8 환경이기 때문에 utf-8로 포맷을 맞춘것이다.
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
html5에서는
<meta charset="utf-8">
로만 사용해도 된다.
원하는 입맛대로 뒤에 있는 charset을 바꿔주면 되겠다.
그리고 여기서 http-equiv가 있다.
서버가 클라이언트로부터 온 http request를 접수한 다음 http response를 다시 웹 브라우져로 보내준다.
그 http response의 헤더를 각 html 문서 별로 따로 설정할 수 있는 것이 http-equiv 메타 태그라고 이해하면 된다.
http-equiv 속성의 경우
Content-Type, refresh, default-style
이 있는데 Content-Type의 경우 문자 포맷 설정을 할때 사용
refresh 같은 경우는 요즘 웹 표준에서 권장하지 않는 방식이다. 그러므로 잘 사용하지 않는다.
default-style 같은 경우는 선호하는 스타일 시트 선택이다.