홈으로 홈으로 | 무료회원가입 | 아이디/비번찾기 | 즐겨찾기
추천음악방송메인홈1대1상담음악방송청취
뽕짝아가씨(무료음악채널)
okTrot(무료음악채널)
전통가요(무료음악채널)

온라이브스토어(앱다운로드)

환상의뽕짝파티 무료음악
명작트로트메들리 무료음악
트로트메들리관광 무료음악
동영상노래방
가사검색

POP Player
신나는 고스톱
컴퓨터 오목
작은 음악다방
자동러시 웹플레이어신청

보안∵서버∵쿠키
윈도우∵프레임
이미지∵배경
시간∵달력∵계산
상태바∵타이틀바
음악∵영상
폼∵전송∵테이블
키보드∵마우스
효과∵링크∵메뉴
Script∵php
기타
PHP 강좌
윈도우관련팁
웹관련팁
홈페이지제작팁
기본강좌
레지스트리
윈도우서버
리눅스서버
Android
메타 태그(Meta Tag)란?
12년 전

메타 태그(Meta Tag)란?

이름에서 짐작할 수 있듯 (x)html 태그 중 하나이고 '메타', 즉, 문서 그 자체를 설명하는 태그를 메타 태그라 합니다. 일반 (x)html 태그는 문서 내용물을 어떻게 보이게 하는가를 규정하기 위해 마크 업을 합니다. 이와 달리 메타 태그는 (x)html 문서가 어떤 내용을 담고 있고, 그 문서의 핵심어는 무엇이며, 누가 만들었는지, 문자 세트는 어떤 것을 사용하는지 등의 메타 정보를 담고 있습니다.

메타 태그는,

  1. "empty tag" 중의 하나입니다. <b>볼드체</b>처럼 열고 닫는 태그가 다 있는것이 아니라 닫는 태그는 없습니다. 즉, </meta>라는 태그는 없습니다. 그러므로 xhtml의 경우 <meta ... />처럼 자체 내에서 /로 닫으면서 마무리되어야 합니다.
  2. 반드시 <head>~</head> 사이에 놓입니다.

메타 태그의 형태

메타 태그는,

<meta 속성="값" content="내용물" />

의 형태를 갖습니다.

예를 들면,

  • <meta name="author" content="뮤직트로트" />
  • <meta name="title" content="메타 태그란?" />
  • <meta http-equiv="refresh" content="5;url=http://www.abc.com/" />

"속성 = 값", 그리고 "content = 내용물"입니다. 자주 들르는 웹 페이지의 '소스 보기'를 해보면 문서 서두에 있는 메타 태그를 확인해 볼 수 있습니다. 지금 이 페이지를 확인해 볼 수도 있습니다.

메타 태그의 용도

기본적으로 (x)html 문서를 만들 때는 항상 메타 태그를 써주는 것이 좋습니다. 그 문서가 어떤 내용을 담고 있는지, 키워드는 무엇인지를 요약해 둔 내용이 있다면 검색을 하는 데 많은 도움이 되기 때문입니다. 대개 다음의 용도로 많이 쓰입니다.

검색 엔진에 등록할 때


<meta name="keywords" content="코미디 역사 코메디 발생 기원 희극" />
<meta name="description" content="코미디의 역사를 소개하는 글" />

예를 들어, 코미디의 역사를 소개하는 웹페이지라면 위와 같이 그 문서의 키워드인 '코미디', '역사' 같은 단어를 "keywords" 메타 태그에 담고 '코미디의 역사를 소개하는 글'이라는 (x)html 문서 소개를 "description" 메타 태그에 담습니다. 이들 메타 태그를 그 (x)html 문서의 <head>~</head> 사이에 넣어 두는 것입니다. 검색 엔진이 웹 문서를 검색할 때 이들 "keywords", "description" 메타 태그를 통해 검색하는 경우가 있기 때문입니다. 검색엔진에서 검색어를 입력하고 엔터를 치면 검색엔진은 입력한 검색어와 같은 단어가 keywords, description 메타 태그 내에 등장하는 문서를 찾아내서 검색 결과를 통해 보여줍니다.

성인물을 다루는 사이트의 경우 메타 태그를 남용해서 keywords에 sex 관련 단어를 많이 넣어 두기도 합니다. 그렇게 하면 sex 관련 단어 검색 시 자신의 페이지가 결과로 뜰 것이라고 믿기 때문입니다. 하지만 이제는 이런 용도의 메타 테그 활용은 거의 의미가 없습니다. 메타 태그를 상업적으로 '악용'한 페이지가 너무 많아서 제대로 된 검색 결과를 얻지 못한다는 점을 깨달은 검색엔진 회사들이(특히 구글처럼 링크 구조(Link structure) 기반의 자동화된 검색엔진) 메타 태그를 거의 무시하고 있기 때문입니다.

그런 한계에도 불구하고 메타 태그가 없는 것보다는 있는 쪽이 검색에 더 도움이 되므로 적절히 사용하는 것이 좋습니다. 이런 점은 주의해야 합니다. description 메타 태그 내에 페이지 요약을 넣을 때 가급적 20단어를 넘지 않아야 합니다. 검색 엔진은 description을 적당한 크기까지만 읽고 나머지는 임의로 무시합니다. 그리고, 검색 엔진은 메타 태그와 함께 웹 페이지의 제목(<title>에 담긴) 역시 중요하게 취급합니다. (x)html 문서 제목을 결정할 때 가급적 신중하게 하세요. URL도 마찬가지입니다. 한글 싸이트와 직접적 연관은 없긴 하지만 keywords 메타 태그의 경우 대소문자를 별개로 취급하기 때문에 구분해서 실을수록 좋습니다.

검색 엔진 피하기

검색엔진 회사가 사용하는 웹 크롤러(Web crawler)는 웹 상의 여러 문서들을 긁어서 문서를 적당한 형태로 저장합니다. 이 때 keywordsdescription 등이나 문서 길이, url, 제목 등의 메타 정보를 따로 관리하며 저장하지만 (x)html 문서 자체도 모두 긁어서 저장합니다.

일반적인 램보다 속도가 훨씬 빠른 캐쉬 메모리(cache memory)가 자주 하는 작업을 저장하고 있다가 cpu에서 요청이 오면 즉각 보내서 컴퓨터 작업 속도를 늘려주는 것처럼, 웹 크롤러가 긁어 온 웹 페이지 내용 역시 검색엔진의 모처에 캐쉬 형태로 저장해서 매 검색 시마다 웹 전체를 뒤지지 않고 저장된 캐쉬를 검색해서 빠른 속도로 검색 결과를 보여줍니다.(구글의 '캐쉬'가 그것입니다.) 검색엔진 회사는 이렇게 웹 페이지를 긁어 오는 작업을 정기적으로 하고 있으며 크롤링을 자주 하는 곳일수록 캐쉬 내에 최근 내용이 저장되어 있으므로 보다 최신의 검색결과를 보여줍니다.

문제는 웹에 이런 웹 크롤러(web crawler)들이 아주 많이 떠돌아 다니고 있어서 외부에 노출하고 싶지 않은 문서까지 공개되고 심지어 저장될 수 있다는 사실입니다. 그것을 해결하는 것이 robots라는 메타 태그입니다.

<meta name="robots" content="noindex, nofollow" />

name= 자리에 robots가 들어가 있고 content에는 noindex, nofollow라고 되어 있습니다. 이것에 대해 자세하게 알아 보기 전에 웹 크롤러가 어떻게 동작하는지 간단하게 알아 봅시다. 웹 크롤러가 최초 웹 서버에 도착하면 그 웹 서버 문서 디렉토리의 최상위(/)에 "robots.txt" 라는 문서가 있는지 점검 합니다. 만약 robots.txt라는 문서가 있고, 그 문서 안에


User-agent: *
Disallow: /

라는 내용이 담겨 있다면 /(문서 루트 디렉토리) 밑으로는 disallow, 즉, 허락하지 않는 것이므로 그 사이트의 문서를 긁지 않고 떠납니다.

그런데 이것은 실용성이 떨어집니다. 감추고 싶은 문서도 있긴 하지만 검색 엔진에 올려 두고 싶은 문서가 훨씬 더 많을 수 있으니까요. 제일 상위인 / 디렉토리에서 웹 크롤러를 차단하는 것은 사이트 전체를 건너 뛰게 하므로 실용성이 없습니다. 또 하나 문제가 되는 것은 독립적인 웹 서버를 사용하지 않고 웹호스팅 서비스나 계정을 사용하고 있는 경우 "Document Root"에 robots.txt 문서를 넣어두기는 힘들다는 점입니다.

그럴 때 사용하는 것이 robots 메타 태그입니다. robots 메타 태그는 웹크롤러가 긁어갈 것인지 말 것인지를 개별 문서 별로 설정할 수 있습니다. 사용법은 간단합니다. robots 메타 태그의 contentindex이면 그 페이지는 긁어 갑니다. contentfollow면 그 페이지에 나온 모든 링크를 찾아 가서 링크된 문서도 긁어 갑니다. noindex면 그 페이지는 긁어가지 않습니다. nofollow면 링크를 확인해서 긁어가는 것을 건너 뜁니다.

즉, 다음과 같은 네 가지의 조합이 나옵니다. 목적에 맞게 사용하면 됩니다.


<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="refresh" content="5;url=http://www.abc.com/" />

이런 것 많이 보았을 것입니다.

"이 페이지는 10초 후에 자동으로 새 페이지로 이동합니다. 아무 변화가 없으면 밑의 링크를 클릭하세요."

이것을 할 때 메타 태그를 사용합니다. 위 코드에서 content= 다음에 몇 초만에 넘어가게 할 것인가 숫자를 적고 콜론(;)을 한 다음 url=에 이동할 페이지의 url을 적으면 됩니다. 간단하죠? 이 한줄을 예전 (x)html 문서 <head>~</head> 사이에 넣어 두면 지정된 시간 경과후 새 url로 자동으로 넘어갑니다. 시간은 0.1, 0.5등 1초 미만도 가능합니다. 즉시 넘어 가게 할 때는 1초 미만으로 하면 됩니다.

만약 url을 원래 페이지와 똑같이 해 놓으면 어떻게 될까요? 몇 초마다 그 페이지가 '다시보기'(reload)됩니다. 그럴 필요가 있을 지는 모르겠지만 원한다면 그렇게 사용할 수도 있습니다.

한글 페이지라는 사실을 알릴 때

<meta http-equiv="content-type" content="text/html; charset=euc-kr" />

웹 페이지를 디스플레이 하는 문자 세트(character set)를 지정할 때 메타 태그를 사용합니다. 사용자 웹 브라우져에서 인코딩 방식을 특별히 한글로 해놓지 않더라도 위와 같은 메타 태그가 들어있는 웹 페이지는 한글 문자 세트를 이용해서 한글로 보여집니다. 이 메타 태그 역시 필수적으로 넣어두면 좋습니다. 특히 외국에서 영문 웹 브라우져로 접속하는 사람들을 위해서입니다. 영어 웹 사이트를 위주로 써핑하는 사람의 경우 브라우져 문자 세트를 영어로 해 놓고 있을 가능성이 높습니다.

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 메타 태그를 활용해서 개별 문서 별로 설정하는 것입니다.

추천추천 : 298 추천 목록
번호 제목
3,016
 우클릭 완벽차단 스크립트
3,015
 iframe 높이 100% 맞추기
3,014
 curl 함수를 이용한 HTTP REFERER 변경
3,013
 윈도우10 시스템 파일 및 Dism 검사
3,012
 텍스트 줄바꿈, 글자자르기 CSS
3,011
 jQuery Mobile에서 유용한 코드 10가지.
3,010
 [PHP] dirname()함수와 $_SERVER 관련 상수들
3,009
 [PHP] 파일 크기, 사이즈 불러오는 함수, filesize()
3,008
 [jQuery] jQuery Quick API
3,007
 [ transition ] 링크 hover 색상 변화 속도 조절
3,006
 PHP 5.3.0 에서 사라진 함수들 대체
3,005
 어떤 파일들이 include 나 require 되었는지 확인하는 함수(get_included_files)
3,004
 PHP 날짜 형식 및 계산하기(날짜 더하고 빼기)
3,003
 jQuery Mobile에서 유용한 코드 10가지.
3,002
 값이 배열 안에 존재하는지 확인하는 in_array함수
3,001
 사용자가 웹브라우저에서 뒤로가기를 했을때 감지하는 방법
3,000
 [jQuery]버튼 활성화, 비활성화
2,999
 jQuery show() / hide() / toggle() 사용법
2,998
 jquery 여러가지 이벤트
2,997
 border-radius 속성
2,996
 네이버 오픈API 음성합성 API 사용하는 PHP 샘플코드
2,995
 UTF8 한글 자르기..
2,994
 iconv 에러 발생시 계속 처리하기 옵션
2,993
 [PHP] 현재 페이지의 도메인 , URL 정보 알아내기.
2,992
 [PHP] 막강 기능 배열..
2,991
 [CSS] - Input clear `X ` 버튼 제거 ( IE, Chrome, Firefox )
2,990
 [Mobile] - 모바일웹 Href 태그속성들
2,989
 [JqueryMobile] - 현재화면의 가로세로 사이즈 구하기
2,988
 [JqueryMobile] - 화면의 가로, 세로 사이즈 구하는 방법
2,987
 jquery로 가로 넓이(width), 세로 높이(height) 자동 조절
2,986
 iframe 높이 jquery로 자동조절하기
2,985
 jQuery 오른쪽 영역의 높이를 왼쪽 영역의 높이와 동일하게 하기
2,984
 jquery에서 테이블 짝수, 홀수 번째 TR 배경색 변경하기
2,983
 jquery에서 테이블에 마우스 오버시 해당 행의 배경색상 변경하기
2,982
 jquery 스크립트내 특정값 확인하기 (디버깅)
목록
인기절정뽕짝파티
인기트로트모음
지루박디스코메들리
밤무대애창곡
전자올겐경음악
세월따라노래따라
가슴시린트로트
트로트쌍쌍파티
7080추억속으로
종합성인가요방
못잊을옛날노래
카바레 음악
트롯디스코팡팡
관광 메들리
트롯카페
가요감상실
추억의옛노래
스페셜가요광장
BillBoard Free
추천가요모음
경음악.전자올겐
스페셜음악여행
WOLRD POPs
K-POP\BillBoard
JP\CN
POP TOP BEST
K.R.노래방

최신인기가요특집
추천가요\인기
F뮤직 인기\발라드
F뮤직 애창\트로트
트로트성인가요
인기가요
프리미엄 POP
경음악\기타
프리미엄 최신가요
프리미엄 성인가요
가요축제\트롯1번지
댄스\메들리\리믹스
카페\명상\경음악\기타
뮤직트로트 부산광역시부산진구 가야동 ㅣ 개인정보취급방침
Copyright (C) musictrot All rights reserved.