META TAG ?
해당 문서에 대한 정보인 메타데이터(metadata)를 정의할 때 사용하며,
브라우저와 검색 엔진에 사용되는 웹 문서의 정보를 포함하고 있다.
<meta>요소는 <head> 요소 내부에 위치해야 한다.
META DATA 요소
- 기본요소
<meta charset="utf-8"> /* 인코딩 설정 */ <meta name="author" content="Chris Mills"> /* 저자 */ <meta name="description" content="The MDN Learning Area aims to provide complete beginners to the Web with all they need to know to get started with developing web sites and applications."> /* 설명 */ <meta name="keywords" content="fill, in, your, keywords, here"> /* 키워드 */ <meta name="application-name" content="velog.io/@hyuzni"> /* 어플리케이션 이름 */ <meta name="generator" content="VS Code"> /* 페이지 제작 프로그램 */ <meta name="viewport" content="width=device-width, initial-scale=1.0"> /* display 의 표시 영역 */ <!-- 검색 로봇의 접근 관련 설정 --> <meta name="Robots" content="ALL"> <meta name="robots" content="index, follow" > /* 이 문서도, 링크된 문서도 긁어감 */ <meta name="robots" content="noindex, follow" /> /* 이 문서는 무시하고, 링크된 문서만 긁어감 */ <meta name="robots" content="index, nofollow" /> /* 이 문서는 긁어가고, 링크는 무시함 */ <meta name="robots" content="noindex, nofollow" /> /* 모두 무시 */
- Open Graph Data
Facebook이 웹 사이트에 더 풍부한 메타 데이터를 제공하기 위해 발명한 메타 데이터 프로토콜.
SNS 공유하기를 통해 미리보기 이미지나, 링크에 대한 설명을 표시하기 위해 사용함.
공유하고자 하는 어플리케이션 마다 문법이 달라질 수 있음 (예 : twitter)
<meta property="og:type" content="website"> <meta property="og:title" content="페이지 제목"> <meta property="og:image" content="페이지 썸네일 이미지 url"> <meta property="og:description" content="페이지 설명"> <meta property="og:url" content="페이지 주소">
- http-equiv
서버나 사용자 에이전트의 작동방식을 변경할 수 있는 지시를 정의.
HTTP 응답 헤더를 시뮬레이션할 때 사용. 반드시 content 속성도 함께 명시
<!-- 문자의 인코딩 방식을 지정 --> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!-- 사용할 기본 스타일 시트를 지정 --> <meta http-equiv="default-style" content="./base.css"> <!-- 문서가 자동으로 새로 고쳐지는 시간 간격(초 단위)을 정의. url이 없으면 새로고침 --> <meta http-equiv="refresh" content="초; url=https://velog.io/@hyuzni"> <!-- 브라우저 호환성을 지정 --> <meta http-equiv="x-ua-compatible" content="IE=edge; Chrome=1"> <!-- 캐쉬 만료시간 정의.(분 단위) -1: 캐쉬를 지우고 새롭게 읽어옴 --> <meta http-equiv="Expires" content="-1"> <!-- 웹페이지에 쓰인 언어 지정, 최근엔 잘 안쓰는 듯 --> <meta http-equiv="content-script-type" content="text/javascript"> <meta http-equiv="content-style-type" content="text/css"><meta http-equiv="title" content="페이지 제목"> <meta http-equiv="publisher" content="제작사 이름"> <meta http-equiv="subject" content="페이지 주제">
- viewport
웹페이지가 사용자에게 보여지는 영역. pc나 테블릿, 휴대폰 등 다양한 viewport 크기에 대응하기 위해 사용되는 요소. 어느 디바이스에서 보느냐에 따라 최적의 화면을 보여주기 위한 viewport tag 설정이 필요하다.
<!-- default --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- width : 가로크기를 조정. 숫자값이 들어갈 수 있고, 'device-width' 는 100% 스케일에서 css 픽셀들로 계산된 화면의 폭을 의미한다. --> <meta name="viewport" content="width=device-width"> <!-- height : 세로크기를 조정. 보통 값을 넣지않는게 보편적이다. --> <meta name="viewport" content="height=device-height"> <!-- initial-scale : zoom 레벨값을 조정. 1.0이 표준이며, css 픽셀과 1:1 관계를 형성한다. --> <meta name="viewport" content="initial-scale=1.0"> <!-- minimum-scale, maximum-scale : 줄일 수 있는 최소크기와, 늘릴 수 있는 최대 크기를 의미. minimum-scale의 default 값은 0.25이며, maximum-scale의 default 값은 1.6이다. --> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"> <!-- shrink-to-fit : safari11 버전에서는 viewport 크기가 보여줘야할 내용보다 작으면 보여줘야 할 내용을 줄여서 보여준다고 한다. no 값을 넣어주면 줄여주는 것을 방지할 수 있다. --> <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no"> <!-- user-scaleable : 사용자가 확대/축소를 할 수 있는지의 여부를 설정한다. default는 yes 이다. --> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scaleable=no">
참고사항
1) <meta> tag의 name 속성이나 http-equiv 속성이 명시되었다면 반드시 content 속성도 함께 명시되어야 하며, 반대로 두 속성이 명시되지 않았다면 content 속성 또한 명시될 수 없다.
2) 많은 <meta> 기능들이 더이상 사용되지 않는다. (예를들어 <meta name="keywords" content="fill, in, your, keywords, here"> 같은, 다른 검색 용어에 대해 해당 페이지의 관련성을 부여하기 위해 검색 엔진에 제공하던 키워드 등..) 스팸 발송자들이 키워드 목록에 수백 개의 키워드를 채워버리는 악용 사례가 생겨 버렸기 때문에 이것들은 검색 엔진들이 아예 무시를 해버리게 되었다.
3) html 5 명세에는 http-equiv 속성에 대해 지원을 하지 않고 표준 방식은 name과 content 속성만을 지원한다. 즉, 제대로 표준을 지킬려면 X-UA-Compatible 같은 편법이 아닌 크로스 브라우징이 되게끔 각 버전에 맞게 스타일 시트, 자바스크립트, HTML Markup 등을 표준화 해서 작업해야함.
참고
https://developer.mozilla.org/ko/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML
https://blog.naver.com/ssi02014/222737069169
https://cleardesign.co.uk/news/meta-tags
