ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • meta 태그 다른 설정 방법
    제로베이스스쿨 20기 2023. 11. 6. 16:05
    반응형

     

    메타 태그(Meta tag)란?

    하이퍼텍스트(Hyper text) 생성 언어 HTML 문서의 맨 위쪽에 위치하는 태그(tag)로 HEAD 태그 사이 또는 뒤에 있어도 되지만 반드시 BODY 태그 앞쪽에 위치해야 한다.

    브라우저와 검색 엔진을 사용할 수 있도록 웹 문서의 정보를 포함하고 있습니다

     

    <!DOCTYPE html>
    <html lang="ko">
      <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
        <meta name="format-detection" content="telephone=no">
        <meta name="description" content="메타태그 설명">
        <meta property="og:type" content="웹페이지 종류 -website">
        <meta property="og:title" content="웹페이지 제목">
        <meta property="og:url" content="웹페이지의 URL">
        <meta property="og:image" content="표시되는 이미지">
        <meta property="og:description" content="웹페이지의 설명">
        <title>meta tag</title>
      </head>
      <body>
    
      </body>
    </html>

     


     

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

    http-equiv ="항목명" - 웹브라우저 서버에 명령을 내리는 속성
    - name 속성을 대신해 사용할수 있음
    - html 문서가 응답 헤더와 함께 웹 서버로부터 웹 브라우저에 전송되어있을 때만 의미를 가짐
    - content 속성의 정보, 값을 위한 HTTP header를 제공
    - html4에서는 문자 설정을 할 때 사용했지만 html5에서는 문 설정 방법이 더욱 간단해졌
    content = "정보 값"  - meta 정보의 내용을 지정
     - name 속성과 http-equiv와 연관된 값을 준다
    name = "정보 이름"  - 몇 개의 meta 정보의 이름을 정할 수 있으며 지정하지 않으면 http-equiv와 같은 기능이 된다

     


    메타 태그의 종류

    검색 엔진에 의해 검색되는 단어를 지정합니다
    meta name="Keywords" content="Web, html, 웹 표준" />.
    
    검색 결과에 표시되는 문자를 지정합니다.meta name="Description" content="Web, html, 웹 표준" />
    
    검색 로봇 제어
    <meta name="Robots" content="noindex, nofollow" />
    
    noindex : 검색 결과에 이 페이지를 표시 하지 않는다.
    nofollow : 이 페이지의 링크를 따라가지 않는다.
    noarchive : 검색결과에 저장된 페이지 링크를 표시하지 않는다.
    All(기본값) : 색인 생성이나 게재에 대한 제한이 없다, 기본값이므로 명시적으로 표시해도 효과 없음
    Non : noindex, nofollow와 같다
    index : 그 페이지를 수집대상으로 한다.
    Follow : 그 페이지를 포함해 링크가 걸린 곳을 수집대상으로 한다.
    
    charset(문자 코드의 종류 설정)
    <meta charset="UTF - 8" />
    
     Date (날짜- 제작일)
    <meta name="Date" content="2020-06-05T07:45:37+09:00" />
     
    Content-Script-Type (웹페이지에 쓰인 언어)
    <meta http-equiv="Content-Script-Type" content="Text/javascript" />
    
    X-UA-Compatible (브라우저 호환성)
    html<meta http-equiv="X-UA-Compatible" content="IE-edge" />Copy
     
    subject (홈페이지 주제 지정)
    html<meta http-equiv="Subject" content="기술블로그" />Copy
     
    title (제목)
    html<meta http-equiv="Title" content="HTML5 공부" />Copy
     
    Author (페이지 작성 제작자명)
    html<meta http-equiv="Author" content="인파_" />Copy
     
    Publisher (제작사)
    html<meta http-equiv="publisher" content="인파_" />Copy
     
    Other Agent (웹 책임자)
    html<meta http-equiv="Other Agent" content="인파_" />Copy
     
    Generator (제작 도구)
    html<meta http-equiv="Generator" content="Visual Studio Code" />Copy
     
    Reply-To / Email (메일 주소)
    html<meta http-equiv="Reply-To" content="test@gmail.com" />
    <meta http-equiv="Email" content ="test@gmail.com" />Copy
     
    Filename (파일 이름)
    html<meta http-equiv="Filename" content="index.html" />Copy
     
    Location (위치)
    html<meta http-equiv="Location" content="위치" />
    
    <meta name=”geo.region” content=”US-MN” />
    <meta name=”geo.placename” content=”Minneapolis” />
    <meta name=”geo.position” content=”44.980257;-93.270034″ />
    <meta name=”ICBM” content=”44.980257, -93.270034″ />Copy
     
    Distribution(배포자)
    html<meta http-equiv="Distribution" content="name" />Copy
     
    Copyright (저작권)
    html<meta http-equiv="Copyright" content="인파_" />Copy
     
    Build (제작 년, 월, 일)
    html<meta http-equiv="Build" content="date" />Copy
     
    Last-Modified(제작 년, 월, 일)
    html<meta http-equiv="Last-Modified" content="Fri, 05 Jul 2020 19:40:40" />Copy
     
    imagetoolbar (그림 위 마우스 오버 시 이미지 관련 툴바 생기지 않게 하기)
    html<meta http-equiv="imagetoolbar" content="no" />Copy
     
    Cache-Control / Pragma(캐쉬가 되지 않도록 하기)
    html<meta http-equiv="Cache-Control" content="no-cache" />
    <meta http-equiv="Pragma" content="no-chche" />Copy
    
    Expires (캐쉬 만료일)
    html<meta http-equiv="Expires" content="Mon,  08 Sep 2016 10:10:10 GMT" />Copy
     
    Refresh (새로고침)
    html<!-- 60초 마다 새로고침한다! -->
    <meta http-equiv="refresh" content="60" />Copy
     
    Refresh (입력한 주소로 5초 후 이동)
    html<meta http-equiv="refresh" content="5; url = 주소" />Copy
     
    Page-Enter (페이지 들어갈 때 장면 전환 효과)
    html<meta http-equiv="refresh" content="revealtrans(Duration=1, Transition=12)" />

     

     

     

    참고 사이트

     

    https://developer.mozilla.org/ko/docs/Web/HTML/Element/meta

     

    <meta>: 문서 레벨 메타데이터 요소 - HTML: Hypertext Markup Language | MDN

    HTML <meta> 요소는 <base>, <link>, <script>, <style>, <title>과 같은 다른 메타관련 요소로 나타낼 수 없는 메타데이터를 나타냅니다.

    developer.mozilla.org

     

    반응형

    댓글

Designed by Tistory.