[HTML] HTML 메타 태그(meta tag) 종류 및 사용법 정리

FE/HTML

[HTML] HTML 메타 태그(meta tag) 종류 및 사용법 정리

지금해냥 2024. 11. 7. 10:23

웹페이지의 정보를 브라우저와 검색 엔진에 전달하는 중요한 수단이 바로 **메타 태그(meta tag)**입니다. <head> 영역에 위치하며, 눈에 보이지 않지만 웹사이트 품질과 검색 노출에 큰 영향을 줍니다.

📌 메타 태그란?

<meta>는 HTML 문서의 메타데이터(문서 자체에 대한 정보)를 정의합니다.
대부분 <head> 태그 안에 위치합니다.
브라우저 설정, 검색 엔진 최적화(SEO), 소셜 공유 정보 등 다양한 용도로 사용됩니다.

✅ 자주 쓰이는 메타 태그 종류

1️⃣ 페이지 문자 인코딩 설정

<meta charset="UTF-8">

페이지의 문자셋을 UTF-8로 설정 (한글 포함 다국어 호환)
가장 먼저 작성해야 함

2️⃣ 반응형 뷰포트 설정

<meta name="viewport" content="width=device-width, initial-scale=1.0">

모바일 대응에 필수
화면 크기에 맞게 콘텐츠를 스케일 조정

3️⃣ 페이지 설명 (SEO)

<meta name="description" content="이 페이지는 HTML 메타태그에 대해 설명합니다.">

검색 결과에 표시되는 페이지 설명 문구
길이: 150자 이내 권장

4️⃣ 검색엔진 로봇 제어

<meta name="robots" content="index, follow">

index: 페이지 색인 허용
noindex: 색인 금지
follow: 링크 따라가기 허용
nofollow: 링크 추적 금지

5️⃣ 작성자 정보

<meta name="author" content="지금해냥">

페이지 작성자 정보 명시
검색엔진에는 크게 영향 없지만 문서 정보로 기록됨

6️⃣ 키워드 (구시대적 방식)

<meta name="keywords" content="HTML, meta tag, SEO, 웹페이지 설정">

현재 대부분의 검색엔진에서 사용하지 않음 (구글은 무시함)

7️⃣ 새로고침 또는 리디렉션

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

5초 후 특정 페이지로 자동 이동
UX 저하 가능성 있으므로 JS나 HTTP 리디렉션 권장

8️⃣ 캐시 제어

<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="pragma" content="no-cache">

브라우저 캐싱을 방지할 수 있음
실시간 데이터가 필요한 서비스에 사용

9️⃣ 소셜 미디어용 Open Graph 태그 (페이스북, 카카오 등)

<meta property="og:title" content="메타태그 완전정복">
<meta property="og:description" content="HTML 메타태그 종류와 사용법을 정리했습니다.">
<meta property="og:image" content="https://example.com/image.png">
<meta property="og:url" content="https://example.com/meta-guide">

소셜 미디어 공유 시 보여지는 썸네일/제목/설명 설정
og: 속성은 Open Graph 프로토콜 기반

🔒

1️⃣0️⃣ 보안 관련 – CSP(Content Security Policy)

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' https://apis.example.com">

외부 스크립트 로딩 제한
XSS 등의 보안 취약점 예방 가능
복잡한 설정이므로 보안 정책에 맞게 작성 필요

✨ 마무리 요약

목적	name/property	content 예시
문자 인코딩	charset	UTF-8
반응형 설정	viewport	width=device-width, initial-scale=1
SEO 설명문구	description	페이지 설명
검색엔진 제어	robots	noindex, nofollow
작성자 정보	author	지금해냥
키워드(과거 사용)	keywords	HTML, meta tag
리디렉션	http-equiv="refresh"	3; url=...
캐시 제어	http-equiv="cache-control"	no-cache
소셜 공유 정보	og:title, og:image 등	Open Graph 태그들
보안정책	Content-Security-Policy	script-src 'self' ...

참고자료:

https://inpa.tistory.com/entry/HTML-%F0%9F%93%9A-meta-%ED%83%9C%EA%B7%B8-%EC%A0%95%EB%A6%AC

🏷️ 메타(meta) 태그 종류 & 사용법

메타태그(meta tag) 란 하이퍼텍스트(Hyper text) 생성 언어 HTML 문서의 맨 위쪽에 위치하는 태그(tag)로 HEAD 태그 사이 또는 뒤에 있어도 되지만 반드시 BODY 태그 앞쪽에 위치해야 한다. 브라우저와

inpa.tistory.com

LIST