반응형
HTML 문서의 <head> 안에 사용되는 메타 태그(meta tag)는 페이지에 대한 정보를 브라우저나 검색 엔진 등 외부 시스템에 전달하는 역할을 합니다. 이번 글에서는 자주 사용되는 메타 태그들의 종류와 의미, 그리고 적절한 사용법을 예시와 함께 정리합니다.
✅ 메타 태그 기본 문법
<meta name="속성명" content="값">📌 대표적인 메타 태그 종류와 설명
1. 문서 인코딩 설정
<meta charset="UTF-8">- HTML 문서의 문자 인코딩 방식을 설정
- 대부분 UTF-8을 사용하며, 이는 다국어 지원을 의미
2. 문서 정보 제공
<meta name="author" content="홍길동">
<meta name="description" content="이 페이지는 메타태그에 대해 설명합니다.">
<meta name="keywords" content="HTML, meta tag, SEO, 웹 개발">- author: 페이지 제작자
- description: 페이지 요약. 검색엔진에서 요약 문구로 사용됨
- keywords: 관련 키워드 (요즘은 SEO 영향 미미함)
3. 검색 엔진 설정
<meta name="robots" content="index, follow">- 검색 엔진이 이 페이지를 색인(index)하고 링크를 따라가도록 허용
- noindex, nofollow 로 설정하면 검색에서 제외 가능
4. 뷰포트 설정 (모바일 대응)
<meta name="viewport" content="width=device-width, initial-scale=1.0">- 반응형 웹사이트 구현 시 필수
- 디바이스 크기에 맞게 콘텐츠 크기 자동 조정
5. 자동 새로고침 / 리디렉션
<meta http-equiv="refresh" content="5; url=https://example.com">- 5초 후 다른 페이지로 이동
- 사용자 안내 페이지 등에서 활용
6. 캐시 설정
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Pragma" content="no-cache">- 브라우저 캐시 무효화 (주로 테스트용이나 보안상 활용)
7. Open Graph (소셜 미디어 공유용)
<meta property="og:title" content="페이지 제목">
<meta property="og:description" content="페이지 설명">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:url" content="https://example.com">- 페이스북, 카카오톡, 트위터 등에서 링크 공유 시 표시되는 정보
8. Twitter Card (트위터 전용 메타 태그)
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="트위터 공유 제목">
<meta name="twitter:description" content="트위터 공유 설명">
<meta name="twitter:image" content="https://example.com/image.jpg">- 트위터에 최적화된 공유 정보 설정
🧠 메타 태그 사용 시 주의사항
- <meta charset="UTF-8">은 <head>의 가장 위에 위치시킬 것
- 중복된 메타 태그는 피하고, 하나의 문서에 명확하게 정리할 것
- description, og:title, og:description은 SEO 관점에서 매우 중요
- 이미지 URL은 절대경로를 사용하는 것이 좋음
✅ 정리
태그 용도name / propertycontent 예시
| 문자 인코딩 | charset | UTF-8 |
| 설명 | name="description" | 이 페이지는... |
| 검색 설정 | name="robots" | index, follow |
| 반응형 | name="viewport" | width=device-width... |
| OG 공유 | property="og:title" 등 | 제목, 설명, 이미지 등 |
메타 태그는 단순해 보이지만, 검색엔진 노출, 모바일 대응, 소셜 미디어 공유 등 웹 페이지의 품질과 접근성에 큰 영향을 미치는 중요한 요소입니다. 기본부터 Open Graph까지 잘 구성된 메타 태그는 사이트의 전문성과 신뢰도를 높이는 데 도움을 줍니다.
반응형
'Programing > HTML' 카테고리의 다른 글
| HTML <input> 시간 관련 타입 완전 정복: time, month, week, date, datetime-local (2) | 2025.04.26 |
|---|---|
| 🔤 HTML 특수 문자(Entity) 정리 가이드 (0) | 2025.04.18 |
| HTML5 Video - DOM 속성 및 이벤트. (0) | 2012.01.26 |
| HTML5 mobile meta 태그 (0) | 2011.01.11 |
| table border (0) | 2010.04.07 |
| html target 옵션 (0) | 2009.12.29 |
| 페이지 로딩중(로딩바) 표시 (0) | 2009.11.26 |
| 메모 (0) | 2009.06.01 |