메뉴 보이기
Profile
이온디

2013.03.05

Meta

Meta Tag(메타태그) 사용법

조회 수 6850 추천 수 0
1. <meta> 태그
  - <meta>태그는 <head>태그 부분에 정의
  - 검색 키워드, 문자셋, 페이지 자동 이동 등의 기능을 함
  - ex)
    <meta name="속성명" content="내용">
 
2. <meta>태그의 name 속성
  - author : 제작자 명을 표시
  - copyright : 저작권을 표시
  - keyword : 검색 엔진에 키워드 제공
  - description : 페이지의 내용을 요약, 검색 엔진의 소개글
  - generator : 홈페이지 제작에 사용된 웹 에디터를 기록
  - pragma : no-cache로 지정하면 홈페이지 내용이 캐시에 남지 않음
  - expires : 페이지의 만료 시간을 표시
  - reply-to : 메일 주소 및 작성자 이름을 기록
  - title : 홈페이지에서 다루고 있는 내용의 제목을 기록
  - subject : 홈페이지에서 다루고 있는 내용의 주제를 기록
  - publisher : 홈페이지에 대해 책임을 지고 있는 단체나 회사를 기록
  - other agent : 홈페이지에 대해 책임을 지고 있는 사람을 기록
  - date : 홈페이지를 만든 날짜를 기록
  - classification : 어떤 형식의 홈페이지인지 분류
 
3. 문자 지정
  - 최신 버전 웹 브라우저는 언어를 자동으로 지원한다.
  - 하지만 낮은 버전 웹 브라우저는 지원하지 않음
  - 문자 지정을 해주어야 언어가 깨지지 않고 나옴
  - 지정 방법
   익스플로러 : <meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
   넷스케이프 : <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 
4. 자동으로 페이지 이동
  - 일정 시간이 지나면 자동으로 지정한 페이지로 이동
   기본 문법 : <meta http-equiv="refresh" content="초 단위 시간; url=이동할 문서의 전체 경로">
                  <meta http-equiv="refresh" content="10; url=http://www.naver.com">
 
5. 장면 전환 효과
  - 문서가 열리거나 닫힐 때 특정 모양의 효과를 부여
   <meta http-equiv="실행 시기" content="전환 방법(duration=시현 시간, transition=효과 종류)">
  - 속성
    page-enter : 문서를 열 때
    page-exit : 문서를 닫을 때
    blendtrans : 점점 밝게 또는 점점 어둡게
    revealtrans : 문서 전환 효과 지정
    duration : 시현 시간 지정
    transition : 24 종류의 장면 전환 효과 지정
[출처] <meta> 태그|작성자 Reon

메타태그 속성 정리
<META HTTP-EQUIV="Expire" CONTENT="-1">
   :캐쉬 완료(파기)시간 정의.
<META HTTP-EQUIV="Last-Modified" CONTENT="Mon,20 Jul 2007 19:30:30">
   :최종수정일을 정의.
<META HTTP-EQUIV='Cache-Control' CONTENT='no-cache'>
<META HTTP-EQUIV='Pragma' CONTENT='no-cache'>
   :캐쉬가 되지 않게 하는 태그


문자셋 지정 - 웹문서의 언어 설정.
<META HTTP-EQUIV="Content-type" content="text/html; charset=UTF-8">

<META HTTP-EQUIV="Imagetoolbar" content="no">
   :그림위에 마우스 오버시 이미지 관련 툴바가 생기지 않음.
<META HTTP-EQUIV="Refresh" content="15;URL=http://www.freegians.com">
   :페이지이동
<META HTTP-EQUIV="Page-Enter" content="RevealTrans(Duration=5/시간 초단위, Transition=21) ">
  :페이지 로딩시 트랜지션 효과(장면 전환 효과) 
<META name="Subject" content="홈페이지주제 입력">
<META name="Title" content="홈페이지이름 입력">


키워드 제공
<META name="Keywords" content="windows,browser,webdesign,XE,coding,웹,HTML5,웹표준,웹디자인,윈도우,윈도우즈">

요약 정보 제공
<META name="Description" content="설명문 입력">

제작자 정보 제공
<META name="Author" content="만든사람 이름">

<META name="Publisher" content="만든단체나회사 이름">
<META name="Other Agent" content="웹책임자 이름">
<META name="Classification" content="카테고리위치(분류)">
<META name="Generator" content="생성프로그램(에디터)">
<META name="Reply-To(Email)" content="메일주소 입력">
<META name="Filename" content="파일이름 입력">
<META name="Author-Date(Date)" content="제작일">
<META name="Location" content="위치">
<META name="Distribution" content="배포자">
<META name="Copyright" content="저작권">
<META name="Robots" content="ALL">
<META name="robots" content="index,follow" /> 
   : 이 문서도 긁어가고 링크된 문서도 긁어감.
<META name="robots" content="noindex,follow" />
   : 이 문서는 긁어가지 말고 링크된 문서만 긁어감.
<META name="robots" content="index,nofollow" />
   : 이 문서는 긁어가되, 링크는 무시함.
<META name="robots" content="noindex,nofollow" />
   : 이 문서도 긁지 않고, 링크도 무시함.

<META name="generator" content="저작 프로그램">  
홈페이지를 만드는데 사용한 프로그램 프로그램 이름을 넣으려면 content="EditPluse 3.0.2" 과 같은 식으로 적으시면 됩니다.  

<META name="author" contents="제작자 이름">  
홈페이지를 만든 제작자를 넣으려면 content="놀라운넘" 와 같이 적으시면 됩니다.  

<META name="keywords" content="Key or Tag"> 
홈페이지가 담고 있는 내용을 content="[Tip] META태그의 모든것" 와 같이 ',' 를 단어 사이에 넣어 나열하시면 됩니다.  검색엔진에서 검색어를 입력하고 찾기를 할 때 불러들이는 부분들입니다. 메타태그의 핵심기능이라고 할 수 있습니다.  
<META name="description" content="간략한 설명">  
홈페이지에 대한 간단한 소개글을 적습니다.  
<META http-equiv="refresh" content="3; url=http://tuning.egloos.com">  
3초 후에 http://tuning.egloos.com 로 자동으로 이동하게 하는 옵션입니다.   
<META http-equiv="Pragma" content="no-cache">  
캐쉬에서 해당 페이지를 읽어들이는 걸 방지합니다. 들어올 때마다 새로고침을 한 것과 같은 효과입니다.
<meta name="Subject" content=""> //홈페이지 주제 
<meta name="Title" content=""> //제목 
<meta name="Keywords" content=""> //키워드 
<meta name="Description" content=""> //요약설명 
<meta name="Author" content=""> //제작자 
<meta name="Publisher" content=""> //제작사 
<meta name="Other Agent" content=""> //웹책임자 
<meta name="Claasification" content=""> //카테고리위치,분류 
<meta name="Generator" content=""> //제작도구 
<meta name="Reply-To" content=""> //메일주소 
<meta name="Email" content=""> //메일주소 
<meta name="Filename" content=""> //파일이름 
<meta name="Author-Date" content=""> //제작일 
<meta name="Date" content=""> //제작일 
<meta name="Location" content=""> //위치 
<meta name="Distribution" content=""> //배포자 
<meta name="Copyright" content=""> //저작권
 
 
표시 부분은 꼭 써주자.
 
content=" 요 사이에 내용을 넣으면 됨 "
1. 키워드 : 검색 태그 종류
2. 요약 설명 : 홈페이지 간략 설명
3. 배포자 , 저작권 : 홈페이지 푸터에 들어가는 기업 및 단체의 이름 (한마디로 최종 클라이 언트)
 
---------------------------------------------------------------------------------------------------------
 
 
검색 로봇이 검색할때 필터링 하기
 
<meta name="Robots" content="ALL"> 
<meta name="Robots" content="index,follow"> //이 문서도 긁어가고 링크된 문서도 긁어감 
<meta name="Robots" content="noindex,follow"> //이 문서는 긁어가지 말고 링크된 문서만 긁어감 
<meta name="Robots" content="index,nofollow"> //이 문서는 긁어가고 링크는 무시함 
<meta name="Robots" content="noindex,nofollow"> //이 문서도 긁지 않고 링크도 무시함
 
---------------------------------------------------------------------------------------------------------
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="mykorea"> Webpage를 만든 사람 이름 <META name="keywords" content="html,tag,태그연습장,홈페이지제작,색상표"> 검색엔진에 의한 검색시 키워드 <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="HTML, 자바스크립트, javascript">
  <meta name="classification" content="HTML, 자바스크립트">
  <meta name="generator" content="나모에디터">
META 태그의 내용이 검색엔진의 로봇 엔진이 웹사이트를 검색할 때 도움을 주기는 하지만, 너무 길게 쓰는 것은 좋지 않습니다. 영문자를 기준으로 255자를 넘는 것은 바람직하지 않죠.
  <meta name="author" content="HTML 문서 작성자">
  <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://dhtmldot.com">
위의 예에서 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">
euc-kr 부분이 한글을 사용한다는 것을 의미하는 것입니다. 물론 iso 문자 셋으로 나타내어도 상관은 없습니다.
4) 캐쉬(Cache)제어 및 페이지의 만료시간 설정
explore나 netscape 등의 웹 browser는 열어본 페이지를 임시적으로 저장하는 캐쉬(Cache) 디렉토리라는 것이 있습니다. 이 캐쉬 디렉토리의 목적은 열어본 페이지를 다시 열 경우, 보다 빨리 문서를 열 수 있도록 하는 장점이 있는 반면, 보안상으로 중요한 문서가 그대로 디렉토리에 남아 정보가 유출되거나 혹은 페이지가 갱신되었을 때 갱신내용이 잘 반영되지 않거나 하는 단점도 있습니다. explore의 경우 "인터넷 옵션 -> 설정" 부분에서 explore를 열 때마다 새로 읽어올 것인지, 페이지를 열 때 마다 불러올 것인지 등을 지정할 수 있습니다.
HTML 문서에서 META 태그를 사용해서 캐쉬 디렉토리에 저장되지 않게 하거나,저장이 되었다 하더라도 특정 시간이 지나면 페이지가 만료되게 할 수 있습니다. 다음의 예를 살펴볼까요?
<meta http-equiv="Pragma" content="no-cache">
캐쉬에는 문서가 남지만 만료시간을 설정하여 시간이 지
[출처] META 태그에 대해서..|작성자 톡

Profile
7
Lv
이온디

이온디 홈페이지는 간결하며,

 손쉽게 수정할 수 있습니다.

0개의 댓글

에디터
번호 제목 날짜 조회 수
공지 [웹표준] 코딩 배울 수 있는 사이트 모음(HTML/CSS/JS/IMG/PHP) 2018.01.03 99
공지 [jQuery] jQuery를 배울수 있는 동네들입니다. 2013.08.09 19176
공지 [미분류] 관련 링크 2010.05.23 33743
139 [jQuery] 왼쪽에 숨겨진 레이어를 보여주자 2013.08.09 4251
138 [Script] 전체화면 레이어 팝업 소스 2013.08.09 12007
137 [웹폰트] Daum font로 Google Font API 따라잡기 2013.08.09 4050
136 [Script] News Ticker - 한줄 전광판, 한줄씩 올라가는 스크립트, 뉴스티커 2013.08.07 5733
135 [웹폰트] 구글 웹폰트 서비스 이용하기 2013.08.06 4522
134 [웹접근성] 웹 접근성 이슈 2013.08.06 5118
133 [HTML5] IE보완 - 조건부 주석 2013.08.06 4850
132 [웹접근성] 웹접근성이란 2013.08.06 3842
131 [HTML5] img style 속성 2013.03.12 5894
[Meta] Meta Tag(메타태그) 사용법 2013.03.05 6850
129 [부트스트랩] #2 부트스트랩의 특징 1 2013.03.04 5645
128 [부트스트랩] #1 부트스트랩이란? 2013.03.01 4089
127 [HTML5] HTML5 시멘틱 구조 태그 2013.02.28 4667
126 [부트스트랩] 부트스트랩의 아이콘 지원 브라우저 2013.02.25 3695
125 [부트스트랩] 기본 부트스트랩 템플릿 2013.02.24 4026
124 [PHP] 쿠키를 굽자 2013.02.22 3519
123 [Script] 자바스크립트로 CSS 불러오기 2013.02.22 4522
122 [UI] jquery menu slide 2012.12.16 9008
121 [Script] 로그인창 띄우기 2012.12.14 4686