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>

💡 주의사항

5. 성능 최적화 팁

6. 검증 및 테스트

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

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'">