메뉴 건너뛰기

Chsoo's HomePage공부방

HTML : Header에 쓰이는 Meta Tag에 관한 설명

2005.03.29 14:33 조회 수 7336 추천 60 / 0
참고 사이트  

META 태그라는 것이 HTML을 접하다보면 자주 보게 되지만, 자세한 설명을 접할 기회가 없어 궁금해지기도 합니다. META 태그는 사용안해도 상관이 없지만, 참 유용하게 사용이 되죠.

META 태그는 HTML문서의 <HEAD></HEAD>태그 사이에 사용되는데, explore나 netscape 같은 브라우저로 보았을 경우 META 태그는 우리의 눈에 보여지지는 않습니다. 대체로 META 태그는 문서의 등록정보를 나타내거나 일반 태그로는 구현할 수 없는 기능들을 구현하는 기능도 갖고 있습니다. 어느 경우에 사용이 되는지 몇 가지 예를 들어볼까요?

1) 다른 문서로의 이동
5초가 지나면 자동으로 다른 문서로 이동하게 하거나, 문서 내에 키워드를 삽입하여 검색엔진에 등록되도록 하거나 혹은 저작자정보 및 문서가 사용하는 문자세트(Character Set)를 정의하거나, 브라우저의 캐쉬(Cache)디렉토리 내에 문서의 저장 여부 등을 정의하는 데 많이 쓰입니다.
META태그의 기본구조는 <META name="이름" content="내용">입니다.
<META name="Subject" content="Meta태그강좌"> Webpage에서 다루고 있는 내용의 주제
<META name="Title" content="메타태그란?"> Webpage에서 다루고 있는 내용의 제목
<META name="Author" content="name"> Webpage를 만든 사람 이름
<META name="keywords" content="홈페이지제작, MetaTag"> 검색엔진에 의한 검색시 키워드
<META name="creation_date" content="September,01,2000"> Webpage를 만든 날짜
<META http-equiv="항목명" content="정보값" name="정보이름"> http-equiv="항목명" → http로 정보를 보낼 항목명 설정 content = "정보값" → 항목명으로 설정된 값 name = "정보 이름" → 몇개의 Meta정보의 이름을 정할 수 있으며 지정하지 않으면 http-equiv와 같은 기능.

1) 문서의 등록정보 표시
문서의 작성자 및 일반 등록정보 아래는 문서를 작성한 작성자 및 그에 대한 일반적인 등록정보를 META태그로 정의한 예입니다.

  <meta name="author" content="김창수">
  <meta name="description" content="HTML, 자바스크립트 강좌와 예제">
  <meta name="keywords" content="Meta, Html, Tag">
  <meta name="classification" content="Html, Meta">
  <meta name="generator" content="
Namo WebEditor v6.0">

META 태그의 내용이 검색엔진의 로봇 엔진이 웹사이트를 검색할 때 도움을 주기는 하지만, 너무 길게 쓰는 것은 좋지 않습니다. 영문자를 기준으로 255자를 넘는 것은 바람직하지 않죠.

  <meta name="author" content="문서 작성자">
  <meta name="description" content="문서에 대한 설명">
  <meta name="keywords" content="검색 키워드">
  <meta name="classification" content="분류">
  <meta name="generator" content="문서를 작성한 툴">

또 E-mail주소 및 작성자이름을 나타낼 수도 있는데, 다음과 같이 나타내주면 됩니다.
<meta http-equiv="Reply-To" content="E-mail주소(자신 이름)">
문서의 등록정보를 잘 표현하는 것도 검색엔진의 상위에 랭크되는 좋은 방법이기도 합니다.

2) 문서의 갱신 및 이동
HTML문서의 내용을 일정시간이 지나면 자동으로 갱신하게 하거나, 정해진 시간 후 다른 문서로 이동시키고자 할 경우에 사용합니다. 예를 들어, 문서를 1분마다 자동갱신시키고자 할 때는 다음과 같이 사용을 해주면 됩니다.

<meta http-equiv="Refresh" content="60">

또 5초 후에 main.html로 이동하고자 할 때는 다음과 같이 사용을 해주면 됩니다.

<meta http-equiv="Refresh" content="5"; main.html>

서로 연결되는 페이지를 순차적으로, 마우스 클릭 없이 자동으로 로딩되게 할 수 있습니다. 가장 유용한 경우는 홈페이지의 주소가 바뀌었을 때 사용을 해주면 되겠죠? 페이지가 열리면서 바로 이동을 시키면 되니까 content 값을 "0"을 주면 되겠네요.

<meta http-equiv="Refresh" content="0; URL=http://변경주소">

위의 예에서 http-equiv속성을 "refresh"로 지정해 준 것은 글자 그대로 갱신을 의미합니다. 그리고 content속성에서 세미콜론(;)앞의 숫자는 지정된 URL을 로드하기 전에 대기할 시간(초 단위)을 의미하며, 세미콜론 뒷 부분은 시간이 자동으로 연결될 문서의 URL을 의미합니다. 만약 초에 숫자를 주게 되면은 해당하는 초이후에 이동하게 되는데 변경 되었을 때의 주소와 설명을 적어주시는 것두 좋을거 같습니다.

3) 문서의 문자세트(Charset) 설정
이 부분은 MarkUp 언어의 특징이라고도 할 수 있는 부분입니다. XML이나 XHTML을 공부하게 되더라도 한번쯤 짚고 넘어가야 할 부분이죠. 아래예제는 HTML문서가 사용할 문자세트를 "한국어(euc-kr)"로 지정해주는 역할을 수행합니다.

한국어
<meta http-equiv="Content-Type" content="text/html;charset=euc-kr">
중국어
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
일본어
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">

euc-kr 부분이 한글을 사용한다는 것을 의미하는 것입니다. 물론 iso 문자 셋으로 나타내어도 상관은 없습니다.

4) 캐쉬(Cache)제어 및 페이지의 만료시간 설정
explore나 netscape 등의 웹 browser는 열어본 페이지를 임시적으로 저장하는 캐쉬(Cache) 디렉토리라는 것이 있습니다. 이 캐쉬 디렉토리의 목적은 열어본 페이지를 다시 열 경우, 보다 빨리 문서를 열 수 있도록 하는 장점이 있는 반면, 보안상으로 중요한 문서가 그대로 디렉토리에 남아 정보가 유출되거나 혹은 페이지가 갱신되었을 때 갱신내용이 잘 반영되지 않거나 하는 단점도 있습니다. explore의 경우 "인터넷 옵션 -> 설정" 부분에서 explore를 열 때마다 새로 읽어올 것인지, 페이지를 열 때 마다 불러올 것인지 등을 지정할 수 있습니다.

HTML 문서에서 META 태그를 사용해서 캐쉬 디렉토리에 저장되지 않게 하거나,저장이 되었다 하더라도 특정 시간이 지나면 페이지가 만료되게 할 수 있습니다. 다음의 예를 살펴볼까요?

<meta http-equiv="Pragma" content="no-cache">

캐쉬에는 문서가 남지만 만료시간을 설정하여 시간이 지나면 무효화시킬 수도 있습니다. 만료시간은 반드시 그리니치 표준시 형식으로 적어야 합니다.

<meta http-equiv="Expires" content="Mon, 05 Jan 2002 00:00:01 GMT">

META 태그에 대해 이제 어느 정도 이해가 가시죠? 검색엔진에서 상위에 랭크가 되는 방법은 공부를 별도로 해야 합니다. 서점에 가면 책이 한 권 자리가 있을 겁니다.

위 내용은 제가 예전에 홈피공부할 때 본 내용인데요 제가 조금 수정해서 올립니다. 참고 하시길 바랍니다.

번호 제목 글쓴이 날짜 조회 수
공지 이용하시면서.... 김창수 2001.06.15 8611
29 ZBXE(제로보드)에서 디카정보 표현하기 file 김창수 2008.07.24 7631
28 제로보드XE Ver 1.0.0 서버스 돌입 file 김창수 2008.03.18 9950
27 제로보드5(zb5) 개발 진행(현재 Beta 5.0.0.3) [1] file 김창수 2006.07.29 6621
26 디카게시판에 EXIF정보 표현하기 file 김창수 2006.04.20 6091
25 Layer를 이용한 메뉴 DB연동 (chsoo.pe.kr 사용됨.) [1] file 김창수 2006.03.21 6299
24 Layer를 이용한 메뉴(chsoo.pe.kr 사용됨.) [1] file 김창수 2006.03.21 4609
23 Swish MAX 각 효과 정리 Flash file 김창수 2006.01.25 5284
22 HTML문서에 주석 달기 김창수 2005.09.19 17729
21 JAVASCRIPT 이벤트 핸들러 정리 김창수 2005.07.11 9996
» Header에 쓰이는 Meta Tag에 관한 설명 김창수 2005.03.29 7336
19 기초적으로 알아두어야 할 HTML Tag정리 [2] 김창수 2004.12.22 6819
18 홈피 만들기(chsoo.pe.kr)제 홈피 과정입니다. 김창수 2004.07.18 7405
17 [PHP] 파일입출력 문법 (간단히) [1] 김창수 2004.07.08 9990
16 [PHP] 간단한 PHP 문법 [2] [1] 김창수 2004.06.23 7873
15 [HTML]색상 코드표 김창수 2004.06.19 5080
14 [PHP]Database, MySQL란? 김창수 2004.06.15 6775
13 [PHP]PHP에 대한 소개 김창수 2004.06.08 4813
12 [PHP]플래시로 보는 노프레임 홈 만들기! 강추(퍼옴) file 김창수 2004.05.16 6090
11 Tip 홈페이지 빠르게하는 [로딩속도를 높히는 10가지방법] 김창수 2004.05.12 4792
10 Tip 강좌 홈페이지(게시판)에 음악,동영상 바로보여주기 [3] 김창수 2004.03.06 5201
9 Tip 강좌 글자 흘러가는 Marquee Tag 이용하기 김창수 2003.12.06 4819
8 날짜마다 다른 페이지로 만들기 관리자 2003.07.31 4442
7 여섯번째 - a tag 익히기 관리자 2000.02.26 4224
위로