메타 태그(meta tag) 란 무엇인가?
요즘 브라우저로 수많은 좋은 웹사이트와 콘텐츠들을 접할 수 있게 되었다. 그런데 아무리 좋은 사이트나 콘텐츠를 구축해도 구글이나 네이버와 같은 대형 검색 엔진 사이트에서 검색이 되지 않는다면 해당 사이트의 사용자 수가 매우 적을 것이다. 이러한 문제를 해결하기 위해 개발적인 측면에서 사용되는 가장 핵심적인 역할이 바로 <meta> 태그인 것이다.
<meta> 태그는 해당 웹 페이지의 요약이므로 매우 중요하다고 볼 수 있으며, 해당 문서에 대한 정보인 메타데이터(metadata)를 정의할 때 사용한다.
하이퍼텍스트(Hyper text) 생성 언어 HTML 문서의 맨 위쪽에 위치하는 태그로 <head> 태그 사이 또는 뒤에 있어도 되지만 반드시 BODY 태그 앞쪽에 위치해야 한다.
브라우저와 검색 엔진을 사용할 수 있도록 웹 문서의 정보를 포함하고 있다.
메타 데이터(metadata)
<meta> 태그를 통해서 웹 페이지의 제목, 문자 인코딩, 뷰포트 설정, 검색 엔진 최적화 정보, 작성자 정보등을 포함할 수 있다.
메타데이터는 웹 페이지의 검색 엔진 최적화(SEO, Search Engine Optimization ), 소셜 미디어 공유, 브라우저의 렌더링 등 다양한 측면에서 중요하다.
메타 태그(meta tag)의 속성
<meta> 태그의 속성으로는 http-equiv, name, content가 있다.
만약 name 속성이나 http-equiv 속성이 명시되었다면 반드시 content 속성도 함께 명시되어야 하며, 반대로 두 속성이 명시되지 않았다면 content 속성 또한 명시될 수 없다.
| http-equiv="항목 명" | - 웹 브라우저 서버에 명령을 내리는 속성 - name 속성을 대신해 사용할 수 있음 - html 문서가 응답 헤더와 함께 서버로부터 웹 브라우저에 전송되었을때만 의미를 가짐 - content 속성의 정보, 값을 위한 HTTP header를 제공 |
| name="정보 이름" | - meta 정보의 이름을 지정 - 여러개 meta 정보의 이름을 정할 수 있으며, 지정하지 않으면 http-equiv와 같은 기능 |
| content="정보 값" | - meta 정보의 내용을 지정 - name 속성과 http-equiv와 연관된 값을 줌 |
HTML5에서는 <meta> 요소를 통해 웹 페이지에서 사용자가 볼 수 있는 영역인 뷰포트(viewport)를 제어할 수 있도록 name 속성에 viewport 속성값을 제공하고 있다.
메타 태그(meta tag)의 종류
1. keywords (검색 엔진에 의해 검색되는 단어 지정)
<meta name="keywords" content="chimsil, dev, meta, tag">
<meta name="keywords" content="web, HTML, CSS, Javascript">2. description (검색 결과에 표시되는 문자 지정)
<meta name="description" content="안녕하세요 chimsil frontend developer 입니다.">3. author (문서의 저자 지정)
<meta name="author" content="chimsil dev">
4. title (제목)
<meta name="title" content="dev study" />5. subject (홈페이지 주제 지정)
<meta name=="subject" content="기술블로그" />6. viewport (모바일에 반응하는 페이지 지정)
<meta name="viewport" content="width=device-width, initial-scale=1.0">7. robots (검색 로봇 제어)
<meta name="robots" content="noindex, nofollow, noarchive" />
검색 로봇에 대한 content 속성 종류
- noindex: 검색 결과에 이 페이지를 표시 하지 않는다.
- nofollow: 이 페이지의 링크를 따라가지 않는다.
- noarchive: 검색 결과에 저장된 페이지 링크를 표시하지 않는다.
- All(기본값): 색인 생성이나 게재에 대한 제한이 없음, 기본값이므로 명시적으로 표시해도 효과 없음
- Non: noindex, nofollow와 같음
- index: 그 페이지를 수집대상으로 한다.
- Follow: 그 페이지를 포함해 링크가 걸린 곳을 수집대상으로 한다.
8. charset (문자 코드의 종류 지정)
<meta charset="UTF-8" />
인코딩하는 방식을 선언하는 이유는 문자 깨짐 현상 등 오류가 나타날 수 있으므로 이를 방지하기 위해 가장 기본이 되는 인코딩을 선언한다.
9. Date (날짜, 제작일 지정)
<meta name="Date" content=="2024-03-01T22:25:10+09:00" />
content 속성에 작성 된 "+09:00"은 GMT(그리니치 표준시)로 부터의 한국의 시차이다.
그래서 나라/지역에 따라 content를 설정하면 된다.
10. Content-Script-Type (웹페이지에 쓰인 언어)
<meta name="Content-Script-Type" content="Text/javascript" />11. X-UA-Compatible (브라우저의 호환성)
<meta name="X-UA-Compatible" content="IE-edge, chrome-1" />
IE-edge : 최신 버전으로 렌더링
chrome=1 : 크롬프레임 사용 (크롬프레임은 ActiveX, IE에서만 작동)
12. publisher (제작사)
<meta name="publisher" content="chimsil" />13. Other Agent (웹 책임자)
<meta name="Other Agent" content="chimsil" />14. Generator (제작 도구)
<meta name="Generator" content="Visual Studio Code" />15. Reply-To / Email (메일 주소)
<meta http-equiv="Reply-To" content="wogml3270@gmail.com" />
<meta http-equiv="Email" content ="wogml3270@gmail.com" />16. Filename (파일 이름)
<meta http-equiv="Filename" content="index.html" />17. Location (위치)
<meta http-equiv="Location" content="위치" />
<meta name=”geo.region” content=”US-MN” />
<meta name=”geo.placename” content=”Minneapolis” />
<meta name=”geo.position” content=”44.980257;-93.270034″ />
<meta name=”ICBM” content=”44.980257, -93.270034″ />18. Distribution(배포자)
<meta http-equiv="Distribution" content="chimsil" />19. Copyright (저작권)
<meta http-equiv="Copyright" content="chimsil" />20. Expires (캐시 만료일)
<meta http-equiv="Expires" content="Mon, 05 Sep 2024 01:01:01 GMT" />21. Refresh (새로 고침, 입력한 주소로 n초 후 이동)
<!-- 180초마다 새로고침 -->
<meta http-equiv="refresh" content="180" />
<!-- 네이버 주소로 3초 후 이동 -->
<meta http-equiv="refresh" content="3;url=http://naver.com" />22. Page-Enter, Page-Exit, Site-Enter, Site-Exit (장면 전환 효과)
<meta http-equiv="Page-Enter" content="RevealTrans(Duration=3, Transition=23)" />
<meta http-equiv="Page-Exit" content="RevealTrans(Duration=3, Transition=23)" />
<meta http-equiv="Site-Enter" content="RevealTrans(Duration=3, Transition=23)" />
<meta http-equiv="Site-Exit" content="RevealTrans(Duration=3, Transition=23)" />
content 속성으로는 시간을 지정하는 Duration과 전환 효과의 종류를 지정하는 Transition이 있다.
Transition Property 값은 0~23 효과를 지정할 수 있으며 마지막 23은 랜덤으로 효과를 준다.
아래는 Transition의 종류를 표로 나타내었다.
| Index | Name | Descript |
| 0 | Box In | 네모난 박스가 바깥쪽에서 안쪽으로 |
| 1 | Box Out | 네모난 박스가 안쪽에서 바깥쪽으로 |
| 2 | Circle in | 원이 바깥쪽에서 안쪽으로 |
| 3 | Circle out | 원이 안쪽에서 바깥쪽으로 |
| 4 | Wipe up | 이미지의 아래에서 위쪽으로 수직 이동 |
| 5 | Wipe down | 이미지의 위에서 아래쪽으로 수직 이동 |
| 6 | Wipe right | 이미지의 왼쪽에서 오른쪽으로 수평이동 |
| 7 | Wipe left | 이미지의 오른쪽에서 왼쪽으로 수평이동 |
| 8 | Vertical blinds | 수직 블라인드가 쳐지는 형태로 변환 |
| 9 | Horizontal blinds | 수평 블라인드가 쳐지는 형태로 변환 |
| 10 | Checkerboard across | 바둑판 형태의 격자가 위에서 아래로 생성 |
| 11 | Checkerboard down | 바둑판 형태의 격자가 위에서 아래로 생성 |
| 12 | Random dissove | 안개와 비슷한 형태로 전환 |
| 13 | Split vertical in | 양쪽 끝에서 중앙으로 수직 이동 |
| 14 | Split vertical out | 중앙에서 양쪽 끝으로 수직 이동 |
| 15 | Split horizontal in | 양쪽 끝에서 중앙으로 수평 이동 |
| 16 | Split horizontal out | 중앙에서 양쪽 끝으로 수평 이동 |
| 17 | Strips left down | 대각선 형태로 오른쪽 상단에서 왼쪽 하단으로 이동 |
| 18 | Strips left up | 대각선 형태로 오른쪽 하단에서 왼쪽 상단으로 이동 |
| 19 | Strips right down | 대각선 형태로 왼쪽 상단에서 오른쪽 하단으로 이동 |
| 20 | Stirps right up | 대각선 형태로 왼쪽 하단에서 오른쪽 상단으로 이동 |
| 21 | Random bars horizontal | 수평선이 랜덤으로 무작위로 생성 |
| 22 | Random bars vertical | 수직선이 랜덤으로 무작위로 생성 |
| 23 | Random | 임의로 랜덤으로 생성 |
'Frontend > HTML' 카테고리의 다른 글
| [HTML] DOCTYPE 의 의미와 HTML 태그 정리 (3) | 2024.03.01 |
|---|
