💡 퀵 접속: htm.kr/metadatas

HTML5 메타데이터 태그 사용법

1. 메타데이터 태그란?

메타데이터 태그는 HTML 문서의 메타 정보를 정의하는 태그입니다. meta, link, script 등의 태그를 사용하여 문서의 문자 인코딩, 뷰포트 설정, 외부 리소스 연결, 스크립트 로딩 등을 처리합니다.

2. 기본 구조

기본 메타데이터 구조

<!DOCTYPE html>
<html lang="ko">
<head>
    <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">
    <link rel="stylesheet" href="styles.css">
    <script src="script.js" defer></script>
</head>
<body>
    <!-- 본문 내용 -->
</body>
</html>

3. 각 태그의 역할

태그	설명	주요 속성	예시
meta	문서 메타 정보	charset, name, content	<meta charset="UTF-8">
link	외부 리소스 연결	rel, href, type	<link rel="stylesheet" href="style.css">
script	자바스크립트 코드	src, type, defer, async	<script src="app.js" defer></script>

4. 실제 사용 예제

<!DOCTYPE html>
<html lang="ko">
<head>
    <!-- 기본 메타 정보 -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <!-- SEO 관련 메타 정보 -->
    <meta name="description" content="웹사이트에 대한 설명">
    <meta name="keywords" content="키워드1, 키워드2, 키워드3">
    <meta name="author" content="작성자 이름">
    
    <!-- Open Graph 메타 정보 -->
    <meta property="og:title" content="페이지 제목">
    <meta property="og:description" content="페이지 설명">
    <meta property="og:image" content="이미지 URL">
    <meta property="og:url" content="페이지 URL">
    
    <!-- 파비콘 -->
    <link rel="icon" type="image/x-icon" href="/favicon.ico">
    <link rel="apple-touch-icon" href="/apple-touch-icon.png">
    
    <!-- CSS 파일 -->
    <link rel="stylesheet" href="/css/normalize.css">
    <link rel="stylesheet" href="/css/style.css">
    
    <!-- 폰트 -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700&display=swap" rel="stylesheet">
    
    <!-- 자바스크립트 -->
    <script src="/js/vendor/modernizr.js" defer></script>
    <script src="/js/main.js" defer></script>
    
    <title>웹사이트 제목</title>
</head>
<body>
    <!-- 본문 내용 -->
</body>
</html>

💡 주의사항

meta 태그는 head 태그 안에 위치해야 합니다.
charset 메타 태그는 문서 최상단에 위치해야 합니다.
viewport 메타 태그는 모바일 최적화에 필수적입니다.
script 태그는 가능한 body 태그 끝부분에 위치시킵니다.
외부 리소스는 적절한 속성으로 최적화합니다.

5. 성능 최적화 팁

스크립트 로딩 최적화
- defer/async 속성 사용
- 필요한 스크립트만 로드
- 스크립트 위치 최적화
CSS 로딩 최적화
- 필요한 CSS만 로드
- 미디어 쿼리 활용
- CSS 파일 병합 및 최소화
리소스 프리로딩
- preconnect 사용
- preload 사용
- prefetch 사용

6. 검증 및 테스트

메타데이터 태그가 올바르게 사용되었는지 확인하는 방법:

W3C 마크업 검증 서비스 사용
Google 검색 콘솔 테스트
Facebook 공유 디버거 사용
성능 테스트 도구 사용
다양한 브라우저에서 테스트

7. 자주 사용되는 메타 태그

<!-- 기본 메타 태그 -->
<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="작성자">

<!-- Open Graph 메타 태그 -->
<meta property="og:title" content="제목">
<meta property="og:description" content="설명">
<meta property="og:image" content="이미지 URL">
<meta property="og:url" content="페이지 URL">
<meta property="og:type" content="website">

<!-- Twitter 카드 메타 태그 -->
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="제목">
<meta name="twitter:description" content="설명">
<meta name="twitter:image" content="이미지 URL">

<!-- 모바일 최적화 메타 태그 -->
<meta name="theme-color" content="#색상코드">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">

<!-- 보안 메타 태그 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="Content-Security-Policy" content="default-src 'self'">