본문 바로가기
Hello World !/HTML

meta tag : 메타태그란 ?

@dev_Yeon 2018. 5. 21. 15:53

메타태그(meta tag)란?

메타태그(meta tag)란 이름에서 볼수있듯 (x)html 문서의 특수태그이며 반드시  <head></head>  안에  <body></body> 보다

상단에 위치해야합니다. 메타태그는 이 (x)html 문서가 어떤내용을 담고있고 핵심키워드는 무엇이며 누가만들었는지 어떤 언어코드로 설정되었는지의 정보를 담고있습니다. 화면에 표시되지는 않지만 검색엔진이나 브라우저에 읽힙니다. 이러한 메타태그로

charset, description, keyword, author, refresh, mode, viewport  등의 정보를 표기할수있습니다.

 

1.메타태그(meta tag)의 속성

메타태그는  http-equiv, name, content 세가지의 속성이있습니다.

  1. http-eqyiv이속성은 문서에서 초기정보를 나타내는 속성으로 메타요소에서 정의된 명령사항들을 먼저 실행한 후 페이지를 로딩합니다. HTML 문서가 응답 헤더와 함께 웹 서버로부터 웹 브라우저에 전송되었을 때에만 의미를 갖습니다.  기본언어(content-language), MIME 타입(content-type), 브라우저호환성설정(X-UA-Compatible), 페이지 리로드(refresh)등을 나타낼 수 있습니다.
  2. name 속성값으로는 subject, title, author, keywords 등이 있습니다. 검색엔진에게 문서의 내용을 요약해 주는 역할을 담당한다고 할 수 있습니다.
  3. content 메타태그의 정보를 지정해줍니다.

2. 메타태그(meta tag)의 종류

기본언어(content-language) 전처리될 기본 언어를 지정할 수 있습니다. 선언하지 않는 경우 기본언어가 존재하지 않는것으로 간주합니다. content 에는 그에 맞는 값을 입력해야합니다. 아래 예제에서는 ko(한국어) 로 지정되어있습니다.

 

<meta http-equiv="content-language" content="ko" />

 

  • MIME 타입(content-type) 이 속성은 현재 페이지의 인코딩(문자셋)을 어떠한 방식으로 출력할 지 결정하는 속성입니다. 만약 제작한 웹 페이지의 한글이 깨져 보인다면, 거의 이 메타정보와 실제 페이지의 문자셋이 달라 생긴 문제일 가능성이 매우 큽니다. MIME타입 을 지정해준다음 세미콜론(;) 으로 구분합니다. 국내에서는 보통 UTF-8, EUC-KR을 많이 사용하고 있습니다. 그리고 현재 추세는 다른 언어의 사용자가 접근 시에도 올바르게 보여질 수 있는  UTF-8 를 권장하고 있습니다.

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

  • 브라우저호환설정(X-UA-Compatible) 이 메타 정보는 IE(인터넷 익스플로러)가 하위 버전 IE모드로 렌더링 하도록 만들어 줍니다. 예를 들어 content속성 값에 "IE=EmulateIE7"로 넣는 경우, IE8 이상의 최신 IE 브라우저라도 IE7 버전처럼 페이지를 렌더링 합니다.

    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    • 페이지 리로드(refresh) 페이지를 주기적으로 새로고침 하게 만들어줍니다. 예상치못한 새로고침은 사용자로하여금 불편함을 느끼게 할수있습니다. 아래 예시코드는 content 값에 숫자를 입력후 세미콜론(;)으로 구분지어 url 로 주소를 넣어주면 해당 시간 뒤에 지정해준 url로 페이지가 이동된다는 뜻 입니다.

      <meta http-equiv="refresh" content="30; url=hppt://www.google.com" />
    • 소개내용(description) 정보 같은 경우는 현재 페이지를 간략히 소개하는 문구를 적도록 합니다. 이를 검색엔진이 검색된 페이지에 페이지 제목과 같이 표현하며, '공유하기' 같은 것을 했을 때에 활용이 될 수도 있습니다.

       
      <meta name="Description" content="내용" />


    • 키워드(Keywords) 페이지에 대한 키워드 정보들을 담고 있습니다. 페이지의 주요한 단어들을 콤마(,)로 구분하여 값을 넣어주도록 합니다. 이 키워드 정보는 검색엔진이 보다 검색엔진을 용이하도록 하게 만듭니다만, 이를 악용한 광고성 페이지들은 실제 콘텐츠와는 다른 단어들을 무작위로 넣기도 합니다.

      <meta name="Keywords" content="카워드1, 키워드2, 키워드3" />
  • 작성자(author) 페이지의 저자를 나타냅니다. content의 값으로 저자를 나타내는 문자열을 써야 합니다. 이 메타정보가 큰 의미를 가지진 않지만, 소스 상에서도 자신이 제작했음을 명시할 수 있습니다. 
    <meta name="author" content="이름" />

 

티스토리툴바