<meta>: 문서 레벨 메타데이터 요소
HTML <meta> 요소는 <base>, <link>, <script>, <style>, <title>과 같은 다른 메타관련 요소로 나타낼 수 없는 메타데이터를 나타냅니다.
meta 요소가 제공하는 메타데이터는 다음 네 유형 중 하나입니다.
- name 특성을 지정하면 전체 페이지에 적용되는 "문서 레벨 메타데이터"를 제공합니다.
- http-equiv 특성을 지정하면 유사한 이름의 HTTP 헤더가 제공하는 정보와 동일한 "프래그마 지시문"이 됩니다.
- charset 특성을 지정하면 문서 인코딩에 사용한 문자 인코딩을 나타내는 "문자 집합 선언"이 됩니다.
- itemprop 특성을 지정하면 "사용자 정의 메타데이터"를 제공합니다.
특성
이 요소는 전역 특성을 포함합니다.
🤔
전역 특성(Global attributes)은 모든 HTML에서 공통으로 사용할 수 있는 특성입니다. 그러나 일부 요소에는 아무런 효과도 없을 수 있습니다.
http-equiv = "항목명"
브라우저가 서버에 명령을 내리는 속성으로 name속성을 대신하여 사용될 수 있으며, html 문서가 응답 헤더와 함께 웹서버로부터 웹 브라우저에 전송되었을 때에만 의미를 갖습니다.
content = "정보값"
meta 정보의 내용을 지정합니다.
name = "정보 이름"
몇 개의 meta 정보의 이름을 정할 수 있으며 지정하지 않으면 http-equiv 와 같은 기능을 합니다.
http-equiv
content-type:
해당 문서의 문자 인코딩 방식을 명시함.
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
default-type:
우선적으로 적용할 스타일시트를 명시함.
content 속성값은 동일한 문서에 존재하는 link 요소의 title 속성값과 일치하거나, 동일한 문서에 존재하는 style 요소의 title 속성값과 일치해야 합니다.
<meta http-equiv="default-style" content="preferred stylesheet">
refresh:
해당 문서를 새로고침(refresh)할 시간 간격을 명시함.
refresh 속성값은 사용자로부터 페이지에 대한 제어를 빼앗아오기 때문에 주의해서 사용해야 합니다.
<meta http-equiv="refresh" content="30">
Meta Tag의 종류
- Keywords: 검색 엔진에 의해 검색되는 단어를 지정합니다.
<meta name="Keywords" content="Web, html, 웹 표준"/>
- Description: 검색 결과에 표시되는 문자를 지정합니다.
<meta name="Description" content="Web, html, 웹 표준"/>
- Robots: 검색 로봇 제어
<meta name="Robots" content="noindex, nofollow"/>검색로봇에 대한 명령은 <meta name="robots">라는 형식으로 지정합니다.
content속성에는 다음과 같이 지정할 수 있고 복수지정할 때에는 콤마(,)로 구분합니다.
(대소문자를 구분하지 않습니다.)
- All(기본값) : 'index, follow' 를 지정한 것과 같습니다.
- None : 'noindex, nofollow' 를 지정한 것과 같습니다.
- Index : 해당 페이지를 수집 대상으로 합니다.
- Follow : 해당 페이지를 포함해 링크가 걸린 곳을 수집 대상으로 합니다.
- Noindex : 해당 페이지를 수집대상에서 제외합니다.
- Nofollow : 해당 페이지를 포함해 링크가 걸린 곳을 수집 대상으로 하지 않습니다.
- OpenGraph: 컨텐츠의 요약내용이 SNS에 게시되는데 최적화된 데이터를 가지고 갈 수 있도록 설정 하는것이미지는 최소 600x315 ~ 최대 1200 x 630 픽셀 크기를 권장한다.
<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com/page.html">
<meta property="og:title" content="Content Title">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:description" content="Description Here">
<meta property="og:site_name" content="Site Name">
<meta property="og:locale" content="en_US">
<!-- 다음의 태그는 필수는 아니지만, 포함하는 것을 추천함 -->
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
Meta Tag 설정 방법
예시)
<meta charset="utf-8">
<meta name="Title" content="About:메타 테그">
<meta name="Description" content="Meta tag 설정 방법">
<meta name="Keywords" content="웹, 개발, mozilla, html, javascript, 개발자">
<!-- index: 그 페이지를 수집대상으로 한다, follow: 현 페이지를 포함해 링크가 걸린 곳을 수집대상으로 한다. -->
<meta name="robots" content="index, follow">
<meta http-equiv="Subject" content="웹개발">
<meta http-equiv="publisher" content="나">
<meta http-equiv="Email" content ="example@example.com">
<meta http-equiv="Copyright" content="나">
<!-- 이미지 툴바 생성여부 -->
<meta http-equiv="imagetoolbar" content="no">
<!-- 캐쉬여부 -->
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Pragma" content="no-chche">
<!-- 캐쉬 만료일 , 캐쉬 설정을 안할경우 content="-1"-->
<meta http-equiv="Expires" content="-1">
<meta property="og:type" content="website">
<meta property="og:url" content="http://www.examle.com">
<meta property="og:title" content="Meta tag 설정 방법">
<!-- 이미지경로설정 -->
<meta property="og:image" content="http://www.example.com/이미지 경로">
<meta property="og:description" content="Meta tag 설정 방법">
<meta property="og:site_name" content="web developer">
<meta property="og:locale" content="ko_KR">
<!-- 다음의 태그는 필수는 아니지만, 포함하는 것을 추천함 -->
<meta property="og:image:width" content="800">
<meta property="og:image:height" content="420">
<!-- 트위터 -->
<meta name="twitter:card" content="summary">
+cache 설정
캐쉬가 되지 않게 하는 태그
<meta http-equiv='Cache-Control' content='no-cache'>
<meta http-equiv='Pragma' content='no-cache'>
캐쉬 파기시간 정의
<meta http-equiv="Expire" content="-1">
⚠️
Tip: meta 태그는 각 페이지별로 적용해야 한다.