728x90
반응형
728x90
목 차
반응형
1. <meta> 태그란?
- HTML의 <meta> 태그는 웹 페이지의 메타데이터를 정의하는 데 사용됩니다. 메타데이터는 사용자에게 직접 표시되지는 않지만, 브라우저나 검색 엔진, 기타 웹 서비스가 페이지를 이해하고 처리하는 데 중요한 정보를 제공합니다. <meta> 태그는 <head> 태그 내부에 위치하며, 다양한 속성으로 사용됩니다.
2. charset 속성
- 문서에서 사용되는 문자 인코딩을 지정합니다. 일반적으로 UTF-8을 사용하여 대부분의 언어와 기호를 지원합니다.
<meta charset="UTF-8">
3. name과 content 속성
- 특정 메타데이터의 이름과 그 값을 정의할 때 사용됩니다.
3-1. 페이지 설명 (description)
- 검색 엔진 결과 페이지에서 페이지 요약을 제공하는 데 사용됩니다.
<meta name="description" content="This is an example of a meta description.">
3-2. 키워드 (keywords)
- 검색 엔진에서 페이지를 인덱싱할 때 참고할 수 있는 키워드 목록입니다. 요즘은 대부분의 검색 엔진이 이 태그를 신뢰하지 않으므로 많이 사용되지 않습니다.
<meta name="keywords" content="HTML, meta tags, SEO">
3-3. 저자 (author)
- 페이지 작성자에 대한 정보를 제공하는 데 사용됩니다.
<meta name="author" content="John Doe">
3-4. 뷰포트 (viewport)
- 반응형 웹 디자인을 구현하기 위해 주로 사용됩니다. 특히 모바일 기기에서 웹 페이지가 어떻게 렌더링 될지를 제어합니다.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
4. http-equiv 속성
- HTTP 헤더와 유사한 역할을 하며, 브라우저가 페이지를 처리하는 방식을 제어합니다.
4-1. 캐시 제어 (cache-control)
- 브라우저 캐싱을 제어합니다.
<meta http-equiv="cache-control" content="no-cache">
4-2. 리프레시 (refresh)
- 지정된 시간 후 페이지를 자동으로 새로 고치거나 다른 URL로 리다이렉트할 수 있습니다.
<meta http-equiv="refresh" content="30"> <!-- 30초 후 새로고침 -->
<meta http-equiv="refresh" content="5; url=https://example.com"> <!-- 5초 후 리다이렉트 -->
5. Open Graph 및 Twitter Card
- 페이스북, 트위터 등 소셜 미디어에서 웹 페이지가 공유될 때, 미리보기 카드로 표시되는 정보를 정의할 수 있습니다.
5-1. Open Graph (og)
- 페이스북과 같은 소셜 네트워크에서 페이지의 타이틀, 설명, 이미지 등을 정의합니다.
<meta property="og:title" content="The Rock">
<meta property="og:description" content="A movie about...">
<meta property="og:image" content="https://example.com/rock.jpg">
<meta property="og:url" content="https://example.com">
5-2. Twitter Card
- 트위터에서 페이지가 어떻게 표시될지 정의합니다.
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="The Rock">
<meta name="twitter:description" content="A movie about...">
<meta name="twitter:image" content="https://example.com/rock.jpg">
6. 기타 메타 태그
- 특정 플랫폼이나 기능에 맞춘 다양한 메타 태그들이 있습니다.
6-1. Robots
- 검색 엔진이 이 페이지를 크롤링할지 인덱싱할지를 결정합니다.
<meta name="robots" content="noindex, nofollow">
6-2. 권한 정책 (Permissions Policy)
- 브라우저에서 페이지가 사용할 수 있는 기능(카메라, 위치, 마이크 등)을 제어합니다.
<meta http-equiv="permissions-policy" content="geolocation=(), microphone=()">
7. 요약
- <meta> 태그는 페이지의 메타데이터를 설정하는 데 사용됩니다.
- 검색 엔진 최적화(SEO), 페이지 인코딩, 캐시 제어, 소셜 미디어 공유 설정 등 다양한 용도로 사용됩니다.
- <head> 태그 안에 위치하며, 브라우저나 검색 엔진이 페이지를 이해하고 처리하는 데 필요한 정보를 제공합니다.
728x90
반응형
'프로그래밍 > HTML' 카테고리의 다른 글
| [HTML] ol 태그 (0) | 2024.10.20 |
|---|---|
| [HTML] ul 태그 (0) | 2024.10.19 |
| [HTML] link 태그 (0) | 2024.10.13 |
| [HTML] script 태그 (0) | 2024.10.12 |
| [HTML] p 태그 - 줄바꿈 (0) | 2024.10.09 |