메타태그
HTML 에는 메타 데이터가 들어가는 <head> 와 웹페이지에 표시될 컨텐츠 데이터가 들어가는 <body> 태그가 있습니다.
<head> 에 들어가는 메타 데이터는 <메타 태그> 로 작성됩니다.
<meta> 태그에는 연결된 CSS 등 문서, 파비콘 (Favicon), 페이지 제목 , 언어 등
본문에 표시될 필요는 없지만 웹에 대한 정보를 알려주는 것들이 포함됩니다.
보통 메타 태그는 웹페이지에 표시되지 않지만,
파비콘 과 페이지 제목 은 아래 이미지처럼 웹페이지의 본문 외 영역에서 확인할 수 있는 것도 있습니다.
메타태그의 속성
<meta> 태그에는 기본적으로 charset , http-equiv , name , content 의 4가지 속성이 있습니다.
속성은 모두 다 입력할 필욘느 없고, 필요한 값만 입력합니다.
charset
<meta charset="utf-8"> 은 웹의 데이터를 utf-8 로 인코딩하도록 명시합니다.
한글과 기타 내용이 잘 나오게 하기 위해서, 대부분 utf-8 을 사용하게 됩니다.
http-equiv
http-equiv 는 브라우저, 캐시, 등 컨텐츠 속성에 명시된 값에 대한 HTTP 헤더를 제공합니다.
만약 http-equiv 속성이 명시되어 있다면, 반드시 content 속성도 함께 명시되어야만 합니다.
관련된 예시는 아래와 같습니다.
<!-- 호환성표기로, 인터넷 익스플로러의 렌더링 엔진 선택 -->
<meta http-euqiv="x-UA-Compatible" content="ie=edge"/>
<!-- 특정 정보 명시 -->
<meta http-equiv="Copyright" content="" />
언어뜻 그대로 저런 정보들을 담을수 있다.
<!-- 캐시 컨트롤 -->
<meta http-equiv="cashe-control" content="no-cashe"/>
<meta http-equiv="Pragma" content="no-cache"/>
<!-- 캐시 만료일 경과시 사용하지 않고, 서버에서 로드>
<meta http-equiv="expires" content="mon,08,may 2025 12:00">
<!-- 60초마다 페이지 리프레쉬 -->
<meta http-equiv="refresh" content="60"/>
<!-- 10초 후에 프로덕트 스페이스로 이동 -->
<meta http-equiv="Refresh" content="10; url=https:://prd-space.tistory.com" />
name
name 속성에서는 SEO 를 위한 정보부터, 뷰포트 (모바일 기기의 너비 및 높이) 등 다양한 정보를 설정할 수 있습니다.
대표적인 name 속성의 예시는 아래와 같습니다.
<!-- 모바일 기기 뷰포트 설정 -->
<meta name="viewport" content="width=device-width",initial-scale=1.0/>
<!-- 모바일 기기 줌인/아웃 설정 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0,
minimum-scale=1.0, maximum-scale=3.0"/>
<!-- 검색엔진 디스크립션 -->
<meta name="description content="프로덕트 스페이스입니다."/>
<!-- 검색엔진 키워드 -->
<meta name="keywords" content="프로덕트, 스페이스"/>
<!-- 검색엔진 로봇 설정 -->
<meta name="robots" content="all"/>
<meta name="robots" content=""index,follow"/>
<meta name="robots" content="noindex, nofollow"/>
content
content 속성은 말 그대로, 앞에 명시한 다른 속성에 대한 컨텐츠를 나타냅니다.
예를 들어, 아래의 예시는 똑같이 name="robots" 에 대한 태그이지만,
content="index,follow" 는 웹페이지를 인덱싱 및 수집하도록 명시하는 것인 반면
content="noindex,nofollow" 는 웹페이지를 인덱싱 및 수집하지 않도록 명시하는 것입니다.
<!-- 검색엔진 로봇 설정 -->
<meta name="robots" content="all"/>
<meta name="robots" content=""index,follow"/>
<meta name="robots" content="noindex, nofollow"/>
'WEB' 카테고리의 다른 글
| HTML 카카오, 트위터, 페이스북 등 OG태그 설정 (0) | 2022.06.04 |
|---|