메타데이터 태그(Meta tag)란
- HTML 문서의 최상단에 위치하는 태그(tag)로 HEAD 태그 사이 또는 아래에 있어도 되지만 반드시 BODY 태그 위쪽에 위치해야 한다. 브라우저와 검색 엔진에 노출될 수 있도록 웹 문서의 요약 정보들을 포함하고 있다.
Meta tag 기본 구조
- http-equiv =”항목명”
- 웹 브라우저 서버에 명령을 내리는 속성/name 대신에 사용이 가능하다
- name = “정보 이름”
- meta 정보의 이름을 지정한다
- content = “정보 값”
- meta 정보의 내용을 지정한다
Meta tag 종류
01. Keywords. (검색엔진에 검색되어지는 단어 지정)
<meta
name="Keywords"
content="Digitopia01's Engineering Blog, dev blog, learn to code, html"
/>
02. Description. (검색 결과에 표시될 내용 지정)
<meta name="Description" content="안녕하세요 Digitopia01 블로그입니다." />
03. Robots. (검색 로봇 제어)
<meta name="Robots" content="follow" />
ex)
<meta name="Robots" content="index, follow" />
- noindex : 검색 결과에 페이지를 표시하지 않음
- nofollow : 페이지를 포함해 링크된 페이지를 수집하지 않음
- noarchive : 비표준, 페이지를 캐시하지 않음
- All(기본값) : 색인 및 크롤링에 제한이 없는 기본값. index, follow를 동시에 적용한 것과 동일
- none : noindex, nofollow를 동시에 적용한것과 동일
- index : 페이지가 색인되어 검색 결과에 표시될 수 있음
- follow : 페이지를 포함해 링크된 페이지를 검색할 수 있음
- nosnippet : 비표준, 검색 결과에 페이지에 대한 스니핏 혹은 미리보기를 지원하지 않음
04. charset. (문자 코드 종류 설정)
<meta charset="UTF - 8" />
05. author. (html 문서의 저자를 설정)
<meta name="author" content="John Doe" />
06. date. (문서 작성 날짜 설정)
<meta name="Date" content="2023-10-23T15:40:24+09:00" />
content 안에 내용은 연도-월-일T(time)시:분:초+09:00(한국표준시간)으로 입력한다.
07. post__htag__numbering. (브라우저 호환성)
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
08. lang. (문서에 사용된 베이스 언어)
<html lang="en"></html>
meta 태그 대신에 html 태그 안에 사용한다.
09. subject. (문서의 주제)
<meta http-equiv="subject" content="강서구맛집" />
10. publisher. (제작사)
<meta http-equiv="publisher" content="digitopia01" />
11. title. (문서의 제목)
<meta http-equiv="title" content="metataglists" />
12. generator. (제작 도구)
<meta http-equiv="generator" content="atom" />
13. refresh. (새로고침 설정 시간 설정)
<meta http-equiv="refresh" content="30" /> 30초마다 문서가 새로고침한다.
14. viewport. (모바일 반응 페이지 설정)
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
15. distribution. (배포자)
<meta http-equiv="Distribution" content="name" />
16. copyright. (저작권)
<meta http-equiv="copyright" content="name" />
17. last-modified. (마지막 수정일)
<meta http-equiv="Last-Modified" content="Mon, 23 Oct 2023 15:54:23" />
18. page-enter. (페이지 로드시 장면 전환 효과)
<meta http-equiv="page-enter" content="revealtrans(Duration=2, Transition=3)" />
page-enter : 페이지에 들어갈 때 효과 / page-exit : 페이지에서 나올 때 효과
duration 은 동작 시간 / transition은 아래의 리스트 순서 중 선택한다
- Box in : 네모난 박스가 바깥에서 안쪽으로
- Box out : 네모난 박스가 안쪽에서 바깥쪽으로
- Circle in : 원이 바깥에서 안쪽으로
- Circle out : 원이 안쪽에서 바깥쪽으로
- Wipe up : 이미지의 아래에서 위쪽으로 수직 이동
- Wipe down : 이미지의 위에서 아래쪽으로 수직 이동
- Wipe right : 이미지의 왼쪽에서 오른쪽으로 수평 이동
- Wipe left : 이미지의 오른쪽에서 왼쪽으로 수평 이동
- Vertical blinds : 수직 블라인드가 쳐지는 형태로 변환
- Horizontal blinds : 수평 블라인드가 쳐지는 형태로 변환
- Checkerboard across : 바둑판 형태의 격자가 왼쪽에서 오른쪽으로 생성
- Checkerboard down : 바둑판 형태의 격자가 위에서 아래로 생성
- Random dissove : 안개와 비슷한 형태로 전환
- Split vertical in : 왼쪽과 오른쪽 끝에서 중앙으로 수직 이동
- Split vertical out : 중앙에서 양쪽 끝으로 수직 이동
- Split Horizontal in : 양쪽에서 중앙으로 수평 이동
- Split Horizontal out : 중앙에서 양쪽 끝으로 수직이동
- Strips left down : 대각선 형태로 오른쪽 상단에서 왼쪽 하단으로 이동
- Strips left up : 대각선 형태로 오른쪽 하단에서 왼쪽 상단으로 이동
- Strips right down : 대각선 형태로 왼쪽 상단에서 오른쪽 하단으로 이동
- Strips right up : 대각선 형태로 왼쪽 하단에서 오른쪽 상단으로 이동
- Random bars horizontal : 수평선이 무작위로 생성
- Random bars vertical : 수직선이 무작위로 생성
- Random : 임의로 생성
