◆ BLOG/태그자료

메타태그

장미부인 2012. 11. 8. 01:17

◈ 메타태그

meta태그가 뭘까요? 메타란...사전에서 찾아보면 접두사로 쓰이고 after,with,change 따위의 뜻이라고 되어 있네요...한마디로 변화 무쌍(?)한 뜻을 가지고 있습니다...아이스크림 이름 중에도 메타라는 아이스크림이 있습니다ㅡㅡㆀ홈페이지에서 메타태그라 하면 홈페이지가 검색되었을 때 검색 로봇에 의해 읽혀지는 부분입니다...하지만 요즈음에는 원래 메타태그의 기능이 퇴색된다고나 할까요...요즈음은 거의 디렉토리 검색을 하져...디렉토리 검색이라 함은 홈페이지의 운영자가 검색엔진에 자신의 사이트 종류를 알아서 종류에 맞는 디렉토리에 등록신청을 하는 방법입니다...참고로 야후나 심마니 같은 검색엔진을 사용하는 사람은 대부분 디렉토리 검색 방법을 사용합니다...또 웹페이지 검색방법도 있는데 이게 바로 메타태그를 활용하는 검색방법입니다...하지만 요즈음 추세가 웹페이지 검색 방법이 아닌 디렉토리 검색 방법을 사용하므로 거의 필요가 없겠지만...키워드 많이 쓰는 술법(?)으로 자신의 홈페이지를 상위에 랭크 시킬 수도 있고, 또 재미있고 엽기적인 메타태그의 면모(?)도 있기 때문에 알아 두시면 여러 가지로 편하겠져...지금부터 메타태그의 변화무쌍한 세상으로 들어 오시길 바랍니다~!

참고로 이거 저 위에서 빼먹었는데 알타비스타의 경우에는 아직까지 메타 태그를 검색해서 검색 엔진 결과에 보여집니다...홈페이지 알타비스타에 등록해 보신 분은 아시겠지만 알타비스타에는 홈페이지에 대한 설명을 적을 필요가 없습니다...메타태그의 키워드를 이용하기 때문이져...

메타태그는 <META name="이름" content="내용"> 입니다. <head> 태그 안에만 넣습니다.
옵션설명
Subject

홈페이지의 주제

Title

홈페이지 이름

Author

만든사람...

Publisher

만든 단체나 회사

Other Agent

웹 책임자

Date

만든 날짜

keywords

키워드

그러면 메타태그에 대한 예제를 보여드리겠습니다

<META http-equiv="Content-Type" CONTENT="text/html; charset=euc-kr">
<META name="Subject" content="Modernpoem ">
<META name="Title" content="modernpoem입니다">
<META name="Author" content="modernpoem">
<META name="Publisher" content="poempoem">
<META name="Other Agent" content="modernpoem">
<META name="Date" content="2003년 10월 14일">
<META name="keywords" content="너무 쉬운 태그설명">

홈페이지를 만드실 때 귀찮으시면 저것은 생략하셔도 됩니다. 저거 없어도 홈페이지 잘만 돌아 갑니다. 하지만 위처럼 메타태그를 작성한다면 검색엔진에서 상위페이지에 링크될 확률이 높아집니다. 특히 키워드 부분을 지면상 '너무 쉬운 태그설명' 해놓았는데 저걸 많이 해놓으면 해놓을수록 좋습니다. 나중에 다시 설명 하겠다만 저게 바로 트릭이라고나 할까요. 그리고 저것을 어디에 붙여 놓느냐구 하면...<head> 태그 사이에 붙여 놓으시면 됩니다. 웹페이지의 경우에는 그냥 붙여 주셔두 되구요...프레임이 두 개 나누어진 홈페이지에서는 프레임 두 쪽에 다 넣을 필요는 없습니다. 프레임셋을 나누어 주는 페이지 <head> 태그 사이에만 살포시 얹어 주면 됩니다^^

그리구 맨위에 <META http-equiv="Content-Type" CONTENT="text/html; charset=euc-kr">
이게 뭐냐구요? 이것은 홈페이지가 언어 문제로 맛이 살짝 갈 때 이걸 적어주면 어느정도 효과를 준다고 하네요. 분석하자면 저 속에 우리나라 언어인 한글 코드를 불러내게 하여 한글이 지원되지 않는 컴퓨터에서 올바르게 불러낼 수 있게 하는 기능을 가진 녀석입니다...

그리고 저기 키워드를 적어 줄때 한가지 단어만 연속해서 적어주면 더욱 더 상위페이지에 링크될 확률이 높아집니다...즉 <META name="keywords" content="태그, 태그, 태그, 태그, 태그"> 이런식으로요...한가지 단어를 계속 연속적으로 적어주면 상위페이지에 올라갈 확률이 높아집니다. 지면상 문제로 이밖에 안 적었지만 많이 적어 주면 적어줄수록 좋습니다. 하지만 너무 과하면 안됩니다. 이런 트릭을 파악한 검색엔진 사이트에서도 가만히 있지 않습니다. 검색엔진에서 이런 식으로 위쪽에 올릴 경우 젤 밑으로 링크시키기도 합니다.

또한 앞에서 말했듯이 메타의 뜻은 변화무쌍하다는 뜻이 담겨져 있는데요. 겨우 홈페이지 위에 링크시키는 기능으로 이런 칭호를 얻기 힘들었겠져. 지금부터 메타태그의 여러 화려하고도 까리한 기능을 소개하겠습니다...사실 이게 메타태그의 부기능인데 요즈음은 주 기능보다 더 많이 사용되고 있는 것들이기도 합니다.

<meta http-equiv="Refresh" content="5"; URL="http://modernpoem.com">
저 메타태그를 삽입하시면 그 페이지가 불러진 후 5초 후에 저기 빨간색으로 표시된 부분으로 자동적으로 이동하게 됩니다...시간은 저기 주황색으로 된 5라는 숫자 있져? 그거 단위가 1초입니다...10초후에 이동하게 하려면 10을 대입하면 되겠져...홈페이지 주소가 바뀌었을 때 유용하게 사용하면 좋겠네요^^ 여러 사이트 둘러보시다 보면 몇초 후에 새로운 홈페이지로 이동된다 뭐시다라고 말하는 거 있져? 바로 저 태그를 사용한 거랍니다~저기 시간이나 URL는 님께서 하고싶은 것으로 마음껏 바꿔도 좋습니다~ 그런데 저 URL이 없다면 어떻게 되냐구요?
<META http-equiv="Refresh" content="
5">
URL를 없애 봤습니다...상당히 심플하게 소스가 변하는군요...어쨌든 이렇게 하면 어떻게 되냐구요? URL를 없애면 자신이 지금 불러온 페이지를 계속 불러옵니다...저기 여전히 주황색을 고수하고 있는 5라는 숫자도 역시 다시 불러오는 주기를 나타냅니다...10초마다 자신의 페이지를 다시 불러오게 하려면 저걸 10으로 바꿔 주면 되겠져...이건 웹진 같이 업뎃이 상당히 잦은 사이트에서 사용하면 좋습니다...^^
<meta http-equiv="Refresh" content="
0"; URL="http://modernpoem.com">
또 이것을 0으로 지정하면 어떻게 될까요? 이렇게 해 놓으시면 지정한 홈페이지로 바로 이동합니다...괜시리 쓸데없는 메시지 보여주기 중에 바로 다른 홈페이지로 이동하게 할려면 이걸 사용하면 되겠져...
<META http-equiv="Refresh" content="
0">
그러면 주소도 안적어두고 0으로 해놓으면 어떻게 되냐구요? 이렇게 해놓으시면 그 페이지는 계속 쉴새없이 페이지를 다시 불러옵니다...컴퓨터에 따라서 다운이 되게 할 수 있는 예제입니다...이건 그냥 질문하시는 분이 있을 것 같아 걍 적어놔 봤습니다...*^^*

또 이거말고도 메타태그의 까리한 기능이 더 하나 있는데요...아마도 이게 젤 까리하면서 멋질겁니다...가끔 홈페이지가 멋진 모양을 내면서 바뀌는데요...자바스크립트로도 할 수 있지만 그건 이 메타태그로도 충분히 해 낼 수 있답니다~하지만 이것도 너무 과용하면 오히려 효과가 떨어지니 적당히 사용하시길...^^
<meta http-equiv="Page-Enter" content="revealTrans(Duration=3,Transition=
0)">
<meta http-equiv="Page-Exit" content="revealTrans(Duration=3,Transition=0)">
저 소스를 메타태그 넣는곳에 넣어주시면 화면이 바뀝니다. 위에있는 것은 페이지 들어갈 때 화면이 바뀌면서 들어가게 하는거구요...아래것은 페이지 나갈 때 화면이 바뀌면서 나가게 되는거랍니다^^ 저기 주황색으로 된 0이 바뀌게 할 모양을 숫자로 나타낸 것입니다. 23까지 있습니다. 1에서 22까지는 다양한 모양이고 23은 22개중 랜덤으로 바뀌는 효과가 나오는데요...직접 사용해보시고 효과를 알아보세요^^ 메타태그도 잘 활용하시구요~

'◆ BLOG > 태그자료' 카테고리의 다른 글

◈ 테이블을 이루는 기본 구조 ◈  (0) 2012.11.08
테이블의 응용 예제.  (0) 2012.11.08
님은 멋곳에  (0) 2012.08.31
앨범만들기  (0) 2012.07.24
글자모양소스모음  (0) 2012.06.06