한 줄 요약 — <head> 안의 <meta> 태그들은 화면에 안 보이지만, 모바일에서 글자가 어떻게 보일지(viewport), 검색 결과에 어떤 소개가 뜰지(description), 링크를 공유했을 때 어떤 카드가 뜰지(og)를 결정합니다.

학습 목표#

  • viewport 메타 태그가 왜 모바일에서 필수인지 설명할 수 있다.
  • <title>과 description이 검색 결과 카드의 어디에 쓰이는지 안다.
  • og 태그 세 줄로 카카오톡·SNS 공유 미리보기를 만들 수 있다.
  • og:image에 절대 경로를 써야 하는 이유를 안다.

오늘의 비유 — 책 표지에 제목·저자·요약을 적어 첫인상을 만드는 일#

서점에 깔린 책은 본문을 펴보기 전에 표지로 먼저 판단됩니다. 앞표지의 제목, 뒤표지의 한 줄 소개, 띠지의 추천사. 같은 원고라도 이 표지를 어떻게 짰느냐에 따라 집어 드는 사람 수가 달라집니다.

<head> 안의 메타 태그가 바로 이 표지입니다. 본문(<body>)은 책을 펼친 사람만 읽지만, 메타 태그는 검색 결과 목록과 메신저 공유 카드처럼 펼치기 전 단계에서 보이는 정보를 통제합니다. 오늘은 이 표지를 직접 짭니다.

핵심 개념#

검색 엔진은 거대한 서점의 검색대와 같습니다. 책을 모두 읽어보고 안내하는 게 아니라, 표지에 적힌 정보를 모아 결과를 보여줍니다. 그 표지를 잘 다듬어 검색에 잘 잡히게 만드는 일을 통틀어 검색 엔진 최적화(SEO, Search Engine Optimization) 라고 부릅니다. 메타 태그는 그 첫 단추입니다.

<meta charset> — 어떤 활자로 조판했는가#

지난 회에 본 그 한 줄입니다.

<meta charset="utf-8">

한글 활자가 없는 인쇄소에서 책을 찍으면 글자가 □□□로 나오듯, 이 선언을 빠뜨리면 한글이 깨질 수 있습니다. <head> 안에서 가능한 한 위쪽에 둡니다. 브라우저가 글자를 해석하기 전에 어떤 문자 체계인지 알아야 하기 때문입니다.

<meta name="viewport"> — 독자 손에 맞춰 판형을 펴는 일#

같은 원고도 손바닥만 한 문고본으로 낼 수도, 펼치면 한 아름인 대형 화집으로 낼 수도 있습니다. viewport 메타 태그는 "이 페이지를 독자의 화면 폭에 맞춰 펴라"는 지시입니다.

<meta name="viewport" content="width=device-width, initial-scale=1">

width=device-width는 "지면 폭을 기기 화면 폭과 같게 잡아라", initial-scale=1은 "처음 펼쳤을 때 1배율로 보여라"는 뜻입니다. 이 줄이 없으면 모바일 브라우저는 옛 PC용 화집을 통째로 손바닥에 올려놓은 것처럼, 페이지 전체를 축소해 글자를 깨알같이 보여줍니다.

<title>과 <meta name="description"> — 검색대에 걸리는 제목과 소개#

<title>은 앞표지의 제목입니다. 탭 이름이자 검색 결과의 굵은 파란 글씨로 잡힙니다(지난 회에 다뤘습니다). 그 바로 아래 회색 두세 줄이 description입니다.

<title>오늘의 첫 페이지 — HTML 연습장</title>
<meta name="description" content="HTML을 처음 배우는 사람을 위한 연습 페이지입니다.">

검색 결과 카드는 대략 이렇게 조판됩니다.

오늘의 첫 페이지 — HTML 연습장        ← <title>
example.com › practice
HTML을 처음 배우는 사람을 위한 연습…   ← description (대략 150자에서 잘림)

description은 검색 노출 순위를 직접 올려주지는 않지만, 사람이 클릭할지 말지를 가르는 한 줄입니다. 뒤표지 소개 문구라고 생각하면 분량 감각이 잡힙니다.

Open Graph — 공유했을 때 뜨는 표지#

링크를 카카오톡이나 SNS에 붙이면 제목·이미지가 담긴 카드가 자동으로 뜹니다. 이 카드의 내용을 정하는 것이 Open Graph 태그입니다. 2010년 페이스북이 제안한, "링크를 공유하면 이런 표지를 보여달라"고 알려주는 메타데이터 약속입니다. 친구에게 책 표지를 사진 찍어 보내며 추천하는 장면을 떠올리면 됩니다.

<meta property="og:title" content="오늘의 첫 페이지">
<meta property="og:description" content="HTML 연습 페이지입니다.">
<meta property="og:image" content="https://example.com/cover.png">

og:image가 표지 그림, og:title이 제목, og:description이 한 줄 소개입니다. 세 줄만 있어도 대부분의 메신저에서 그럴듯한 카드가 만들어집니다.

함께 따라하기 — 표지 한 장 짜고 미리보기 확인하기#

지난 회에 만든 폴더에 day-04 폴더와 index.html을 새로 두고, <head> 안을 다음처럼 채워봅니다.

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>나의 첫 표지 — HTML 연습</title>
  <meta name="description" content="메타 태그를 직접 연습해보는 페이지입니다.">
  <meta property="og:title" content="나의 첫 표지">
  <meta property="og:description" content="메타 태그 연습 페이지">
  <meta property="og:image" content="https://example.com/cover.png">
</head>

먼저 viewport의 효과를 봅니다. 개발자 도구를 열고(F12, 맥은 ⌥⌘I) 왼쪽 위 기기 모양 아이콘을 눌러 모바일 화면으로 바꿉니다. 위 코드 그대로면 글자가 손에 잡히는 크기로 보입니다. viewport 줄만 잠깐 지우고 새로고침하면, 같은 글자가 화면 한구석에 깨알같이 작게 몰립니다. 이 한 줄의 유무 차이입니다.

og 카드는 페이지를 인터넷에 올린 뒤 그 주소를 자기 자신에게 메신저로 한 번 보내면 확인할 수 있습니다. 제목·소개·이미지가 담긴 카드가 말풍선 위에 뜨면 성공입니다.

흔한 실수 3가지#

1. viewport 메타 태그를 빼서 모바일이 PC처럼 보인다#

가장 흔하고, 가장 티 나는 실수입니다.

<head>
  <meta charset="utf-8">
  <title>내 페이지</title>
</head>

(이 코드는 모바일에서 의도와 다르게 동작합니다.) PC에서는 멀쩡해 보여도, 휴대폰에서 열면 페이지 전체가 한 화면에 욱여넣어져 글자가 깨알처럼 작아집니다. 손가락으로 확대해야 읽히는 그 페이지가 이 한 줄의 부재 때문입니다.

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>내 페이지</title>
</head>

viewport 한 줄을 더하면 해결됩니다. 새 페이지를 만들 때마다 charset 바로 다음에 함께 둔다고 외워두세요.

2. og:image를 상대 경로로 써서 공유 이미지가 안 뜬다#

본문 안 <img>는 상대 경로(cover.png)로 잘 동작하기 때문에, og:image도 그렇게 적기 쉽습니다.

<meta property="og:image" content="cover.png">

(이 코드는 공유 카드에서 의도와 다르게 동작합니다.) 카카오톡·페이스북 같은 외부 서비스는 내 페이지가 어느 폴더에 있는지 모릅니다. cover.png만 보고는 어디서 그림을 가져와야 할지 알 수 없어 이미지가 빈칸으로 뜹니다.

<meta property="og:image" content="https://example.com/cover.png">

og:image는 항상 https://로 시작하는 전체 주소(절대 경로)로 적습니다. 외부에서 그 주소만 보고 바로 찾아올 수 있어야 하기 때문입니다.

3. description을 너무 길게 써서 검색 결과에서 잘린다#

소개를 충실히 쓰려다 한 문단을 통째로 넣는 경우입니다.

<meta name="description" content="이 페이지는 HTML을 처음 배우는 분들을 위해 만들어졌으며 메타 태그와 시맨틱 구조와 접근성과 SEO와 그 밖의 여러 주제를 아주 자세하고 친절하게 단계별로 설명하는 매우 긴 소개 문장입니다">

(이 소개는 검색 결과에서 끝부분이 잘립니다.) 검색 결과 카드는 대략 150자 안팎에서 문장을 …로 끊습니다. 길게 쓴 뒷부분은 아무에게도 보이지 않습니다.

<meta name="description" content="HTML을 처음 배우는 사람을 위한 메타 태그 연습 페이지입니다.">

핵심을 한두 문장으로 압축합니다. 뒤표지에 줄거리를 전부 적지 않는 것과 같습니다.

오늘 배운 것 체크리스트#

  • viewport 메타 태그가 없으면 모바일에서 어떻게 보이는지 안다.
  • <title>과 description이 검색 결과 카드의 어디에 쓰이는지 안다.
  • og:title·og:description·og:image의 역할을 각각 댈 수 있다.
  • og:image를 절대 경로로 적어야 하는 이유를 설명할 수 있다.

자주 묻는 질문#

Q. 카카오톡 공유 이미지 설정은 어떻게 하나요?

A. <head> 안에 og:image, og:title, og:description 세 줄을 넣으면 됩니다. 이때 og:image는 반드시 https://로 시작하는 전체 주소로 적어야 카카오톡이 그림을 찾아옵니다. 카드가 이전 내용으로 캐시돼 안 바뀌면, 카카오 공유 디버거 같은 도구로 캐시를 한 번 갱신해야 할 수도 있습니다.

Q. 모바일에서 화면이 잘리거나 글자가 너무 작은데 왜 그런가요?

A. 십중팔구 viewport 메타 태그가 빠져 있어서입니다. <meta name="viewport" content="width=device-width, initial-scale=1"> 한 줄을 <head>에 추가하면 페이지가 기기 폭에 맞춰 펴집니다.

Q. meta description이 검색 순위(SEO)를 올려주나요?

A. 순위를 직접 올려주지는 않습니다. 다만 검색 결과 카드에서 사람이 클릭할지를 정하는 소개 문구라, 클릭률을 통해 간접적으로 영향을 줍니다. 150자 안팎으로, 페이지가 무엇인지 한눈에 알 수 있게 쓰는 게 무난합니다.

다음 시간 예고#

내일은 텍스트 태그 정리 — h1~h6, p, span, strong, em, 그리고 주석을 다룹니다. 오늘까지 <head> 쪽 표지를 짰으니, 이제 <body> 안 본문을 의미에 맞는 태그로 채우는 법으로 들어갑니다.

더 알아보기#