파비콘과 메타 태그 — 탭에 이름과 아이콘 붙이기

내 페이지가 카카오톡에서 예쁘게 나오게 하려면?

카카오톡에서 링크를 공유하면 미리보기가 뜹니다. 제목, 설명, 이미지가 예쁘게 카드 형태로 보이죠.

이게 전부 HTML의 <meta> 태그로 설정됩니다. 이번 편에서는 브라우저와 검색 엔진, SNS가 내 페이지를 이해하는 데 사용하는 메타 태그를 배웁니다.

메타 태그란?

<meta> 태그는 <head> 안에 들어가는 태그로, 화면에는 보이지 않지만 중요한 정보를 담습니다.

형태:

<meta name="속성명" content="값" />

이미 배운 charset과 viewport도 메타 태그입니다.

<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

기본 메타 태그들

description — 검색 결과 설명

<meta name="description" content="HTML, CSS, JavaScript를 배우는 중학생 홍길동의 블로그입니다." />

구글 검색 결과에서 제목 아래 나오는 회색 설명 문장이 바로 이겁니다. 155자 이내로 이 페이지가 어떤 내용인지 핵심을 담아 씁니다.

keywords — 검색 키워드 (참고용)

<meta name="keywords" content="HTML, CSS, 웹개발, 코딩, 학생" />

예전엔 중요했지만 지금은 구글이 거의 무시합니다. 있어도 나쁘진 않습니다.

author — 작성자

<meta name="author" content="홍길동" />

robots — 검색 엔진 크롤링 제어

<!-- 기본값: 검색 엔진이 이 페이지를 수집하고 링크를 따라감 -->
<meta name="robots" content="index, follow" />

<!-- 이 페이지는 검색 결과에 포함하지 마세요 -->
<meta name="robots" content="noindex" />

Open Graph (OG) 태그 — SNS 공유용

카카오톡, 슬랙, 트위터 등에 링크를 공유할 때 뜨는 미리보기 카드는 Open Graph 태그로 설정합니다.

<!-- 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"의 줄임말입니다.

<!-- .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> 는 이런 모습입니다.

<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">`	파비콘 (탭 아이콘)

다음 편에서는 폼 요소들을 종합 활용해 실전 설문 폼을 만들어 봅니다.