<meta> 태그는 HTML 문서에 대한 메타데이터를 정의하며, 브라우저, 검색엔진, 기타 웹 서비스가 이를 해석하여 동작을 결정한다. 이 정보는 사용자에게 표시되지 않지만, 페이지의 동작 및 외부 노출 방식에 중요한 역할을 한다.

기본 속성

• content: 메타데이터의 실제 값을 지정하며, name 또는 http-equiv와 함께 사용된다.

선택 속성

• http-equiv: HTTP 헤더와 유사한 동작을 수행 (예: content-type, refresh)
• name: 메타데이터의 이름을 지정 (예: description, keywords)

SEO 최적화 관련

<meta name="keywords" content="핵심, 키워드, 목록" />
<meta name="description" content="페이지 내용을 요약하는 150자 이내 설명" />
<meta name="robots" content="index,follow" />

robots 값은 다음과 같은 조합이 가능하다:

• index: 색인 허용
• noindex: 색인 금지
• follow: 링크 추적 허용
• nofollow: 링크 추적 금지

페이지 자동 리디렉션 또는 새로고침 설정:

<meta http-equiv="refresh" content="5; url=https://example.com/" />

기타 유용한 메타 태그:

<meta name="author" content="개발자 이름" />
<meta name="google" content="notranslate" />
<meta name="verify-v1" content="인증 토큰" />

모바일 디바이스 최적화

뷰포트 설정은 반응형 웹 디자인의 핵심이다:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

• width=device-width: 디바이스 화면 너비 기준
• initial-scale: 초기 확대 비율
• user-scalable=no: 사용자 확대/축소 비활성화

iOS 전용 WebApp 설정:

<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="apple-mobile-web-app-title" content="앱 이름" />

자동 감지 기능 비활성화:

<meta name="format-detection" content="telephone=no, email=no" />

스마트 앱 배너 (iOS):

<meta name="apple-itunes-app" content="app-id=123456789, app-argument=https://example.com/path" />

기타 모바일 브라우저 호환성 태그:

<meta name="HandheldFriendly" content="true" />
<meta name="MobileOptimized" content="320" />
<meta name="screen-orientation" content="portrait" />
<meta name="x5-orientation" content="portrait" />
<meta name="full-screen" content="yes" />
<meta name="x5-fullscreen" content="true" />
<meta name="browsermode" content="application" />
<meta name="x5-page-mode" content="app" />
<meta name="msapplication-tap-highlight" content="no" />

일반 웹 페이지 설정

문서 인코딩 선언:

<meta charset="utf-8" />

브라우저 호환성 모드:

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

국내 이중 엔진 브라우저 렌더링 모드 제어:

<meta name="renderer" content="webkit" /> <!-- 웹킷 우선 -->
<meta name="renderer" content="ie-comp" /> <!-- IE 호환 모드 -->
<meta name="renderer" content="ie-stand" /> <!-- IE 표준 모드 -->

캐시 비활성화:

<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Cache-Control" content="no-siteapp" /> <!-- 백두산 등 모바일 트랜스코딩 방지 -->

Windows 8 타일 설정:

<meta name="msapplication-TileColor" content="#000000" />
<meta name="msapplication-TileImage" content="/path/to/icon.png" />

모바일 페이지 매핑 (PC ↔ 모바일):

<meta name="mobile-agent" content="format=html5; url=https://m.example.com/page" />