Meta tag는 웹페이지에 관한 정보를 제공하는 특별한 HTML 태그입니다.
일반적인 HTML 태그들과는 달리, 메타 태그는 웹페이지의 표현에는 영향을 미치지 않는데, 누가 그 페이지를 만들었으며,
얼마나 자주 갱신되는지, 그 페이지는 무엇에 관한 것인지 등과 같은 정보를 제공하며,
그 페이지의 내용을 함축적인 키워드로 표시합니다.
많은 검색엔진들이 인덱스를 만들 때, 이 정보를 이용하게 됩니다.
메타태그는 반드시 <head>태그안에 쓰여야 하며 empty elemet로서 닫는 태그가 없으므로 XHTML에서 작성될 경우
자체내에서 /를 써서 닫아주어야 합니다.
일반적으로 아래와 같은 형태를 가지며 각 META 엘레멘트는 특성과 값의 짝으로 명시됩니다.
name 애트리뷰트는 특성을 지정하고 content 애트리뷰트는 그 특성의 값을 지정합니다.
<meta 속성="값" content="내용" />
[종류]
* HTTP-Equivalent META Information
-서버측 환경설정과 관련된 정보를 싣고 있다.
-encoding, cashe 등 사용자 브라우저(user agent)의 구동 환경 정보를 담고 있다.
* Arbitrary User-Specified META Information
-사용자와 관련된 정보를 표시한다.(인덱스를 위한 키워드 정보, 제작자 정보 등)
[속성형식]
name :메타정보의 이름
content : 특성의 값을 나타 냄. http-equiv, name 속성과 관련된 내용 구성을 위한 정보
scheme : 특성 값을 해석하는데 사용 할 방식의 이름을 나타 냄. 컨텐츠 형식(예:ISBN)
http-equiv : HTTP 서버들에 보내는 문서별 HTTP 반응 메세지 헤더의 정보를 설정함.HTTP Response 의 Header Name
그밖의 애트리뷰트
lang (언어 정보), dir (글자 방향)
[META와 디폴트 정보]
META 엘레멘트는 다음과 같이 문서 디폴트를 지정 할 수 있습니다.
-디폴트 스크립트 언어.
-디폴트 스타일쉬트 언어.
-문서의 글자 인코딩.
글자 인코딩의 예:
<META http-equiv="Content-Type" content="text/html; charset=ISO-8859-5"> //영문일반
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr"> //한국어
- JIS 코드 : ISO-2022-JP
- EUC : EUC-JP
- 한국어 : kr
- 중국어 간체 : gb2312
- 중국어 변체 : big5
- 사용자 정의 : x-user-defined
[META의 NAME]
이 애트리뷰트는 name과 content 로 이루어지는데 키워드를 알려주거나 페이지 저작자등의 속성을 알려주는 데 사용합니다.
name의 값에는 keywords,subject,description등이 있습니다.
NAME="Description" - 문서의 요약
NAME="Keywords" - 검색어를 입력하며 각 검색어는 ,(콤마)로 분리함
NAME="Author" - 페이지 제작자, 저작권에 관한 표기
NAME="subject"-홈페이지의 제목
description의 사용예:
<META name="Description" content="html의 모든것,메타 테그의 상세한 설명!" >
description은 검색엔진이 해당하는 페이지를 찾고나서 간략한 요약을 표시해 줄때 사용합니다.
따라서 자신의 홈페이지에 대해 간략하고 효과적으로 설멍하여야 합니다.
Keywords 사용예:
<META NAME="Keywords" CONTENT="HTML, tags, reference, attributes, 태그강좌,">
자신의 홈페이지를 찾을때 해당하는 검색어를 지정하며 content란에는 해당하는 검색어를 넣어야 합니다.
author의 사용예:
<NAME="Author" CONTENT="hyunjung,Kim">
문서를 만든이의 이름을 넣습니다.
subject의 사용예:
<META name="Subject" content="메타 테그">
해당하는 페이지의 제목을 설정하는 부분이며 검색 로봇이 사용합니다.
META에서 content 애트리뷰트의 값에 언어를 지정하기 위하여 lang(언어) 애트리뷰트를 사용 할 수 있습니다.
이는 음성 합성기가 언어에 따라 적용되는 발음을 채용 할 수 있도록 해 줍니다.
제작자의 이름이 불어로 표시 된 예:
<META name="author" lang="fr" content="Arnaud Le Hors">
HTML Editor 정보:
<META name="editor" content="html superpro">
<META name="generator" content="editplus">
[메타태그의 scheme]
scheme애트리뷰트는 제작자에게 사용도구를 사용하는데 메타데이터의 바른 표현을 위하여 추가적 문장을 제공합니다.
이 속성을 사용하여 속성의 값을 해석할때 사용할수 있는 방법을 명시할수 있습니다.
이 방법은 <head>의 프로파일 속성에서 (이 문서을 더 잘 설명해 줄수 있는 관련된 프로파일의 URL)
지정한 프로파일에 정의되 있어야 합니다.
메타데이터가 다른 양식으로 되었는 경우 이와 같은 추가적인 정보는 매우 중요합니다.
예를 들어, 제작자는 날짜를 모호 한 양식 "10-9-97"으로 표현 할 수 있는데 이것이 1997년 10월 9일인지 1997년 9월 10일인지
알 수 없으므로 scheme 애트리뷰트 값 "Month-Date-Year"로 이 날짜 값의 모호함을 없앱니다.
다른 경우, scheme 애트리뷰트는 사용도구에게 그리 중요한 것은 아니지만 도움 정보를 제공합니다.
다음 예제에서, scheme은 사용도구에게 그 "identifier(지정자)" 특성 값이 ISBN 코드 번호라는 것을 알려 주어 도움을 줍니다.
<META scheme="ISBN" name="identifier" content="0-8230-2355-9">
scheme 애트리뷰트의 값은 특성 name과 연결 된 profile에 따라 달라집니다.
[META와 HTTP 헤더(header)]
http-equiv 애트리뷰트는 name 애트리뷰트 위치에 사용 할 수 있고 문서가 HTTP(Hypertext Transfer Protocol)을 통하여
열려 질 때 특별 한 의미를 가집니다.
서버가 클라이언트로부터 온 HTTP request를 접수한 다음 HTTP response를 다시 웹브라우저로 보내는 데
이때 HTTP response의 헤더를 각 문서별로 따로 설정할 수 있습니다. 이 때 사용되는 것이 http-equiv 애트리뷰트입니다.
서버와 클라이언트 간의 정보교환에서 순서는 다음과 같습니다.
1.사용자가 특정문서로 가는 링크를 클릭
2.웹 브라우저에서 생성된 HTTP request를 웹서버로 보냄
3.웹서버가 HTTP request를 접수한 뒤 HTTP response와 웹문서와 기타 요청된 문서를 TCP/IP를 이용해 전달함
4.웹 브라우저가 HTTP response에 설정된 대로 전달받은 문서를 표시함
전달받은 파일을 HTTP response header에 설정된 대로 열면서 개별 문서에 설정된 http-equiv에 정의된 내용도
서버에서 보낸 HTTP response header에 첨가합니다.
예를 들어
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
라고 선언되어 있을 때 클라이언트로 보내는 HTTP 헤더에 있는 Content-Type이라는 마임타입을 설정하는 부분을
http-equiv 애트리뷰트를 이용해서 개별 문서별로 설정할 수 있습니다.
http-equiv 애트리뷰트는 이름과 값의 쌍으로 이루어지는데 실제 문서를 보내기 전에 브라우저에 보낼
MIME (각 문서의 타입)문서 헤더에 이름/쌍 값을 포함시킬것을 서버에 지시하는 것입니다.
http-equiv 속성에는 Content-Type, Refresh, Expires 속성이 있습니다.
http-equiv ="Content-Type" - 웹문서의 언어를 설정합니다.
http-equiv ="Refresh" - 문서를 자동으로 업데이트 합니다.
http-equiv ="Expires" - 문서의 유효기간을 지정합니다.
-콘텐트 타입:
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=euc-kr">
콘텐트 타입이 문서안에 들어가지 않으면 간혹 홈페이지 글이 다른 언어로 깨어지거나 변형되는데 그 이유는
브라우저에서 콘텐트 타입을 인식하지 못했기 때문입니다. 콘텐트 타입은 언어마다 다르며 한국어는 charset=euc-kr 입니다.
-리프레시 업데이트 :
<meta http-equiv="REFRESH" content="5;URL=http://www.abc.com">
홈페이지를 방문하고 자동으로 다른 페이지로 이동하게 할 때 사용하며 content="시간;URL=이동할 주소" 의 형태로 작성합니다.
보통 "몇 초후에 자동으로 어디로 이동합니다"라는 안내문과 함께 많이 사용합니다.
-문서의 유효기간:
<META HTTP-EQUIV="expires" CONTENT="Sun, 30 Aug 1998 09:32:45 GMT">
보안에 관계되는 문서 같은 경우 한번 보고 나면 문서가 파기되며 다시 보려고 하는 경우 리로드해야만 보이는 웹문서가 있습니다.
보통 멤버쉽으로 운영되는 웹사이트에서 개인 프로필을 본 다음 다른 사이트로 갔다가 브라우저의 back버튼을 이용해서
프로필 화면으로 다시 가면 파기된 문서라는(Expires) 메세지를 받게 되는 경우에 해당됩니다.
GMT를 사용해서 표준시각으로 파기될 날짜를 지정할수도 있습니다.
[META와 검색 엔진]
일반적으로 META는 검색 엔진(search engine)의 검색 품질을 향상 시키기 위 해 키워드를 지정하는데 사용됩니다.
문서의 언어 관련 정보를 갖는 여러개의 META 엘레멘트가 제공 될 때는 검색 엔진은 lang 애트리뷰트의 필터(filter)를 거처
참조 된 언어를 사용하여 결과를 보여줍니다.
예를 들어
<-- 미국 영어 사용자를 위하여 -->
<META name="keywords" lang="en-us" content="vacation, Greece, sunshine">
<-- 영국 영어 사용자를 위하여 -->
<META name="keywords" lang="en" content="holiday, Greece, sunshine">
<-- 불어 사용자를 위하여 -->
<META name="keywords" lang="fr" content="vacances, Grèce, soleil">
<-- 한국어 사용자를 위하여 -->
<META name="keywords" lang="ko" content="휴가, 그리스, 햇빛">
검색 엔진의 효과를 높이기 위하여 LINK 엘레멘트로 한 언어에서 다른 언어로 번역을, 다른 미디어(예: PDF)의 문서 버전으로,
문서가 모듬 서류의 일부이면 그 모듬 서류의 시작으로 연결 시킬 수 있습니다.
검색엔진에 등록할 때
문서의 내용을 정의할 수 있는 키워드를 Keywords 메타태그에 넣고 description에 문서에 대한 소개를 작성하면
검색엔진이 웹문서를 검색할 때 이들을 통해 검색하여 결과를 보여줄 수 있습니다.
<meta name="Keywords" content="영화,Movie,영화배우,배우,시놉시스,줄거리,리뷰,review,개봉영화,영화소개">
<meta name="description" content="영화소개">
그러나 홍보를 노리고 지나치게 남용하는 페이지가 많아지는 문제 때문에 제대로된 검색결과를 얻어내지 못하게 되자
검색엔진이 메타태그를 무시하게 설정된 경우도 있습니다.
그렇지만 키워드가 없는것 보다는 있는 편이 검색에 도움이 되므로 적절하게 사용하도록 해야합니다.
보통 검색엔진은 description 내용이 20단어가 넘어가면 무시하는 경향이 있으므로 description은 되도록 간단하게 작성합니다.
오히려 <title>태그에 담긴 제목을 중요하게 취급하므로 이 태그에 문서의 내용을 대표할 수 있는 제목을 쓰는 것이 매우 중요하며
URL역시 마찬가지입니다. 또 Keywords에서 영문 대소문자는 별개로 취급하므로 구분해서 쓰는것이 중요합니다.
검색엔진에 노출시키지 않으려면
검색엔진이 사용하는 웹 크롤러(web crawler)는 웹상의 문서들을 긁어 모아 적당한 형태로 저장하는데
이때 Keywords와 description, URL, 문서의 제목, 문서의 길이 등의 메타정보를 따로 관리하여 저장하고
문서자체도 모두 긁어서 저장합니다. 이 정보들은 정기적으로 채집되어 검색엔진 내부에 캐쉬로 저장되어 있다가
검색시에 저장된 내용안에서 우선적인 결과를 보여줍니다.
만약 이런 크롤링에 노출되지 말아야 할 것까지 노출되지 않게 하려면 robots라는 애트리뷰트를 사용합니다.
<meta name="Robots" content="noindex,nofollow">
웹크롤러가 웹서버에 최초로 접근했을 때 서버 디렉토리 최상위에 'robots.txt'라는 문서가 있는지 체크하고 문서안에
User-agent:* Disallow:/
라는 내용이 있으면 /(문서루트디렉토리) 이하로 허용하지 않겠다고 설정되어 있으므로 문서를 크롤링하지 않고 떠납니다.
이 경우 노출할 문서와 노출하지 않을 문서가 모두 있을 경우 문제가 되며, 독립 서버를 사용하지 않고
웹호스팅 서비스나 계정을 사용하는 경우 루트에 robots.txt를 넣을 수 없으므로 메타태그의 robots를 사용하여 문서별로
검색노출 여부를 결정합니다.
<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 data profile)]
HEAD 엘레먼트의 profile 애트리뷰트는 메타 데이터 프로화일(Meta data profile)의 위치를 지정합니다.
profile 애트리뷰트의 값은 두가지 방식의 URI가 될 수 있습니다.
global name
브라우저는 프로파일을 읽어 들이지 않더라도 그 이름을 인식하고 그 프로화일에 대해 알려져 있는 방
법으로 작동 할 수 있습니다. 예를 들어 검색 엔진은 HTML 문서의 카탈로그를 통해 검색 작용를 제공
할 수 있는데, 여기서 이 문서들은 카타로그 엔트리를 표시하는데 모두 같은 프로화일을 사용합니다.
link
사용도구는 URI를 참조하여 프로화일에서 정의 한 내용에 따라 어떤 작동을 할 수 있습니다.(예를 들어
현재 HTML 문서에서 프로화일의 용도 지정) 이 규격은 프로화일의 양식을 정의하고 있지 않습니다.
문서의 인덱싱을 위한 유용한 특성들을 설정 한 가상 프로화일 예제:
이 프로화일에는 "author(제작자)", "copyright(저작권)", "keywords(키워드)", "date(날짜)" 둥의 특성들이 정의 되어 있고
값들은 META 선언 뒤에 옵니다.
<HEAD profile="http://www.acme.com/profiles/core">
<TITLE>양해 각서 표지를 완성하는 방법</TITLE>
<META name="author" content="John Doe">
<META name="copyright" content="© 1997 Acme Corp.">
<META name="keywords" content="corporate,guidelines,cataloging">
<META name="date" content="1994-11-06T08:49:37+00:00">
</HEAD>
[메타태그 사용 예]
<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=""> //저작권
<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 http-equiv="Content-Type" content="text/html; charset=euc-kr"> //웹문서 언어 설정
<meta http-equiv="Imagetoolbar" content="no"> //그림위에 마우스 오버시 이미지 관련 툴바 숨김
<meta http-equiv="Refresh" content="60"> //60초 마다 새로고침
<meta http-equiv="Refresh" ccontent="5;url=주소"gt; //주소로 5초후 이동
<meta http-equiv="Cash-Control" content="no-cache"> //캐쉬가 되지 않게
<meta http-equiv="Last-Modified" content="Mon,20 Jul 2008 19:30:30"> //최종 수정일
<meta http-equiv="Pragma" content="no-cache"> //캐쉬가 되지 않게
<meta http-equiv="Expires" content="Mon, 08 Sep 2003 10:10:10 GMT">"> //캐쉬 만료(파기)일
<meta http-equiv="Page-Enter" content="revealtrans(Duration=1,Transition=12)">
//페이지 들어갈때 트랜지션 효과(장면 전환 효과)
<meta http-equiv="Page-Exit" content="revealtrans(Duration=1,Transition=12)">
//페이지 나갈때 트랜지션 효과(장면 전환 효과)
장면 전환 효과 속성값
0: Box in : 네모난 박스가 바깥쪽에서 안쪽으로 모이며 나타남
1: Box out : 네모난 박스가 안쪽에서 바깥쪽으로
2: Circle in : 원이 바깥에서 안쪽으로
3: Circle out : 원이 안쪽에서 바깥쪽으로
4: Wipe up : 이미지의 아래에서 위쪽으로 수직 이동
5: Wipe down : 이미지의 위에서 아래쪽으로 수직 이동
6: Wipe right : 이미지의 왼쪽에서 오른쪽으로 수평 이동
7: Wipe left : 이미지의 오른쪽에서 왼쪽으로 수평 이동
8: Vertical blinds : 수직 블라인드가 쳐지는 형태로 변환
9: Horizontal blinds : 수평 블라인드가 쳐지는 형태로 변환
10: Checkerboard across : 바둑판 형태의 격자가 왼쪽에서 오른쪽으로 생성
11: Checkerboard down : 바둑판 형태의 격자가 위에서 아래로 생성
12: Random dissove : 안개와 비슷한 형태로 변환
13: Split Horizontal in : 양쪽에서 중앙으로 수평 이동
14: Split Horizontal out : 중앙에서 양쪽끝으로 수평 이동
15: Split vertical in : 위와 아래 끝에서 중앙으로 수직 이동
16: Split vertical out : 중앙에서 양쪽 끝으로 수직 이동
17: Strips left down : 대각선 형태로 오른쪽 상단에서 왼쪽 하단으로 이동
18: Strips left up : 대각선 형태로 오른쪽 하단에서 왼쪽 상단으로 이동
19: Strips right down : 대각선 형태로 왼쪽 상단에서 오른쪽 하단으로 이동
20: Strips right up : 대각선 형태로 왼쪽 하단에서 오른쪽 상단으로 이동
21: Random bars horizontal : 수평선이 무작위로 생성
22: Random bars vertical : 수직선이 무작위로 생성
23 : Random : 임의로 생성
