이번 포스팅에서는 <meta> 태그를 이용한 메타 데이터 활용과 SEO 기초에 대해 알아보겠습니다. 이론부터 실습까지, 웹 페이지의 메타 정보를 어떻게 관리하는지 자세히 학습해 봅시다.
자동목차
이론
HTML의 <meta> 태그는 웹 페이지에 대한 메타 데이터를 제공하는 데 사용됩니다. 메타 데이터는 웹 페이지의 내용을 설명하지 않지만, 검색 엔진 최적화(SEO)나 브라우저 동작 등에 중요한 역할을 합니다.
실습
간단한 메타 데이터 설정 예제를 보겠습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="메타 데이터 활용하기">
<meta name="keywords" content="HTML, meta tag, SEO">
<meta name="author" content="Your Name">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<!-- 본문 내용 -->
</body>
</html>
코드 설명
- <meta charset="UTF-8">: 웹 페이지의 문자 인코딩을 UTF-8로 지정합니다.
- <meta name="description" content="메타 데이터 활용하기">: 웹 페이지의 내용을 간략하게 설명합니다. 이 정보는 검색 엔진 결과 페이지에서 사용됩니다.
- <meta name="keywords" content="HTML, meta tag, SEO">: 웹 페이지의 주요 키워드를 나열합니다. 과거에는 검색 엔진 최적화에 중요한 역할을 했으나, 현재는 대부분의 검색 엔진이 이 정보를 무시합니다.
- <meta name="author" content="Your Name">: 웹 페이지의 저자 정보를 제공합니다.
- <meta name="viewport" content="width=device-width, initial-scale=1.0">: 뷰포트의 너비를 장치의 너비로 설정하고, 초기 확대 비율을 1.0으로 설정합니다. 이 설정은 반응형 웹 디자인에서 중요합니다.
마무리
HTML <meta> 태그는 웹 페이지에 대한 중요한 메타 데이터를 제공합니다. 이번 포스팅을 통해 메타 데이터의 활용 방법과 SEO 기초를 학습하였습니다. 이론 학습 후에는 반드시 실습을 통해 이해도를 높이는 것을 권장드립니다.