<meta> 태그는 해당 문서에 대한 정보를 검색 엔진에 제공하는 요소입니다.
<meta> 요소는 언제나 <head> 요소 내부에 위치해야 합니다.
만약 name 속성이나 http-equiv 속성이 명시되었다면 반드시 content 속성도 함께 명시되어야 하며,
반대로 두 속성이 명시되지 않았다면 content 속성 또한 명시될 수 없습니다.
HTML5에서는 <meta> 요소를 통해 웹 페이지에서 사용자가 볼 수 있는 영역인 뷰포트(viewport)를 제어할 수 있도록
name 속성에 viewport 속성값을 제공하고 있습니다.
http-equiv="항목명"
웹 브라우저가 서버에 명령을 내리는 속성으로
name 속성을 대신해 사용할 수 있으며
HTML 문서가 응답 헤더와 함께 웹 서버로부터 웹 브라우저에 전송되었을 때에만 의미를 가집니다.
content="정보값"
meta 정보의 내용을 지정합니다.
name 속성이나 http-equiv 속성과 관련된 값(value)을 명시합니다.
name="정보 이름"
몇 개의 meta 정보의 이름을 정할 수 있으며 지정하지 않으면 http-equiv와 같은 기능을 합니다.
메타태그 종류
1. keywords
검색엔진에 의해 검색되는 단어를 지정합니다.
<meta name="Keywords" content="hyoni TIL" />
2. Description
검색 결과에 표시되는 문자를 지정합니다.
<meta name="description" content="공부한 내용을 기록하는 블로그 입니다." />
3. robots
검색 로봇에 대한 명령은 <mata name="robots">라는 형식으로 지정합니다.
content 속성에는 다음과 같이 지정할 수 있고 복수지정할 때에는 콤마(,)로 구분합니다.
<meta name="Robots" content="noindex, nofollow" />
<meta name="Robots" content="noindex, nofollow" />
위와 같이 하면, 구글에서 자신의 사이트가 색인화 되거나 링크 연결이 되지 않도록 설정할 수 있습니다.
주로 사이트가 개발중일 때, 자신의 사이트 중 일부 페이지가 구글에 노출되길 원치 않을 때 사용합니다.
<meta name="robots" content="index, follow" />
위와 같이 하면, 페이지를 색인화 하고, 링크 연결이 가능합니다.
검색 로봇에 대한 명령의 content 속성 종류
- ALL(기본값): 'index, follow'를 지정한 것과 같습니다.
- None: 'noindex, nofollow'를 지정한 것과 같습니다.
- Index: 그 페이지를 수집 대상으로 합니다.
- Follow: 그 페이지를 포함해 링크가 걸린 곳을 수집대상으로 합니다.
- noindex: 검색 결과에 이 페이지를 표시하지 않습니다.
- nofollow: 이 페이지의 링크를 따라가지 않습니다.
- noarchive: 검색결과에 저장된 페이지 링크를 표시하지 않는다.
이들 name 속성과 content 속성의 값에 대해 html4.01 권고안에는 대문자로 기술하고 대문자와 소문자를 구별하게 되어 있지만
실제 검색로봇은 대, 소문자를 구별하지 않는다고 합니다.
4. charset
문자 코드의 종류 설정 합니다.
문자 깨짐 현상 등 심각한 오류가 나타날 수 있기 때문에 이를 방지하기 위해 인코딩을 선언합니다.
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />UTF-8, UTF-16, UTF-32 : 모든 언어의 문자를 지원하는 인코딩
5. Date
날짜(제작일)
<meta name="Date" content="2023-08-22T16:09:35+09:00" />name="Date"를 사용할 때
content '+09:00'은 GMT(그리니치 표준시)로 부터의 시차이며,
한국은 '+09:00',
미국 동부는 '-05:00'(서머타임 때에는 -04:00)이 되며
나라/지역에 따라 결정됩니다.
6.Content-Script-Type
웹 페이지에 쓰인 언어를 지정합니다.
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
7. X-UA-Compatible
브라우저 호환성을 지정합니다.
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
8. subject
홈페이지 주제를 지정합니다.
<meta http-equiv="Subject" content="기술블로그" />
9. title
제목을 지정합니다.
<meta http-equiv="Title" content="웹 표준 공부" />
10. Author
페이지를 작성한 제작자명을 지정합니다.
<meta http-equiv="Author" content="효니" />
11. Publisher
제작사를 지정합니다.
<meta http-equiv="Publisher" content="효니" />
12. Other Agent
웹 책임자를 지정합니다.
<meta http-equiv="Other Agent" content="효니" />
13. Generator
제작 도구를 지정합니다.
<meta http-equiv="Generator" content="Visual Studio Code" />
14. Reply-to / Email
메일 주소를 지정합니다.
<meta http-equiv="Reply-To" content="test@gmail.com" />
<meta http-equiv="Email" content="test@gamil.com" />
15. Filename
파일 이름을 지정합니다.
<meta http-equiv="Filename" content="index.html" />
16.Location
위치를 지정합니다.
<meta http-equiv="Location" content="위치" />
17. Distribution
배포자를 지정합니다.
<meta http-equiv="Distribution" content="name" />
18. Copyright
저작권을 지정합니다.
<meta http-equiv="Copyright" content="효니" />
19. Build
(제작 년, 월, 일)을 지정합니다.
<meta http-equiv="Build" content="date" />
20. Last-Modified (제작 년, 월, 일)
최종 수정일을 정의합니다.
<meta http-equiv="Last-Modified" content="Tue,22 Aug 2023 16:24:20" />
21. imagetoolbar
그림 위에 마우스 오버 시 이미지 관련 툴바가 생기지 않도록 하기 위해 지정합니다.
<meta http-equiv="imagetoolbar" content="no" />
22. Cache-Control / Pragma
캐시가 되지 않게 하기 위해 정의합니다.
<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="Pragma" content="no-chche" />페이지를 cache에서 가져오지 않게 하며 항상 서버에 접속해서 페이지를 가져옵니다.
방문자의 브라우저가 항상 cache를 읽도록 해 놓아도 이것을 무시하고 페이지를 갱신하여
항상 방문자에게 바뀐 내용을 보여주지만
페이지 출력 속도는 매번 페이지를 가져오므로
cache를 사용할 수 없어서 시간이 많이 걸립니다.
23. Expires
캐시 만료일을 정의합니다.
<meta http-equiv="Expires" content="Tue,30 Aug 2023 10:30:30" />
24. Refresh (새로고침)
60초마다 새로고침 합니다.
<!-- 60초 마다 새로고침 -->
<meta http-equiv="refresh" content="60" />
25. Refresh
입력한 주소로 5초 후 이동하는 것을 정의합니다.
<meta http-equiv="Refresh" content="5; url=주소" />
26. Page-Enter (페이지 들어갈 때 장면 전환 효과)
<meta http-equiv="Page-Enter" content="revealtrans(Duration=1,Transition=12)" />
장면 전환 효과 속성값
- 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 : 임의로 생성
27. viewport (모바일 반응 페이지)
<meta name="viewport" content="width=device-width, initial-scale=1.0">
'기초 지식' 카테고리의 다른 글
| npm, package.json, node_modules 는 무엇일까? (0) | 2024.08.01 |
|---|---|
| 쿼리 스트링(Query String)이란? (0) | 2024.07.31 |
| HTTP 상태 코드 정리 (0) | 2024.07.31 |
| HTTP란? / HTTP와 HTTPS (0) | 2024.07.31 |
| Web API란? (엔드포인트, 메서드: GET, POST, PUT, DELETE, 헤더, 바디) (0) | 2024.07.31 |