메타 태그(meta tag)

<meta name="정보의 이름" content="응답 헤더에 할당된 값">

name 속성은 meta정보의 이름을 지정하며, content속성은 meta정보의 값을 지정합니다.

주로 이름 항목에서는 DESCRIPTION, GERNERATOR, AUTHOR, KEYWORDS, CONTENTS 등이 주로쓰이고 사용자가 마음대로 더 만들어서도 쓸 수 있습니다.

 

ex)
<meta content="MSHTML 5.50.4134.600" name=GENERATOR>HTML버전 표기
< name="Gernerator" content="Namo Webeditor v4.0">
< name="Author" content="김자바">제작자를 소개

<meta http-equiv="http 응답 헤더 이름" content="응답 헤더에 할당될 값">

name 속성을 대신하여 사용할 수 있으며, html 문서가 응답 헤더와 함께 웹서버로부터 웹 브라우저에 전송되었을 때에만 의미를 갖습니다. 페이지의 기본정보로는 보통 사용된 HTML의 버전 , 쓰여진 언어, 글자세트(Character set)등을 나타내줍니다. 이부분의 정보는 브라우저를 위한 부분으로 웬만한 에디터에서는 기본적으로 작성해 줍니다

ex)
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr"> 
<meta http-equiv="Keyword(주제)" content="홈페이지, html, 강좌, 홈페이지 제작>

로봇들이 각 사이트에서 이 사이트는 어떤 사이트고 어떤 내용이 들어있는지에 관한 것을 메타태그에 삽입된 키워드를 이용 정보를 모으게 됩니다. 

예전 와레즈(warez) 사이트등에서는 이런점을 이용, 키워드를 쓰는 부분과 본문의 아랫부분에 안보이게(흰색 배경에 흰글씨를 쓰는식) 관계된 단어를 계속 반복해 써넣어서 검색엔진의 검색결과에서 상위로 올라가기도 했었습니다.

하지만 요즘은 이런 사이트들은 각 검색엔진 마다 기준은 다르지만(같은 단어가 몇번이상 반복되가나 하는 경우등...) 어떤 기준 이상이 되면 저절로 검색순위나 검색결과에서 제외되어 버린답니다. 

사이트 설명 : <meta name="Description" content="홈페이지 제작과 웹디자인의 모든것">

자기 홈페이지의 페이지의 내용을 요약하여 적습니다. 검색엔진이 검색결과를 출력하여 보여줄 때 이 내용이 나타납니다. 간단하게 남이 보아도 홈페이지 성격을 알 수 있도록 간략하게 적으세요.

길게 쓰는 것이 반드시 좋은 것이 아닙니다. 검색엔진에 따라 다르지만 보통 150자 이내로 길이가 제한되니 중요한 내용은 150자를 넘기지 않는 범위에서 작성하세요. 만약 더 쓰고 싶으시다면 할 수 없지만.. 


키워드 삽입 : <meta name="Keywords" content=" html, html,html, design, 홈페이지 제작 ,이미지제작, 웹디자인">

검색 포털 사이트의 검색엔진은 로봇이 메타태그의 키워드를 검색 결과에 활용한답니다. 검색엔진에서 키워드 검색을 해보면 출력되는 자료가 수없이 많습니다.

그 중에서 상위 리스트에 출력이 된다면 아마도 여러분의 홈페이지에 방문자수가 약간 늘어 날 것입니다. 그래서 위와 같은 태그를 홈페이지내에 삽입하면 html이라는 키워드로 검색을 하면 일치도가 100%가 되어 리스트의 상위에 위치하게 됩니다.

홈페이지 홍보를 위한 좋은 방법이라고 생각이 됩니다. 자신의 홈에 적합한 어구를 content 항목에다 집어 넣어 보십시오.단 영문을 우선 검색하기 때문에 영문, 한글 순으로 먼저 적으세요.


<meta http-equiv="refresh" content="값;URL=html 문서 또는 file의 URL">

상당히 유용한 옵션입니다.
refresh 옵션은 웹서버에게 지정된 시간이 지나면 자동적으로 다른 웹페이지로 이동 하거나, 멀티미디어 파일을 재생시키도록 명령을 내리는 옵션입니다.. 

content 속성에다가 초에 해당하는 시간을 넣어주면 그 만큼의 시간이 흐른다음 정해진 URL을 실행합니다. 여러분이 웹서핑중 흔히 접할 수 있는 자동으로 다른 곳으로 이동하는 것이 이 메타태그를 활용한 것이랍니다. 

ex) <meta http-equiv="refresh" content="10;URL=index.htm">
 

<meta HTTP-EQUIV="Pragma" CONTENT="No-Cache">

페이지를 cache에서 가져오지 않게 함. 항상 서버에 접속해서 페이지를 가져온다.
그러므로, 방문자의 브라우저가 항상 CACHE를 읽도록 해놓아도 이것을 무시하고 페이지를 갱신한다.

자주 고치는 페이지에서는 이것을 사용하는 것이 항상 방문자에게 바뀐 내용을 보여줄 수가 있습니다. 페이지 출력 속도는 매번 가져오므로, cache를 사용할 수 없어서 시간이 많이 걸립니다.

ex)
<metahttp-equiv="Expires" CONTENT="0">


장면 전환 효과 : <meta http-equiv="Page-Enter" content="RevealTrans(Duration=5,Transition=23)">

메타태그에 CSS의 Reveal Transition효과를 응용하여 페이지 전환때 마다 지정한 Transition효과를 적용할 수 있습니다. 웹 서핑시에 페이지 전환때마다 화면이 원처럼 퍼진다든가 조각조각파뀐다던가 하는 효과를 많이 접해보셨을 것입니다. 예전에 한창 유행이었었죠.. ^^

ex)
<meta http-equiv="Page-Exit" content="blendTrans(Duration=1)">
: 페이지를 나갈 때 겹치면서 바꾸는 기술

<meta http-equiv="Page-Exit" content="revealTrans(Duration=2,Transition=0)">
:   페이지를 나갈 때 네모나게 모으는 기술 

위의 소스에서  http-equiv="Page-Exit" 을 http-equiv="Page-Enter"로 수정하면 해당페이지에 들어갈 때도 트랜지션 효과를 적용할 수 있습니다.