Ssemi Laboratory

« 2024/05 »
일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

메타 태그 (Meta tag)

<meta> 태그 설명 및 기본형식
meta태그는 <head>와 </head>태그에 입력하는 특수 태그입니다. 화면상에 직접 나타나지 않지만 많은 기능을 가지고 있습니다.

http-equiv란?
위에서 http-equiv라는 것이 나왔는데 이게 무엇일까요? http로 나누는 대화라는 글에서 http 헤더에 관해 자세하게 설명할 때, 서버가 클라이언트로부터 온 http request를 접수한 다음 http response를 다시 웹 브라우져로 보내 준다는 얘기가 있었습니다. 그 http response의 헤더를 각 (x)html 문서 별로 따로 설정할 수 있는 것이 http-equiv 메타 태그라고 이해하면 됩니다.
일반적인 순서는 다음과 같습니다.
사용자가 특정 문서로의 링크를 클릭
--> 웹 브라우져에서 생성된 http request를 웹 서버로 보냄
--> 웹 서버에서 접수한 뒤 http response와 함께 (x)html 파일(또는 그래픽, 싸운드...)을 TCP/IP를 이용해 전달
--> 웹 브라우져에서는 http response에 설정된 대로 전달받은 파일을 염.
이 때 전달받은 파일을 http 리스판스 헤더에 설정된 대로 열면서 개별 (x)html 문서에서 설정해 둔 http-equiv 메타 태그에 있는 내용 역시 써버에서 보낸 http 헤더에 첨가합니다.
<meta http-equiv="content-type" content="text/html; charset=euc-kr" />라면 웹 서버에서 클라이언트로 보내는 http 헤더에 있는 Content-type 이라는 마임 타입을 설정하는 부분을 http-equiv 메타 태그를 활용해서 개별 문서 별로 설정하는 것입니다.

◈ 한글 페이지라는 사실을 알릴 때
<meta http-equiv="content-type" content="text/html;charset=euc-kr">

웹 페이지를 기본적으로 한글 폰트로 인코딩할 때 사용됩니다. 홈페이지를 만들때 우리가 자주 사용하는 <font face="돋움">태그에서 글자체를 돋움으로 지정해도 브라우저에서 한글속성을 인식못해 아무 반응도 나타나지 않는 경우가 있는데 이 경우 사용합니다. 그리고 자바애플릿 실행시 한글이 깨져 나올때도 이 태그를 사용하여 해결하기도 합니다. 만약 깨지지 않을 경우 이 태그 사용시 반대의 결과가 발생하기도 합니다.
요즘에는 웹표준이 대세인지라 인코딩에 utf-8을 넣습니다

◈ 일정 시간 경과 후 자동으로 다음 페이지 로딩하기
<meta http-equiv="refresh" content="5;url=http://kr.yahoo.com">

자신의 홈페이지가 다른 곳으로 이동해 방문자가 이전의 홈페이지에 방문했을때 자동으로 바뀐 주소로 이동하게 하거나 첫 화면에 회사 로고를 몇 초 보여준 후 회사 메인 홈페이지로 들어가게 하거나 여러 장의 웹 문서를 슬라이드 효과를 나타내는 데 이용되는 태그 입니다. 위의 태그의 경우 5초후 야후(http://kr.yahoo.com)사의 홈페이로 이동한다는 뜻 입니다.

◈ trans meta 태그 효과
<meta http-equiv="page-enter" content="revealtrans (duration=3, transition=23)">

메타태그는 페이지를 나갈때나 들어올때 여러가지 효과로 페이지를 나타나게 하는 trans meta 태그입니다. 이 메타태그는 넷스케이프에서는 지원을 하지 않고 프레임을 가진 문서에도 지원을 하지 않는 단점이 있습니다.

◈ 캐쉬 효과
<meta http-equiv="pragma" content="no-cache">
읽을때마다 새로 고침 하지 않음 노 캐쉬합니다

캐쉬의 기간을 0으로 만들기 = 노 캐쉬 효과입니다

◈ 이미지 툴바 없애기
<meta http-equiv="imagetoolbar" content="no">

여러분이 익스플로어6.0 버전을 사용하고 있다면 이미지 위에 마우스를 가져갔을때 자그마한 툴바가 뜨는 것을 볼 수 있습니다. 위의 메타태그를 첨부하면 이미지 위에 마우스를 가져가더라도 툴바를 뜨지 않게할 수 있습니다.

◈ 문서의 제작자 정보 표시
<meta name="author" content="kic">

meta 태그는 html 문서의 정보를 나타내며 이를 브라우져나 다른 검색엔진에게 알려주는 역할을 한다. 다음의 meta 태그는 문서의 제작자를 표시해줍니다

◈ 검색엔진 키워드 검색에서 내 사이트 맨 위에 뜨게 하기
<meta name="keywords" content="홈페이지, 홈페이지, 홈페이지, 홈페이지, 홈페이지, 홈페이지, 홈페이지, 홈페이지">

검색엔진에서 키워드 검색을 해보면 출력되는 자료가 수없이 많습니다. 그 중에서 상위 리스트에 출력이 된다면 아마도 여러분의 홈페이지에 방문자수가 약간 늘어 날 것입니다. 그래서 위와 같은 태그를 홈페이지내에 삽입하면 "홈페이지"라는 키워드로 검색을 하면 일치도가 100%가 되어 리스트의 상위에 위치하게 됩니다. 홈페이지 홍보를 위한 좋은 방법이라고 생각이 됩니다.
이것을 악용한 사이트들 때문에 검색엔진도 많은 발전을 하게 되었습니다. 특히 구글처럼 링크 구조(Link structure) 기반의 자동화된 검색엔진은 메타 태그를 거의 무시합니다.

◈ 문서를 만든 도구(tool) 표시
<meta name="generator" content="editplus">

어떤 툴(tool)에 의해서 문서가 만들어졌는지 나타내줍니다

◈ 문서의 설명을 표시
<meta name="description" content="메타 태그 (meta tag) 테스트입니다">

(x)html 문서의 설명을 표시합니다. description 메타 태그 내에 페이지 요약을 넣을 때 가급적 20단어를 넘지 않아야 합니다. 검색 엔진은 description을 적당한 크기까지만 읽고 나머지는 임의로 무시합니다

◈ 검색엔진 피하기
<meta name="description" content="메타 태그 (meta tag) 테스트입니다">

robots 메타 태그의 content가 index이면 그 페이지는 긁어 갑니다. content가 follow면 그 페이지에 나온 모든 링크를 찾아 가서 링크된 문서도 긁어 갑니다. noindex면 그 페이지는 긁어가지 않습니다. nofollow면 링크를 확인해서 긁어가는 것을 건너 뜁니다.