meta 태그

META 가 모지??????

　 메타태그란 무엇인가.

1. 메타 태그란?

웹페이지 제작에 있어서 메타태그란 아주 중요한 역할을 합니다. 이 메타 태그를 어떻게 효율적으로 작성하느냐에 따라서 여러분의 홈페이지가 검색엔진에서 검색이 될때 1위가 되느냐, 혹은 한참 뒤로 밀려서 2만등이 되느냐 하는것이 결정됩니다. meta tag는 meta data를 정의하기 위해서 사용됩니다. 메타 데이타란 것은 문서에 관련된 정보라고 생각하면 됩니다. 이것은 <head>와 </head> 사이에 사용되며 문서의 외양과는 크게 상관이 없습니다. 메타 태그의 하나의 예를 보죠.

<meta name="author" content="김정일">

이것은 저자가 '김정일'이라는 것을 나타내는 예입니다. 이것은 브라우저 상에는 나타나지 않고 소스보기를 누르면 볼 수 있는 것으로 방문자에게는 거의 의미가 없는 것이죠. 그런데 메타태그는 어떤 정해진 확실한 표준이 있는 것이 아니고 여러분이 맘대로 만들 수도 있습니다. 아래처럼 말이죠.

2. 메타 태그의 사용법
메타 태그의 속성으로는 name, content, http-equiv 등이 있습니다. name은 메타정보의 이름을, content는 관련된 정보의 내용, http-equiv는 서버에 접근할 수 있는 어떤 값들인데 브라우저의 움직임을 결정합니다. 이것은 주로 네스케이프나 아파치와 호환하고 다른 브라우저는 이를 무시하는 경우도 있습니다.
그러나 너무 걱정하지는 마세요. 각각의 속성에 연결된 속성값으로는 무지 많은 것들이 있지만 여러분이 제대로 알고 있어야 하는 것은 아래의 4가지에 불과하니까요.

3. 검색엔진과 관련된 메타 태그
메타태그의 기능을 설명하기전에 검색사이트들이 어떤 방식으로 운영되는 지 알아보도록 하겠습니다. 가장 잘 알려진 검색 사이트 야후(yahoo.co.kr)는 디렉토리 서비스라는 형식으로 운영되고 있는데 이것은 사람이 일일이 사이트에 관한 정보를 입력해서 등록하는 방식입니다. 그러면 써퍼들이 등록된 사이트를 방문하여 페이지의 내용과 적합한 카테고리에 사이트를 연결시키는 수동방식이라는 거죠.
반면 알타비스타(www.altavista.co.kr)는 검색 로봇이라는 것이 있어 자동으로 등록된 사이트의 정보를 데이터베이스하는 방식을 사용합니다. 따라서 알타비스타에 등록하기 위해서는 단순히 홈페이지의 URL을 적어주기만 하면 됩니다. (최근에는 알타비스타도 디렉토리 서비스를 제공합니다) 등록이 된 사이트는 주기적으로 검색로봇이 돌아 다니며 데이타를 갱신하는 방법을 사용하는 것이죠. 이 검색로봇이 데이타를 검색하는 공간이 주로 타이틀태그와 메타태그인 것입니다. 따라서 메타태그에 자신의 사이트에 적합한 설명과 키워드를 설정해 두는 것이 바람직합니다. 일단 예제를 보고 계속하기로 하죠

<META NAME="Description" CONTENT=" ">
해당 웹페이지의 내용을 요약해서 설명하는 부분입니다.
<META NAME="Keywords" CONTENT=" " >
검색사이트의 방문자가 content부분의 키워드를 입력하면 여러분의 홈페이지가 소개됩니다.

4. <meta http-equiv="refresh" content="time;url=URL">
이것은 time초 후에 자동으로 지정된 URL로 이동하는 것을 명령하는 것입니다. 이런 http-equiv="refresh"란 것은 유식하게 애기하면 '클라이언트 풀'이라는 기법으로 클라이언트 쪽에서 서버에게 문서를 갱신할 것을 요구하는 것입니다. 그럼 refresh라는 것은 어떤 때 사용할 까요? 여러분이 가장 흔히 볼 수 있는 경우가 다른 URL로 이사를 했을 경우입니다. 아래 예제는 5초 후에 http://xxx.com 으로 이동시켜 줍니다.

<meta http-equiv="refresh" content="5;url=http://xxx.com">

그리고 초기 인트로 화면을 보여준뒤 사용자의 클릭이 없어도 지정된 시간 후에 메인화면으로 이동시킬 경우나, 슬라이더 쇼(연달아 화면이 계속 변하게 할 때 각 문서에 이런 meta tag를 사용하면 됨)를 연출할 때도 유용하게 써 먹을 수 있죠.

5. 넷스케잎에서 한글코드의 자동 인코딩
익스플로러에서는 문제가 없지만 넷스케잎의 경우는 기본적으로 영문폰트(Western(ISO-8859-1))로 인코딩하여 문서를 보여줍니다. 따라서 웹페이지를 만들때 우리가 자주쓰는 FONT태그에서 FACE="궁서체"로 지정해 주어도 넷스케이프는 속성을 이해하지 못해 궁서체로 폰트를 보여주지 못합니다. 따라서 브라우저가 문서를 로딩할 때 자동으로 한글 폰트(euc-kr)로 인코딩하게 만들어 줄 필요가 있는 것이죠.

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

한글로 된 문서라면 기본적으로 위의 부분은 넣어주는 것이 일반적입니다. 물론 익스플로러 전용이라면 문제가 없겠지만..... 그런데 주의할 점이 있습니다. 넷스케이프에서 이 META 태그를 사용하면 FORM으로 작성된 박스의 크기가 달라진다는 것과 영문 폰트를 제대로 사용하지 못하게 되므로 다 좋은 것은 아니라는 거죠.
1.<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
한글 페이지를 만드실 때 이 정보를 기입하시면 페이지의 폰트가 다르게 보이실 것입니다. 바로 한글로 작성되었다는 것을 알려줌으로써 한글에 맞게 출력되는 것입니다. 나모 에디터에서 작업할 경우 생기는 META TAG로 웹상에서 넷스케이프와 익스플로러 모두 글씨체를 굴림체로 해석합니다.

2.<meta http-equiv="Content-Type" content="text/html; charset=ks_c_5601-1987">
포론트 페이지에서 작업할 경우 생기는 META TAG로 간혹 넷스케이프에서는바탕체로 인식하고 익스플로러에서는 굴림체로 해석합니다.

6. 만료일자 지정
<META HTTP-EQUIV="expires" CONTENT="Wed, 26 january 2001 08:21:57 GMT">현재 파일의 만료일자를 지정합니다. 검색 로봇은 만료일자가 지나면 검색 엔진에서 이 파일을 지웁니다.

7.화면 전환효과
<meta http-equiv="page-enter" content="revealtrans (duration=2, transition=23)">
<meta http-equiv="page-exit" content="revealtrans (duration=2, transition=23)">
위의 두줄을 코딩하면 문서에 접속하거나 빠져나갈 때 멋진 transition 효과를 거둘 수 있습니다.
그런데 유감스럽게도 이것은 인터넷 익스플로러 4.0이상에서만 지원되는 것이므로 넷스케잎에서는 구경할 수 없습니다...
여기서 duration은 변환 지연 시간을, transition 값은 0~23중 하나를 지정하면 됩니다. 만약 transition 값이 23이면 총 23가지 효과가 불규칙하게 일어납니다. 넷스케이프에서는 지원되지 않습니다....

8.캐시기능 사용
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="pragma" content="no-cache">
브라우저가 캐시기능을 사용할지의 여부를 결정합니다.
가능한 값은;
Public - 전체적으로 공유된 캐시에 저장됩니다.
Private - 개인의 캐시에 저장됩니다.
no-cache -캐시하지 않습니다.
no-store - 캐시기능을 사용하되 보관을 하지는 않습니다.
(주)브라우저가 이 기능을 사용하는 것은 명확하지는 않습니다. Nevigator에서 정의되며 pragma는 I.E에서 정의 됩니다.

9.쿠키기능 사용
<META HTTP-EQUIV="Set-Cookie" CONTENT="cookievalue=xxx;expires=Friday, 31-Dec-99 23:59:59 GMT; path=/">
브라우저에 쿠키를 저장합니다.
만료일자와 함께 디스크에 저장됩니다. path로서 경로를 지정합니다.