메타 태그 정리 - 기본메타태그, 기능메타태그, 로봇 설정, 로봇 검색엔진 최적화(SEO)

1. 기본 화면 정보 메타 태그

 

 <META NAME="Title" CONTENT="화면 타이틀">
 <META NAME="Subject" CONTENT="화면 주제">
 <META NAME="Description" CONTENT="화면요약설명">
 <META NAME="Keyword" CONTENT="키워드">
 <META NAME="Author" CONTENT="제작자">
 <META NAME="Author-Date(Date)" CONTENT="제작일">
 <META NAME="Reply-To(Email)" CONTENT="메일주소">
 <META NAME="Location" CONTENT="지역, 도시, 국가 등">
 <META NAME="Classification" CONTENT="카테고리분류">
 <META NAME="Copyright" CONTENT="저작권정보">
 <META NAME="Distribution" CONTENT="배포자, global">
 <META NAME="FileName" CONTENT="파일명">
 <META NAME="Other Agent" CONTENT="책임자">
 <META NAME="Publisher" CONTENT="발행인/업체">
 <META NAME="Generator" CONTENT="제작툴 또는 에디터">
 <META NAME="Robots" CONTENT="ALL">
   -> 로봇 검색 허용 범위 지정

 

*** 로봇 검색 허용 범위 설정값

  - ALL : 로봇 검색을 허가함
  - NONE : 로봇 검색을 허가하지 않음
  - INDEX,FOLLOW : 현재 파일을 읽고 링크된 문서도 읽음
  - NOINDEX,FOLLOW : 현재 파일을 읽지 않고 링크된 문서만 읽음
  - INDEX,NOFOLLOW : 현재 파일을 읽고 링크된 문서는 무시
  - NOINDEX,NOFOLLOW : 현재 파일을 읽지 않고 링크 문서도 무시

 

****** 로봇 검색엔진 최적화(SEO) ******

 1) keyword
   - 한글 키워드와 영문 키워드를 함께 입력하는 것도 좋음
     => <META NAME="Keyword" CONTENT="키워드, 메타, 이름">, 

          <META NAME="Keyword" CONTENT="Keyword, meta,name">
   - 키워드를 무조건 많이 적은 것이 좋은게 아님.
   - 단어 반복해서 계속 넣을 경우 스팸처리 될 수 있다.

 2) Description
    -  중요한 부분이 앞쪽에 오도록 한다.

 3) 봇 설정은 INDEX,FOLLOW로 설정
    <META NAME="Robots" CONTENT="INDEX,FOLLOW">

 

 

 

 

2. 기능성 메타태그

 

1) 웹문서 문자 인코딩 방식 설정(euc-kr, euc-en, utf-8,  utf-16)
  <META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=euc-kr">

 

2) 새로고침
  <META HTTP-EQUIV="Refresh" CONTENT="120;> -> 120초후 새로고침
  <META HTTP-EQUIV="Refresh" CONTENT="120; URL=http://ally.tistory.com">
   -> 120초 후 사이트로 이동

 

반응형

3) 이미지 오버시 이미지툴바 사용여부(익스플로 브라우저에만 해당)
  <META HTTP-EQUIV="Imagetoolbar" CONTENT="no">

 

4) ie8 이전 버전 호환성 설정, ie 브라우저에서 화면 깨지는 걸 방지하기 위해 꼭 해주어야 함. 
  <META HTTP-EQUIV="X-UA-Compatible" CONTENT="IE=edge">
    -> 설정값 : IE=9, IE=8, IE=7, IE=5, IE=EmulateIE9, IE=EmulateIE8, IE=EmulateIE7, chrome=1
    -> IE=edge 옵션을 대부분 사이트에서 사용함

 

 

5) 화면 이동시 장면 전환 효과
  <META HTTP-EQUIV="Page-Enter" CONTENT="RevealTrans(Duration=0, Transition=5)">
    -> RevealTrans : 화면 전환 효과 설정
    -> Duration : 동작할 시간 설정
    -> Transition : 동작효과 지정(0~23에서 설정)

  <META HTTP-EQUIV="Page-Enter" CONTENT="BlendTrans(Duration=0, Transition=5)">
    -> BlendTrans : 점점 밝게 또는 어둡게 나타나도록 설정
    -> Duration : 동작할 시간 설정
    -> Transition : 동작효과 지정(0~23에서 설정)

 

 

6) 화면에서 나갈때 다른페이지로 이동시 장면 전환 효과

  <META HTTP-EQUIV="Page-Exit" CONTENT="RevealTrans(Duration=10, Transition=50)">

 

  ***  Transition 설정 움직임
    Transition=0 -> 사각형 작아짐
    Transition=1 -> 사각형 커짐
    Transition=2 -> 원 작아짐
    Transition=3 -> 원 커짐
    Transition=4 -> 위에서 아래
    Transition=5 -> 아래에서 위
    Transition=6 -> 좌측에서 우측
    Transition=7 -> 우측에서 좌측
    Transition=8 -> 수직 블라인드
    Transition=9 -> 수평 블라인드
    Transition=10 -> 체크패턴 좌측에서 우측
    Transition=11 -> 체크패턴 위에서 아래
    Transition=12 -> 랜덤 뿌리기
    Transition=13 -> 수직 2등분 가운데로 모아짐
    Transition=14 -> 수직 2등분 밖으로 퍼짐
    Transition=15 -> 수평 2등분 가운데로 모아짐
    Transition=16 -> 수평 2등분 밖으로 퍼짐
    Transition=17 -> 45도 우측 위, 좌측 아래
    Transition=18 -> 45도 우측 아래, 좌측 위
    Transition=19 -> -45도 좌측 위, 우측 아래
    Transition=20 -> -45도 좌측 아래, 우측 위
    Transition=21 -> 수평 랜덤
    Transition=22 -> 수직 랜덤
    Transition=23 -> 0~22 랜덤 선택

 

 

7) 스크립트 타입
<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">

 

 

8) 스타일 타입
<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">

 

9) 화면 읽을 때 브라우저에서 캐쉬(임시저장) 사용 여부
<META HTTP-EQUIV="Cache-Control" CONTENT="No-Cache">
<META HTTP-EQUIV="Pragma" CONTENT="No-Cache">
-> 기존에 저장된 캐쉬를 사용하지 않고 웹화면을 서버에서 새로 읽어들여 보여줌
-> 즉 No-Cache는 캐쉬 저장 못하게 지정하는 것임

 

10) 캐쉬(임시저장)을 허용하되 만료기간 설정
<META HTTP-EQUIV="Expires" CONTENT="now">
<META HTTP-EQUIV="Expires" CONTENT="0">
<META HTTP-EQUIV="Expires" CONTENT="Mon, 8 Jun 2014 24:00:00 GMT">