HTML 메타 태그란 무엇인가?
안녕하세요! 그레이해커 월횽입니다.
오늘은 HTML의 head 태그 안에 들어가는 meta tag(메타 태그)에 대해 알아보겠습니다.
지난 시간에는 HTML 기본 구조와 태그를 배웠고, 오늘은 그 구조에 꼭 들어가는 메타 태그를 집중적으로 설명합니다.
1. 메타 태그(meta tag)란?
메타 태그(meta tag)는 웹페이지의 정보를 검색엔진이나 브라우저에 전달하는 역할을 합니다.
주로 <head>와 </head> 사이에 위치하며, SEO(검색엔진 최적화)에 매우 중요한 태그입니다.
- 검색엔진(구글, 네이버 등)이 내 웹사이트를 이해하고, 더 잘 노출시키도록 도와줍니다.
- 웹사이트의 문자 인코딩, 설명, 키워드, 작성자 등 다양한 정보를 담을 수 있습니다.
2. 메타 태그의 위치와 기본 구조
메타 태그는 반드시 <head> 태그 내부에 위치해야 하며, 아래와 같은 구조로 작성합니다.
<!DOCTYPE html>
<html>
<head>
<!-- 이 부분에 meta 태그가 들어갑니다 -->
</head>
<body>
</body>
</html>
예를 들어, 문자 인코딩을 지정하는 meta 태그는 다음과 같이 작성합니다.
<meta charset="utf-8">3. 메타 태그의 실제 예시
아래는 가장 기본적인 meta tag 사용 예시입니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
</body>
</html>
meta charset="utf-8"은 한글, 영어 등 다양한 언어를 웹페이지에서 깨지지 않고 표시하도록 도와줍니다.
이외에도 다양한 meta 태그가 있으며, 다음 강의에서 자세히 다룰 예정입니다.
4. 메타 태그가 중요한 이유 (SEO와의 관계)
메타 태그(meta tag)는 검색엔진 최적화(SEO)에 필수입니다.
구글, 네이버 등 검색엔진의 크롤러가 웹사이트의 정보를 수집할 때, 메타 태그를 참고하여 사이트의 주제와 내용을 파악합니다.
- 사이트 설명(
<meta name="description">) - 키워드(
<meta name="keywords">) - 작성자(
<meta name="author">)
5. 정리 및 다음 강의 안내
오늘은 HTML meta tag(메타 태그)의 기본 개념과 사용법을 배웠습니다.
다음 시간에는 다양한 meta tag 종류와 실제 SEO에 활용하는 방법을 자세히 알아보겠습니다!
이전 강의 보기: [HTML 강의] 1강 - HTML 기본 태그
다음 강의 보기: [HTML 강의] 3강 - 메타 태그(meta tag) 종류 & 의미