meta, title, link, Open Graph, favicon으로 문서 정보를 설정한다.
head와 메타데이터
head는 화면에 보이지 않지만 매우 중요합니다. 문자 인코딩, 모바일 대응, 검색 결과 미리보기, 공유 카드, 파비콘이 모두 여기서 결정됩니다. 이번 강의에서는 핵심 메타데이터를 배웁니다.
학습 목표
meta charset과viewport의 역할을 안다.title과meta description으로 검색 정보를 설정한다.link로 스타일과 파비콘을 연결한다.- Open Graph로 공유 미리보기를 만든다.
필수 meta 태그
거의 모든 문서에 들어가는 두 가지입니다.
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
charset="utf-8"은 한글을 포함한 전 세계 문자를 깨지지 않게 표시합니다. viewport는 모바일에서 화면 너비에 맞춰 페이지를 렌더링하게 합니다.
⚠️ 주의 —
charset을 빠뜨리거나 다른 값으로 지정하면 한글이 깨질 수 있습니다.charset은head의 가장 위쪽에 두는 것이 권장됩니다.
title과 description
title은 브라우저 탭과 검색 결과 제목에 쓰이고, meta description은 검색 결과의 요약문에 쓰입니다.
<title>HTML 강좌 - 메타데이터 다루기</title>
<meta name="description" content="HTML head에 들어가는 메타데이터를 쉽게 배웁니다." />
💡 TIP —
title은 페이지마다 고유하게,description은 한두 문장으로 핵심을 담으면 검색 노출에 유리합니다.
link로 연결하기
link는 외부 자원을 문서에 연결합니다. 가장 흔한 용도는 CSS와 파비콘입니다.
<link rel="stylesheet" href="/styles/main.css" />
<link rel="icon" href="/favicon.ico" />
<link rel="canonical" href="https://example.com/lesson/8" />
| rel 값 | 용도 |
|---|---|
stylesheet | CSS 파일 연결 |
icon | 파비콘 지정 |
canonical | 대표 URL 지정(중복 방지) |
preconnect | 외부 서버 미리 연결 |
Open Graph
Open Graph 태그는 카카오톡, 페이스북 등에서 링크를 공유할 때 보이는 카드(제목, 설명, 이미지)를 결정합니다.
<meta property="og:title" content="HTML 강좌" />
<meta property="og:description" content="HTML을 처음부터 배웁니다." />
<meta property="og:image" content="https://example.com/og.png" />
<meta property="og:url" content="https://example.com/lesson/8" />
<meta property="og:type" content="website" />
💡 TIP —
og:image는 권장 크기(1200x630)를 지키고 절대 URL로 지정해야 공유 시 이미지가 제대로 표시됩니다.
favicon
파비콘은 탭과 북마크에 보이는 작은 아이콘입니다. 전통적인 .ico와 함께 고해상도용 PNG를 함께 제공할 수 있습니다.
<link rel="icon" href="/favicon.ico" sizes="any" />
<link rel="icon" type="image/png" href="/icon-32.png" sizes="32x32" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
요약
charset="utf-8"로 한글 깨짐을 방지하고,viewport로 모바일에 대응합니다.title과meta description은 검색 결과 노출에 직접 영향을 줍니다.link로 CSS, 파비콘, 대표 URL 등을 연결합니다.- Open Graph로 공유 미리보기 카드를 설정합니다.
- 파비콘은
.ico와 PNG를 함께 제공하면 좋습니다.
연습문제
- 한글이 깨지지 않고 모바일에 대응하는 필수 meta 두 개를 작성하세요.
- 페이지 제목과 검색 요약문을 설정하세요.
- CSS 파일과 파비콘을 연결하세요.
- 카카오톡 공유 카드를 위한 Open Graph 태그를 작성하세요.
힌트 —
og:image는 절대 URL이어야 합니다.
💡 연습문제 풀이
불러오는 중…
댓글 0
“HTML” 강좌에 대한 댓글입니다.