Saturday, October 28, 2006
HTML-CSS] 메타 태그 종류; META TAG 목록
<meta /> 태그의 내용은 브라우저 화면에 출력되지 않지만, 브라우저에게 사이트의 정보를 알려주는 기능을 가집니다.
<meta /> 태그는 <head> </head> 사이에 들어가 있어야 합니다.
이렇게
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr" />
현재 페이지의 인코딩을 알려주는 메타 태그가 가장 중요한 메타 태그입니다. charset=euc-kr 은 현재 페이지가 "한글 완성형"이라는 뜻입니다.
인코딩 메타 태그는, 타이틀 태그인 <title></title> 보다 위에 있어야 합니다. 그렇지 않으면 IE에서 웹페이지가 보이지 않는 경우가 있습니다. (▶▶ 블로거(blogger.com)의 인코딩 버그 완벽 해결법 참고)
<title>mwultong의 소설 / / 경장편소설 - 영원히 낯모를 사람의 일화 / /</title>
타이틀 태그는 "페이지 제목"입니다.
<meta name="Description" content="mwultong의 소설들" />
이것은 사이트나 페이지에 대한 "설명문"입니다. 되도록 짧고 명쾌한 설명이 좋습니다. 그렇지 않으면 검색엔진의 검색 결과에서, 페이지 본문이 나오지 않고, 이 설명문만 나오는 경우가 생깁니다.
<link rel="stylesheet" type="text/css" href="common.css" />
외부 CSS 파일을 불러옵니다.
<script type="text/javascript" src="lib.js"></script>
외부 자바스크립트 파일을 불러옵니다.
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
사이트에 아이콘을 지정하는 것입니다. 파이어폭스에서만 잘 됩니다.
<meta http-equiv="imagetoolbar" content="no" />
인터넷 익스플로러(IE)에서, 그림 위에 마우스를 가져가면 툴바가 나타나서 성가신데, 이 태그는 그 툴바를 나오지 않게 합니다.
<body>
부터는 웹페이지 본문입니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict ...
이것은 메타 태그는 아닙니다. 현재 웹문서가 "XHTML 1.0 Strict" 규약에 맞추어져 있다는 뜻입니다. HTML 문법에도 버전이 있습니다. 현재 많이 쓰이는 버전이 XHTML 1.0 입니다.
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
사용된 언어를 지정한 것입니다. 한국어로 작성할 때도 그냥 영문(en)으로 하는 것이 무난했습니다. 물론 이것도 메타 태그는 아닙니다. 그냥 태그일 뿐입니다.
<meta http-equiv="Content-Style-Type" content="text/css" />
스타일이 CSS 형식이라는 뜻입니다. 꼭 필요하지는 않습니다.
<meta name="generator" content="Blogger" />
웹 페이지를 만든 도구나, 최종적으로 출력한 프로그램 이름입니다. 없어도 상관없습니다.
<link rel="alternate" ... href="http://feeds.feedburner.com/mwultong" />
현재 사이트의 RSS 등의 피드를, 브라우저나 RSS리더기에게 알려주는 것입니다. (▶▶ [HTML/CSS] 사이트 피드 자동검출/자동인식(Autodiscovery) 태그 수정하기 참고)
피드를 제출하는 사이트일 경우에는 매우 중요한 태그입니다.
<meta name="keywords" content="소설,문학,단편소설">
이렇게 검색엔진에게, 참고할 검색어를 알려주는 태그도 있는데 이제는 쓰이지 않습니다.
<meta name="Robots" content="noindex, nofollow" />
검색엔진에게, 현재 페이지를 검색 대상에서 제외하도록 지시하는 태그입니다.
▶▶ Favicon (파비콘;사이트 아이콘) 넣는 법, Site Icon HTML Tag(태그); favicon.ico
<meta /> 태그는 <head> </head> 사이에 들어가 있어야 합니다.
한국어 완성형(euc-kr) 페이지의 메타 태그 예제
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr" />
<title>mwultong의 소설 / / 경장편소설 - 영원히 낯모를 사람의 일화 / /</title>
<meta name="Description" content="mwultong의 소설들" />
<link rel="stylesheet" type="text/css" href="common.css" />
<link rel="stylesheet" type="text/css" href="index.css" />
<script type="text/javascript" src="lib.js"></script>
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
<meta http-equiv="imagetoolbar" content="no" />
</head>
<body>
...
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr" />
<title>mwultong의 소설 / / 경장편소설 - 영원히 낯모를 사람의 일화 / /</title>
<meta name="Description" content="mwultong의 소설들" />
<link rel="stylesheet" type="text/css" href="common.css" />
<link rel="stylesheet" type="text/css" href="index.css" />
<script type="text/javascript" src="lib.js"></script>
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
<meta http-equiv="imagetoolbar" content="no" />
</head>
<body>
...
이렇게
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr" />
현재 페이지의 인코딩을 알려주는 메타 태그가 가장 중요한 메타 태그입니다. charset=euc-kr 은 현재 페이지가 "한글 완성형"이라는 뜻입니다.
인코딩 메타 태그는, 타이틀 태그인 <title></title> 보다 위에 있어야 합니다. 그렇지 않으면 IE에서 웹페이지가 보이지 않는 경우가 있습니다. (▶▶ 블로거(blogger.com)의 인코딩 버그 완벽 해결법 참고)
<title>mwultong의 소설 / / 경장편소설 - 영원히 낯모를 사람의 일화 / /</title>
타이틀 태그는 "페이지 제목"입니다.
<meta name="Description" content="mwultong의 소설들" />
이것은 사이트나 페이지에 대한 "설명문"입니다. 되도록 짧고 명쾌한 설명이 좋습니다. 그렇지 않으면 검색엔진의 검색 결과에서, 페이지 본문이 나오지 않고, 이 설명문만 나오는 경우가 생깁니다.
<link rel="stylesheet" type="text/css" href="common.css" />
외부 CSS 파일을 불러옵니다.
<script type="text/javascript" src="lib.js"></script>
외부 자바스크립트 파일을 불러옵니다.
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
사이트에 아이콘을 지정하는 것입니다. 파이어폭스에서만 잘 됩니다.
<meta http-equiv="imagetoolbar" content="no" />
인터넷 익스플로러(IE)에서, 그림 위에 마우스를 가져가면 툴바가 나타나서 성가신데, 이 태그는 그 툴바를 나오지 않게 합니다.
<body>
부터는 웹페이지 본문입니다.
유니코드(UTF-8) 페이지의 메타 태그 예제
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta name="generator" content="Blogger" />
<link rel="alternate" type="application/rss+xml" href="http://feeds.feedburner.com/mwultong" />
<title>mwultong Blog ― 소설 / IT</title>
<meta name="Description" content="소설 / IT" />
<meta http-equiv="imagetoolbar" content="no" />
<link rel="icon" type="image/png" href="http://photos1.blogger.com/blogger/2921/1916/1600/favicon.png" />
</head>
<body>
...
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta name="generator" content="Blogger" />
<link rel="alternate" type="application/rss+xml" href="http://feeds.feedburner.com/mwultong" />
<title>mwultong Blog ― 소설 / IT</title>
<meta name="Description" content="소설 / IT" />
<meta http-equiv="imagetoolbar" content="no" />
<link rel="icon" type="image/png" href="http://photos1.blogger.com/blogger/2921/1916/1600/favicon.png" />
</head>
<body>
...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict ...
이것은 메타 태그는 아닙니다. 현재 웹문서가 "XHTML 1.0 Strict" 규약에 맞추어져 있다는 뜻입니다. HTML 문법에도 버전이 있습니다. 현재 많이 쓰이는 버전이 XHTML 1.0 입니다.
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
사용된 언어를 지정한 것입니다. 한국어로 작성할 때도 그냥 영문(en)으로 하는 것이 무난했습니다. 물론 이것도 메타 태그는 아닙니다. 그냥 태그일 뿐입니다.
<meta http-equiv="Content-Style-Type" content="text/css" />
스타일이 CSS 형식이라는 뜻입니다. 꼭 필요하지는 않습니다.
<meta name="generator" content="Blogger" />
웹 페이지를 만든 도구나, 최종적으로 출력한 프로그램 이름입니다. 없어도 상관없습니다.
<link rel="alternate" ... href="http://feeds.feedburner.com/mwultong" />
현재 사이트의 RSS 등의 피드를, 브라우저나 RSS리더기에게 알려주는 것입니다. (▶▶ [HTML/CSS] 사이트 피드 자동검출/자동인식(Autodiscovery) 태그 수정하기 참고)
피드를 제출하는 사이트일 경우에는 매우 중요한 태그입니다.
그밖의 메타 태그
<meta name="keywords" content="소설,문학,단편소설">
이렇게 검색엔진에게, 참고할 검색어를 알려주는 태그도 있는데 이제는 쓰이지 않습니다.
<meta name="Robots" content="noindex, nofollow" />
검색엔진에게, 현재 페이지를 검색 대상에서 제외하도록 지시하는 태그입니다.
▶▶ Favicon (파비콘;사이트 아이콘) 넣는 법, Site Icon HTML Tag(태그); favicon.ico
tag: html
HTML | CSS | 자바스크립트 JavaScript
<< Home