내 페이지가 카카오톡에서 예쁘게 나오게 하려면?#
카카오톡에서 링크를 공유하면 미리보기가 뜹니다. 제목, 설명, 이미지가 예쁘게 카드 형태로 보이죠.
이게 전부 HTML의 <meta> 태그로 설정됩니다. 이번 편에서는 브라우저와 검색 엔진, SNS가 내 페이지를 이해하는 데 사용하는 메타 태그를 배웁니다.
메타 태그란?#
<meta> 태그는 <head> 안에 들어가는 태그로, 화면에는 보이지 않지만 중요한 정보를 담습니다.
형태:
HTML
<meta name="속성명" content="값" />이미 배운 charset과 viewport도 메타 태그입니다.
HTML
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />기본 메타 태그들#
description — 검색 결과 설명#
HTML
<meta name="description" content="HTML, CSS, JavaScript를 배우는 중학생 홍길동의 블로그입니다." />구글 검색 결과에서 제목 아래 나오는 회색 설명 문장이 바로 이겁니다. 155자 이내로 이 페이지가 어떤 내용인지 핵심을 담아 씁니다.
keywords — 검색 키워드 (참고용)#
HTML
<meta name="keywords" content="HTML, CSS, 웹개발, 코딩, 학생" />예전엔 중요했지만 지금은 구글이 거의 무시합니다. 있어도 나쁘진 않습니다.
author — 작성자#
HTML
<meta name="author" content="홍길동" />robots — 검색 엔진 크롤링 제어#
HTML
<!-- 기본값: 검색 엔진이 이 페이지를 수집하고 링크를 따라감 -->
<meta name="robots" content="index, follow" />
<!-- 이 페이지는 검색 결과에 포함하지 마세요 -->
<meta name="robots" content="noindex" />Open Graph (OG) 태그 — SNS 공유용#
카카오톡, 슬랙, 트위터 등에 링크를 공유할 때 뜨는 미리보기 카드는 Open Graph 태그로 설정합니다.
HTML
<!-- og: 로 시작하는 Open Graph 태그들 -->
<meta property="og:title" content="내 소개 페이지" />
<meta property="og:description" content="HTML을 배우는 홍길동입니다." />
<meta property="og:image" content="https://example.com/images/thumbnail.jpg" />
<meta property="og:url" content="https://example.com/about" />
<meta property="og:type" content="website" />이미지는 최소 1200×630px 크기를 권장합니다. 이미지가 없으면 링크 공유 시 그냥 텍스트만 나옵니다.
파비콘 (Favicon) — 탭의 작은 아이콘#
브라우저 탭을 보면 사이트마다 작은 아이콘이 있습니다. 이걸 파비콘(favicon) 이라고 합니다. "favorite icon"의 줄임말입니다.
HTML
<!-- .ico 파일 (가장 기본) -->
<link rel="icon" href="/favicon.ico" />
<!-- PNG 파일 -->
<link rel="icon" type="image/png" href="/favicon.png" />
<!-- 크기별로 여러 개 지정 (권장) -->
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
<!-- 애플 기기용 홈 화면 아이콘 -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />파비콘 만들기#
- 정사각형 이미지(512×512px 추천)를 준비합니다.
- favicon.io(새 창) 또는 realfavicongenerator.net(새 창) 에서 파비콘 파일 세트를 생성합니다.
- 생성된 파일들을 프로젝트 폴더에 넣고
<head>에<link>태그를 추가합니다.
완성된 head 예시#
실제 웹사이트에서 쓰는 <head> 는 이런 모습입니다.
HTML
<head>
<!-- 기본 -->
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>홍길동의 코딩 블로그</title>
<!-- SEO -->
<meta name="description" content="HTML, CSS, JavaScript를 배우는 홍길동의 개인 블로그입니다." />
<meta name="author" content="홍길동" />
<!-- Open Graph (SNS 공유) -->
<meta property="og:title" content="홍길동의 코딩 블로그" />
<meta property="og:description" content="HTML, CSS, JavaScript를 배우는 홍길동의 개인 블로그입니다." />
<meta property="og:image" content="https://example.com/og-image.jpg" />
<meta property="og:url" content="https://example.com" />
<meta property="og:type" content="website" />
<!-- 파비콘 -->
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
</head>직접 해보기 ✏️#
지금까지 만든 소개 페이지의 <head> 를 완성해 보세요.
description: 나를 소개하는 1~2문장 (155자 이내)og:title: 내 페이지 제목og:description: description과 같거나 조금 더 간결하게og:image: 직접 올린 이미지 URL 또는 인터넷 이미지 URL- favicon.io(새 창) 에서 이모지 파비콘을 만들어 적용
정리#
| 태그 | 역할 |
|---|---|
<meta name="description"> | 검색 결과에 나오는 설명 |
<meta name="robots"> | 검색 엔진 크롤링 제어 |
<meta property="og:*"> | SNS 공유 미리보기 |
<link rel="icon"> | 파비콘 (탭 아이콘) |
다음 편에서는 폼 요소들을 종합 활용해 실전 설문 폼을 만들어 봅니다.
