💡 퀵 접속: htm.kr/head

HTML5 Head 태그 사용법

1. Head 태그란?

Head 태그는 HTML 문서의 메타데이터를 포함하는 컨테이너로, 문서의 제목, 문자 인코딩, 스타일시트, 스크립트 등의 정보를 담고 있습니다.

2. 기본 구조

Head 태그의 기본 사용법

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>페이지 제목</title>
    <link rel="stylesheet" href="styles.css">
    <script src="script.js"></script>
</head>

3. Head 태그 내 주요 요소

태그	설명	예시
title	문서의 제목	<title>제목</title>
meta	메타데이터 정의	<meta charset="UTF-8">
link	외부 리소스 연결	<link rel="stylesheet" href="style.css">
script	자바스크립트 코드	<script src="script.js"></script>
style	CSS 스타일 정의	<style>body { color: blue; }</style>

4. 자주 사용되는 Meta 태그

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="페이지 설명">
<meta name="keywords" content="키워드1, 키워드2">
<meta name="author" content="작성자">
<meta name="robots" content="index, follow">

💡 주의사항

head 태그는 html 태그 바로 다음에 위치해야 합니다.
title 태그는 반드시 포함해야 합니다.
meta charset은 문서의 문자 인코딩을 지정하는 데 중요합니다.
viewport meta 태그는 반응형 웹 디자인에 필수적입니다.
외부 리소스는 가능한 한 최소화하는 것이 좋습니다.

5. SEO를 위한 Head 태그 최적화

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>최적화된 페이지 제목</title>
    <meta name="description" content="페이지에 대한 명확하고 간결한 설명">
    <meta name="keywords" content="관련 키워드1, 키워드2, 키워드3">
    <meta name="author" content="작성자 이름">
    <meta name="robots" content="index, follow">
    <link rel="canonical" href="https://example.com/page">
    <meta property="og:title" content="소셜 미디어 제목">
    <meta property="og:description" content="소셜 미디어 설명">
    <meta property="og:image" content="이미지 URL">
</head>

6. 성능 최적화 팁

CSS 파일은 head 태그 내에 배치
JavaScript 파일은 가능한 body 태그 끝에 배치
불필요한 메타 태그 제거
외부 리소스는 필요한 것만 로드
리소스 프리로딩 활용

7. 검증 및 테스트

Head 태그가 올바르게 구성되었는지 확인하는 방법:

W3C 마크업 검증 서비스 사용
Google Search Console에서 메타데이터 확인
소셜 미디어 공유 미리보기 테스트
페이지 로딩 속도 테스트