HTML 헤드 메타태그 종합 name, content...
charset 의 중요하다는 것은 지난 시간에 설명을 드렸습니다. 이제 meta tag 의 다른 속성들도 알아보려고 합니다.
메타 태그(meta tag)에는 문자의 인코딩을 설정하는 charset 이외에도 다른 중요한 태그들이 있습니다. 그리고 HTML의 버전과 브라우저, 브라우저 버전에 따라서 사용가능한 태그와 그렇지 못한 태그가 있지만, 최근의 브라우저 등은 메타 태그는 거의 다 지원을 하고 있으므로, 가급적 HTML 문서 작성 전에 코딩을 하기를 권합니다.
<meta charset> HTML5 전용
문서의 인코딩을 설정합니다.
일반적으로 <meta charset="utf-8"> 처럼 코딩을 하지만, HTML5 버전에서만 사용이 가능하므로, 이전 버전의 경우에는 <meta http-equiv="content-type" content="text/html; charset=utf-8"> 와 같이 코딩을 하셔야 합니다.
charset에 관한 자세한 설명은 http://theqoop.tistory.com/266 를 참조하시기 바랍니다.
<meta name>
meta name 에는 application-name, author, description, generator, keywords 등이 있습니다.
<meta name="author" content="qOOp"> 형식으로 코딩을 하면 됩니다.
author은 작성자를 나타내며, keywords는 현재 페이지의 키워드, generator는 HTML 문서의 작성 프로그램 즉, notepad++, editplus 등의 어떤 프로그램을 이용해서 작성을 하였는지를 나타내며, description은 현재 HTML 문서의 간략한 설명을 입력할 수 있습니다.
meta name에서 description, keywords 는 반드시 코딩을 하는 것이 좋습니다. 구글, 네이버, 다음 등의 로봇이 description의 내용과 keywords의 내용을 크롤하기 때문입니다.
왜 검색이 중요한지는 말씀을 드리지 않아도 잘 알고 있으리라 생각합니다.
<meta name="keywords" content="키워드1, 키워드2, 키워드3...."> 과 같이 입력을 하면 되지만, 너무 많은 키워드의 입력은 오히려, 검색 사이트에 따라서 역효과가 있을수 있으니, 중요한 키워드를 중심으로 5개 정도의 키워드만 사용하는 것이 좋습니다.
<meta name="description" content="해당 문서의 간략한 설명을 입력"> 은 해당 HTML 문서의 간략한 설명을 입력하면 됩니다.
( 스쿨버디 검색어 결과 )
어떤 키워드로 검색을 했을 경우, 해당 페이지의 제목과 링크 아래에 간단한 페이지의 설명 부분을 보여줍니다. description을 긴 장문으로 작성을 한다고 해도 검색사이트에서 다 나타나지 않으므로, 50~70 글자 정도로 함축하여 기술을 하면 될 것입니다.
<!DOCTYPE html>
<html>
<head>
<title>문서의 제목</title>
<meta charset="utf-8">
<meta name="description" content="문서의 간략한 설명 50~60자 정도">
<meta name="keywords" content="문서의 중요한 키워드, 콤마로 구분해서 입력">
<meta name="author" content="문서의 작성자">
</head>
<body> .... </body>
</html>
<meta http-equiv>
http-equiv에는 content-type, default-style, refresh 등이 있으며,
<meta http-equiv="refresh" content="30"> 이라고 설정을 하면, 30초 단위로 페이지를 새로고침을 합니다.
또한 <meta http-equiv="refresh" content="5;url=http://schoolbuddy.me"> 와 같이 지정을 하면, 5초 후에 해당 URL 주소로 자동으로 이동을 합니다.
<meta http-equiv="content-type" content="text/html; charset=utf-8"> 과 같이 HTML5 이전의 버전에서의 문자 인코딩도 설정이 가능합니다.
HTML 문서 작성시에 head 태그는 상당히 중요합니다. HTML 문서의 내용을 작성하는 것도 중요하지만, 그에 못지 않게 중요한 설정이 head 입니다.
'Web > Html' 카테고리의 다른 글
| [HTML5강좌] 본격적인 시작과 주석달기 (2) | 2015.01.17 |
|---|---|
| [HTML강좌] 헤드의 마지막 자바스크립트와 CSS (1) | 2015.01.12 |
| [HTML강좌] 메타태그, 글자가 깨어진다면 Charset를 확인하라 (1) | 2015.01.05 |
| [HTML강좌] DOCTYPE 이란? (2) | 2015.01.04 |
| [HTML 강좌] <head> -> <title> (헤드-> 타이틀) (0) | 2015.01.02 |