Meta Tag

LUCY·2022년 4월 12일
0

HTML

목록 보기
2/4
post-thumbnail

하이퍼텍스트(Hypertext) 생성 언어 HTML 문서 맨 위에 <head>사이에 위치한 브라우저와 검색엔진을 사용할수있도록 웹 문서의 정보를 포함하는 태그이다.

<meta> 요소가 제공하는 속성에는 4가지 유형이 있다.

  • <name>을 지정하면 전체 페이지에 적용되는 ‘문서 레벨 메타데이터’를 제공합니다
  • <charset>을 지정하면 문자 인코딩을 나타내는 ‘문자 집합 선언’을 할 수 있다,
  • <itemprop>을 지정하면 ‘사용자 정의 메타데이터’를 제공한다
  • <http-equiv>를 지정하면 유사한 이름의 HTTP 헤더가 제공하는 정보와 동일한 ‘프라그마 지시문’이 된다.

프라그마 지시문은 컴파일러의 동작(변수와 함수용 메모리 할당 방법, 확장 키워드의 허가/금지, 경고 메시지의 표시/ 숨김 등)를 제어한다.

메타데이터란 사용자가 정의, 배포, 패키지 업그레이드를 할 수 있는 데이터이다. 이 데이터는 원하는 정보를 효율적으로 찾아 이용하기 위해 일정한 규칙을 가지고 있다.

<charset>

  • 페이지의 문자 인코딩을 선언합니다. 이 특성이 존재할 경우, 반드시 문자열 "utf-8"의 ASCII 표현이어야 한다.

<name> <content>

  • namecontent를 함께 사용하면 문서의 메타데이터를 한쌍으로(이름-값) 제공할 수 있다.

contentmeta정보의 내용을 지정하고, http-equiv 또는 name 특성의 값을 담는다.

<http-equiv>

  • 프라그마 지시문을 정의함.
  • content-security-policy : 페이지의 콘텐츠 정책을 정의할 수 있다.
  • content-type : 지정할경우, content 특성 값은 반드시 "text/html; charset=utf-8"이어야 한다.
  • default-style : 기본 CSS 스타일 시트 세트의 이름을 지정한다.
  • x-ua-compatible : 지정할 경우, content 특성의 값은 반드시 "IE=edge"이다.
  • refresh : content 특성에 양의 정수 값을 설정한 경우, 새로고침시 대기시간 지정, 만약 그 뒤에 URL이 온다면 이동 전까지의 대기시간을 지정할 수 있다.

메타태그 종류


검색 엔진에 의해 검색되는 단어를 지정

<meta name="keywords" content="검색단어" />

검색 결과에 표시되는 문자를 지정

<meta name="description" content="웹에대한 간략한 설명 또는 소개" />

검색 로봇 제어

<meta name="robots" content="noindex, nofollow" />
1. All(기본값) : 'index, follow' 를 지정한 것과 같다
2. None : 'noindex, nofollow' 를 지정한 것과 같다.
3. Index : 그 페이지를 수집 대상으로 한다.
4. Noindex : 그 페이지를 수집대상에서 제외한다.
5. Nofollow : 그페이지를 포함해 링크가 걸린 곳을 수집 대상으로 하지 않는다.
6. Follow : 그 페이지를 포함해 링크가 걸린 곳을 수집 대상으로 한다.

제작일 입력

<meta name="Date" content="2020-06-05T07:45:37+09:00" />

웹페이지에 쓰인 언어 입력

<meta http-equiv="Content-Script-Type" content="Text/javascript" />

X-UA-Compatible (브라우저 호환성)

<meta http-equiv="X-UA-Compatible" content="IE-edge" />

제목

<meta http-equiv="Title" content="HTML meta 공부" />

subject (홈페이지 주제 지정)

<meta http-equiv="Subject" content="기술블로그" />

Author (페이지 작성 제작자명)

<meta http-equiv="Author" content="인파_" />

제작 도구

<meta http-equiv="Generator" content="Visual Studio Code" />

메일주소

<meta http-equiv="Email" content ="test@gmail.com" />

Distribution(배포자)

<meta http-equiv="Distribution" content="name" />

Copyright (저작권)

<meta http-equiv="Copyright" content="LUCY" />

imagetoolbar (그림에 마우스 오버 시 이미지 관련 툴바 생기지 않게 하기)

<meta http-equiv="imagetoolbar" content="no" />

Cache-Control / Pragma(Cache가 되지 않도록 하기)

<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="Pragma" content="no-chche" />
<!-- 수정사항이 빠르게 반영 되지만, 로딩시간이 오래 걸린다는 단점이 있음 >

Refresh (새로고침)

<meta http-equiv="refresh" content="60" />
<!-- 입력한 주소로 5초 후 이동 -->

0개의 댓글