🔍 03. head & meta & SEO: 구글이 내 페이지를 이해하는 방법

2026년 3월 5일 수정됨

📋 개요

meta charset, viewport, description, OG 태그, favicon, Next.js Metadata API까지 — head 안의 모든 것을 5년 차의 언어로 해석합니다.

📌 이 문서를 읽기 전에

⏱️ 예상 읽기 시간: 20분 / 핵심 파트만: 12분

🗺️ 이 문서의 흐름

[head의 역할] → [필수 meta 태그] → [SEO meta 태그] → [OG/Twitter 카드] → [Next.js Metadata API]

🎯 이 문서를 다 읽으면 할 수 있는 것

<head> 안에 뭘 넣어야 하는지, 왜 넣는지 설명할 수 있다.
SEO 기본 meta 태그와 OG(Open Graph) 태그를 직접 작성할 수 있다.
Next.js의 Metadata API로 동적 메타데이터를 생성할 수 있다.
<head> 안의 태그 순서가 성능에 미치는 영향을 설명할 수 있다.

🗺️ 이 문서의 배경 세계관: '영수네 커뮤니티'

🐣 영철 ( 신입 ): "영호 님, 카카오톡으로 우리 사이트 링크 공유했더니 그냥 URL만 나와요. 다른 사이트들은 썸네일 이미지랑 제목이 예쁘게 나오던데... 그리고 영수 님이 '구글 검색 결과에 설명이 안 나온다'고 하는데, <head> 안에 뭘 더 넣어야 하는 거예요?"
🦁 영호 ( 리드 ): "맞아요, <head> 는 사용자 눈엔 안 보이지만, 구글·카카오·슬랙 같은 크롤러들이 제일 먼저 읽는 '명함'이에요. 명함을 제대로 안 만들면 검색에도 안 걸리고, 공유했을 때 민낯 URL만 떡하니 나오는 거죠."

🤔 왜 알아야 하는가

영수네 커뮤니티 마케팅팀이 홍보를 시작했다. 영철이가 만든 사이트 링크를 카카오톡 단체방에 공유했는데...

🎨 영숙(디자이너): "영철 님, 링크 공유하면 이미지랑 제목이 나와야 하는데 왜 URL만 나오죠? 다른 커뮤니티는 썸네일이 예쁘게 붙던데..."

👔 영수(PM): "Google에서 '영수네 커뮤니티 리액트 게시판' 쳐도 우리 사이트가 첫 페이지에 안 나와요. SEO 작업 안 한 거예요?"

영철이가 만든 <head> 의 현재 상태:

<!-- ❌ 영철이의 최초 head: 사실상 아무것도 없음 -->
<head>
  <title>영수네 커뮤니티</title>
  <link rel="stylesheet" href="styles.css" />
</head>

이 상태가 문제인 이유:

구글에 검색 설명(description)이 없음 → 크롤러가 본문에서 임의로 잘라 씀
OG 태그 없음 → 카카오/슬랙에서 URL만 표시
charset 없음 → 한글 깨질 수 있음
viewport 없음 → 모바일에서 화면 크기 엉망

📋 1. head의 역할 구분

<head> 안에 들어가는 요소들은 딱 두 가지 역할로 나뉘어:

역할	대표 태그	누구를 위한가
렌더링 필수 정보	`charset`, `viewport`, CSS `<link>`	브라우저
메타데이터/SEO/소셜	`title`, `description`, OG 태그, favicon	검색엔진·크롤러·SNS

🔧 2. 필수 meta 태그 4종 세트

2-1. charset — 문자 인코딩

<!-- 반드시 <head>의 첫 번째 줄에, 첫 1024 바이트 이내에 있어야 함 -->
<meta charset="UTF-8" />

UTF-8이 없으면 브라우저가 인코딩을 추측해야 해. 잘못 추측하면 한글이 ????? 로 깨져. 위치가 중요해: 브라우저는 파일을 읽으면서 인코딩을 즉시 알아야 하므로, 문서 최상단 1024바이트 이내에 있어야 한다.

2-2. viewport — 모바일 대응

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

width=device-width: 뷰포트 너비를 기기 실제 너비에 맞춤
initial-scale=1.0: 초기 줌 레벨 1배 (확대/축소 없음)

이게 없으면 모바일 브라우저가 데스크탑 사이즈(980px)로 렌더링한 후 축소해서 보여줘. 글씨가 엄청 작게 보이는 그것.

2-3. title — 탭 제목 + 검색결과 제목

<title>리액트 상태관리 비교 | 영수네 커뮤니티</title>

검색결과에서 파란색 클릭 링크가 되는 가장 중요한 SEO 요소
적정 길이: 50~60자 이내 (이 이상은 구글에서 ... 로 잘림)
형식: 페이지 핵심 키워드 | 사이트명 권장

2-4. description — 검색결과 설명

<meta
  name="description"
  content="Zustand, Jotai, Redux Toolkit을 실무 관점으로 비교분석합니다. 150자 이내의 핵심 요약." />

검색결과에서 제목 아래 회색으로 나오는 2~3줄 설명
CTR(클릭률)에 직접 영향을 줌
적정 길이: 120~160자 이내

📢 3. OG (Open Graph) 태그 — 소셜 공유의 명함

OG 태그는 카카오톡, 슬랙, 페이스북, 트위터에서 링크를 공유했을 때 미리보기 카드 를 만들어주는 표준 메타데이터야.

<!-- OG 기본 4종 (필수) -->
<meta property="og:title" content="리액트 상태관리 비교 — Zustand vs Jotai" />
<meta property="og:description" content="실무 개발자가 직접 비교한 상태관리 라이브러리 트레이드오프" />
<meta property="og:image" content="https://ysdeveloper.community/og-images/react-state.png" />
<meta property="og:url" content="https://ysdeveloper.community/posts/react-state" />
<meta property="og:type" content="article" />  <!-- website, article, video 등 -->
 
<!-- Twitter 카드 (Twitter/X 전용) -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="리액트 상태관리 비교 — Zustand vs Jotai" />
<meta name="twitter:description" content="실무 개발자가 직접 비교한 상태관리 라이브러리" />
<meta name="twitter:image" content="https://ysdeveloper.community/og-images/react-state.png" />

OG 이미지 스펙:

권장 크기: 1200 × 630px (가로 2:1 비율)
최소 크기: 600 × 315px
파일 형식: PNG/JPEG (너무 크면 로딩 지연)

🔗 Next.js 연결 고리: app/api/og/route.tsx
Next.js의 ImageResponse API로 OG 이미지를 동적으로 생성할 수 있어요.
영수네 커뮤니티처럼 게시글마다 다른 OG 이미지가 필요한 경우에 매우 유용해요.

🖼️ 4. 기타 head 필수 요소

<!-- favicon: 브라우저 탭에 표시되는 아이콘 -->
<link rel="icon" href="/favicon.ico" />
<!-- 고해상도를 위한 PNG 아이콘 -->
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<!-- Apple 기기의 홈화면 저장 아이콘 -->
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
 
<!-- 정규화 URL: 같은 콘텐츠가 여러 URL에 있을 때 원본 지정 (중복 SEO 패널티 방지) -->
<link rel="canonical" href="https://ysdeveloper.community/posts/react-state" />
 
<!-- preload: 곧 필요한 리소스를 미리 다운로드 (LCP 이미지, 폰트 등) -->
<link rel="preload" href="/fonts/Pretendard.woff2" as="font" type="font/woff2" crossorigin />

⚛️ 5. Next.js Metadata API — 동적 SEO 자동화

🐣 영철: "그럼 Next.js에서는 매 페이지마다 <head> 를 직접 짜야 하나요?"

🦁 영호 리드: "Next.js 13+ App Router에서는 Metadata 객체나 generateMetadata 함수로 깔끔하게 처리해요. 중복 없이 자동으로 <head> 에 주입해주거든요."

// app/layout.tsx — 사이트 전역 메타데이터 기본값
import type { Metadata } from "next";
 
export const metadata: Metadata = {
  title: {
    default: "영수네 커뮤니티",
    // 하위 페이지에서 %s 가 페이지 제목으로 치환됨
    template: "%s | 영수네 커뮤니티",
  },
  description: "프론트엔드 개발자들의 스터디 매칭 커뮤니티",
  openGraph: {
    type: "website",
    locale: "ko_KR",
    url: "https://ysdeveloper.community",
    siteName: "영수네 커뮤니티",
  },
};

// app/posts/[id]/page.tsx — 게시글 페이지 동적 메타데이터
import type { Metadata } from "next";
 
// generateMetadata: 서버에서 실행, DB/API 조회 가능
export async function generateMetadata({
  params,
}: {
  params: { id: string };
}): Promise<Metadata> {
  const post = await fetchPost(params.id);
 
  return {
    // template 적용 → "리액트 상태관리 비교 | 영수네 커뮤니티"
    title: post.title,
    description: post.summary,
    openGraph: {
      title: post.title,
      description: post.summary,
      // 게시글별 동적 OG 이미지 (Next.js ImageResponse 활용)
      images: [`/api/og?title=${encodeURIComponent(post.title)}`],
      type: "article",
      publishedTime: post.createdAt,
    },
  };
}

🦁 영호 리드: "Next.js Metadata API가 좋은 이유는 중복 태그 자동 제거, SSR에서 올바른 초기 HTML 생성, TypeScript 자동완성까지 지원해서 실수를 줄여줘요."

🏁 완성된 head 템플릿

<!doctype html>
<html lang="ko">
  <head>
    <!-- [1] 인코딩 (가장 먼저) -->
    <meta charset="UTF-8" />
 
    <!-- [2] 뷰포트 (모바일 필수) -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
    <!-- [3] 핵심 SEO -->
    <title>리액트 상태관리 비교 | 영수네 커뮤니티</title>
    <meta name="description" content="Zustand, Jotai를 실무 관점으로 비교합니다." />
    <link rel="canonical" href="https://ysdeveloper.community/posts/react-state" />
 
    <!-- [4] OG 소셜 공유 -->
    <meta property="og:title" content="리액트 상태관리 비교" />
    <meta property="og:description" content="실무 개발자 비교 분석" />
    <meta property="og:image" content="https://ysdeveloper.community/og/react-state.png" />
    <meta property="og:url" content="https://ysdeveloper.community/posts/react-state" />
    <meta property="og:type" content="article" />
 
    <!-- [5] 렌더링 리소스 (CSS: 렌더 블로킹이므로 최대한 상단, preload 먼저) -->
    <link rel="preload" href="/fonts/Pretendard.woff2" as="font" type="font/woff2" crossorigin />
    <link rel="stylesheet" href="/styles.css" />
 
    <!-- [6] 아이콘 -->
    <link rel="icon" href="/favicon.ico" />
 
    <!-- [7] JS: defer로 Non-blocking -->
    <script src="/app.js" defer></script>
  </head>
  <body>...</body>
</html>

📝 마무리 퀴즈

Q1. 다음 중 카카오톡 링크 공유 시 썸네일 이미지를 표시하기 위해 반드시 필요한 meta 태그는?

A) <meta name="description" content="...">
B) <meta property="og:image" content="...">
가) <meta name="viewport" content="width=device-width">
라) <meta charset="UTF-8">

✅ 정답: B

💡 상세 해설:

원리 설명: 카카오톡, 슬랙, 페이스북 등의 SNS는 링크를 공유할 때 해당 URL의 HTML을 서버에서 크롤링합니다. 이때 <head> 의 OG(Open Graph) 태그를 읽어 미리보기 카드를 생성하는데, 이미지는 og:image 가 담당해요.
오답 피드백: description 은 구글 검색 결과용이고, viewport 는 모바일 렌더링용, charset 은 인코딩 선언이에요.
📌 핵심 기억법: "검색 설명 = description, SNS 카드 이미지 = og:image"

Q2. Next.js App Router에서 게시글별 다른 제목을 <title> 에 자동으로 넣으려면 어떻게 하는가?

✅ 정답: page.tsx 에서 generateMetadata 함수를 export 하고, params 로 받은 게시글 ID로 데이터를 조회한 뒤 { title: post.title } 을 반환

💡 상세 해설:

원리 설명: Next.js App Router의 generateMetadata 는 서버 컴포넌트처럼 서버에서 실행되어 SSR 시점에 올바른 <title> 을 <head> 에 주입해줘요. layout.tsx 에서 title.template: "%s | 영수네 커뮤니티" 를 설정해두면, 하위 페이지에서 반환한 title 이 자동으로 %s 자리에 들어가 완성된 제목이 돼요.
📌 핵심 기억법: "정적 메타 = export const metadata, 동적 메타 = export async function generateMetadata"

Q3. 영철이의 테스트 타임

영수(PM)가 요청한다. "구글에서 '영수네 커뮤니티 리액트 스터디' 검색하면 우리 사이트가 1페이지에 나왔으면 좋겠어요. 그리고 검색 결과에 '리액트 공부 커뮤니티 — 매칭부터 스터디 운영까지' 라는 설명이 나와야 해요."

영철이가 구현해야 할 가장 중요한 두 가지 meta 태그는?

✅ 정답: ① <title> 에 핵심 키워드 포함, ② <meta name="description"> 에 요청 문구 작성

💡 상세 해설:

원리 설명: 구글 검색결과에서 파란 제목 링크는 <title> 에서, 그 아래 회색 설명 텍스트는 <meta name="description"> 에서 가져와요. description이 없으면 구글이 본문에서 임의로 잘라 쓰는데, 영수 님이 원하는 문구가 보장되지 않아요.
오답 피드백: 영철 님, OG 태그는 SNS 공유용이라 구글 검색 결과 설명에는 영향을 주지 않아요. 검색 결과 = title + description 이에요.
📌 핵심 기억법: "구글 검색 결과의 제목 + 설명 = <title> + <meta name='description'>"

🐣 영철이의 퇴근 일기

오늘 OG 태그 추가하고 카카오톡에서 링크 테스트했을 때 썸네일이 딱 나온 순간... 진짜 소름 돋았다. 그동안 <title> 만 달랑 있던 게 부끄러울 정도. <head> 는 눈에 안 보이는 부분이라 소홀히 했는데, 사실 이게 구글 봇이 제일 먼저 읽는 명함이라는 게 이제 피부로 느껴진다.

💡 "<head> 는 사용자 눈에 안 보이지만, 구글·카카오·슬랙이 제일 먼저 읽는 명함이다. 명함이 부실하면 아무리 좋은 사이트도 세상에 제대로 알려지지 않는다."

영수 님한테 SEO 개선 이후 구글 서치 콘솔 지표 보여드렸더니 "이게 되네?" 하고 깜짝 놀라셨다. 그 표정 보려고 개발하는 것 같아서 오늘따라 뿌듯하다. 퇴근하고 집에서 Next.js Metadata API로 OG 이미지까지 동적으로 만드는 방법 더 파봐야겠다.

🔗 더 알아보기