HTML 독학 가이드 9 - 메타 태그와 SEO

2025년 11월 25일 learning by Seven Fingers Studio 18분

HTMLSEO메타태그Open Graph검색엔진최적화

웹사이트를 만들었는데 구글에서 안 나온다면? 카카오톡에 링크 공유했는데 썸네일이 이상하게 나온다면? 문제는 메타 태그예요. 보이지 않지만 엄청 중요한 메타 태그를 마스터해볼게요!

메타 태그란?

<head> 안에 들어가는 정보 태그예요. 브라우저와 검색 엔진에게 “이 페이지는 이런 내용이에요”라고 알려줍니다.

<head>
    <meta charset="UTF-8">
    <meta name="description" content="페이지 설명">
    <meta name="keywords" content="키워드1, 키워드2">
</head>

사용자 눈에는 안 보이지만, SEO에 매우 중요해요.

필수 메타 태그

charset - 문자 인코딩

<meta charset="UTF-8">

이거 없으면 한글이 깨져요. 반드시 넣으세요!

viewport - 모바일 대응

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

모바일에서 제대로 보이게 해줘요. 반응형 웹사이트 필수!

description - 페이지 설명

<meta name="description" content="HTML 메타 태그와 SEO 최적화 방법을 배우는 가이드입니다.">

구글 검색 결과에 나오는 설명 텍스트예요. 150자 이내로 쓰세요.

keywords - 키워드

<meta name="keywords" content="HTML, 메타태그, SEO, 웹개발">

검색 키워드예요. 예전에는 중요했는데 지금은 덜 중요해요. 그래도 넣으면 좋아요.

author - 작성자

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

페이지 작성자 정보예요.

Open Graph 태그

페이스북, 카카오톡, 슬랙 등에 링크 공유할 때 나오는 미리보기를 제어해요.

기본 OG 태그

<meta property="og:type" content="website">
<meta property="og:title" content="HTML 독학 가이드 - 메타 태그와 SEO">
<meta property="og:description" content="검색 엔진 최적화를 위한 메타 태그 완벽 가이드">
<meta property="og:image" content="https://example.com/thumbnail.jpg">
<meta property="og:url" content="https://example.com/html-guide">

og:type: 콘텐츠 타입 (website, article 등)
og:title: 제목 (60자 이내)
og:description: 설명 (200자 이내)
og:image: 썸네일 이미지 (1200x630px 권장)
og:url: 페이지 주소

이미지 크기 지정

<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="이미지 설명">

한글 인코딩

<meta property="og:locale" content="ko_KR">

한국어 콘텐츠임을 명시해요.

Twitter Card 태그

트위터(X)에서 링크 공유할 때 예쁘게 보여요.

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="HTML 독학 가이드">
<meta name="twitter:description" content="메타 태그와 SEO 완벽 정리">
<meta name="twitter:image" content="https://example.com/image.jpg">
<meta name="twitter:creator" content="@username">

summary: 작은 이미지
summary_large_image: 큰 이미지 (권장)

검색 엔진 제어

robots - 검색 허용/차단

<!-- 모든 검색 엔진 허용 -->
<meta name="robots" content="index, follow">

<!-- 검색 차단 -->
<meta name="robots" content="noindex, nofollow">

<!-- 검색은 허용, 링크 추적 차단 -->
<meta name="robots" content="index, nofollow">

index: 검색 결과에 포함
noindex: 검색 결과에서 제외
follow: 링크 추적 허용
nofollow: 링크 추적 차단

googlebot - 구글 전용

<meta name="googlebot" content="index, follow">

구글 검색 엔진만 제어해요.

Canonical URL

중복 콘텐츠 문제를 해결해요.

<link rel="canonical" href="https://example.com/original-page">

같은 내용이 여러 URL에 있을 때, 원본을 지정해요.

예:

둘 다 같은 내용이면 canonical로 하나를 지정하세요.

Favicon

브라우저 탭에 나오는 작은 아이콘이에요.

<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">

Apple Touch Icon

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

아이폰/아이패드 홈 화면에 추가할 때 쓰는 아이콘이에요.

실전 예제

블로그 게시글

<!DOCTYPE html>
<html lang="ko">
<head>
    <!-- 필수 메타 태그 -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- 페이지 정보 -->
    <title>HTML 독학 가이드 - 메타 태그와 SEO | 내 블로그</title>
    <meta name="description" content="검색 엔진 최적화를 위한 메타 태그 설정 방법과 Open Graph 태그 사용법을 자세히 알아봅니다.">
    <meta name="keywords" content="HTML, 메타태그, SEO, Open Graph, 검색엔진최적화">
    <meta name="author" content="홍길동">

    <!-- Open Graph -->
    <meta property="og:type" content="article">
    <meta property="og:title" content="HTML 독학 가이드 - 메타 태그와 SEO">
    <meta property="og:description" content="검색 엔진 최적화를 위한 메타 태그 완벽 가이드">
    <meta property="og:image" content="https://myblog.com/images/og-image.jpg">
    <meta property="og:url" content="https://myblog.com/html-guide-seo">
    <meta property="og:locale" content="ko_KR">

    <!-- Twitter Card -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="HTML 독학 가이드 - 메타 태그와 SEO">
    <meta name="twitter:description" content="검색 엔진 최적화를 위한 메타 태그 완벽 가이드">
    <meta name="twitter:image" content="https://myblog.com/images/twitter-image.jpg">

    <!-- 검색 엔진 -->
    <meta name="robots" content="index, follow">
    <link rel="canonical" href="https://myblog.com/html-guide-seo">

    <!-- Favicon -->
    <link rel="icon" type="image/x-icon" href="/favicon.ico">
</head>
<body>
    <h1>HTML 독학 가이드 - 메타 태그와 SEO</h1>
    <p>메타 태그로 검색 엔진 최적화하는 방법을 배워봅시다.</p>
</body>
</html>

쇼핑몰 상품 페이지

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>맥북 프로 16인치 - 최저가 쇼핑몰</title>
    <meta name="description" content="맥북 프로 16인치를 최저가로 만나보세요. 무료 배송, 당일 발송!">
    <meta name="keywords" content="맥북, 맥북프로, 노트북, 애플, 최저가">

    <!-- Open Graph -->
    <meta property="og:type" content="product">
    <meta property="og:title" content="맥북 프로 16인치">
    <meta property="og:description" content="최신 M3 칩 탑재, 16GB RAM, 512GB SSD">
    <meta property="og:image" content="https://shop.com/products/macbook-pro-16.jpg">
    <meta property="og:url" content="https://shop.com/products/macbook-pro-16">
    <meta property="og:price:amount" content="3,290,000">
    <meta property="og:price:currency" content="KRW">

    <meta name="robots" content="index, follow">
    <link rel="canonical" href="https://shop.com/products/macbook-pro-16">

    <link rel="icon" href="/favicon.ico">
</head>
<body>
    <h1>맥북 프로 16인치</h1>
    <p>가격: 3,290,000원</p>
</body>
</html>

회사 홈페이지

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>ABC 테크 - 혁신적인 IT 솔루션 기업</title>
    <meta name="description" content="ABC 테크는 클라우드, AI, 빅데이터 솔루션을 제공하는 IT 전문 기업입니다.">
    <meta name="keywords" content="IT솔루션, 클라우드, AI, 빅데이터, ABC테크">

    <!-- Open Graph -->
    <meta property="og:type" content="website">
    <meta property="og:title" content="ABC 테크 - 혁신적인 IT 솔루션">
    <meta property="og:description" content="클라우드, AI, 빅데이터 전문 기업">
    <meta property="og:image" content="https://abctech.com/images/company-og.jpg">
    <meta property="og:url" content="https://abctech.com">

    <meta name="robots" content="index, follow">
    <link rel="canonical" href="https://abctech.com">

    <!-- Favicon -->
    <link rel="icon" href="/favicon.ico">
    <link rel="apple-touch-icon" href="/apple-touch-icon.png">
</head>
<body>
    <h1>ABC 테크</h1>
    <p>혁신적인 IT 솔루션을 제공합니다.</p>
</body>
</html>

SEO 최적화 팁

1. 제목 태그 최적화

<!-- 나쁜 예 -->
<title>홈</title>

<!-- 좋은 예 -->
<title>HTML 독학 가이드 - 메타 태그와 SEO | 내 블로그</title>

50-60자 이내
중요한 키워드 앞에 배치
브랜드명은 뒤에

2. Description 최적화

<!-- 나쁜 예 -->
<meta name="description" content="블로그 글">

<!-- 좋은 예 -->
<meta name="description" content="검색 엔진 최적화를 위한 메타 태그 설정 방법과 Open Graph 태그 사용법을 초보자도 이해할 수 있게 자세히 설명합니다.">

150-160자 이내
페이지 내용 요약
클릭하고 싶게 작성

3. OG 이미지 크기

<!-- 권장 크기 -->
<meta property="og:image" content="image.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">

1200 x 630px 권장
최소 600 x 315px
파일 크기 8MB 이하

4. 구조화된 데이터 (Schema.org)

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "HTML 독학 가이드 - 메타 태그와 SEO",
  "author": {
    "@type": "Person",
    "name": "홍길동"
  },
  "datePublished": "2025-11-25",
  "image": "https://example.com/image.jpg",
  "description": "메타 태그와 SEO 최적화 완벽 가이드"
}
</script>

구글 검색 결과에 더 풍부하게 표시돼요.

자주 하는 실수

1. charset 빠뜨리기

<!-- 틀림: 한글 깨짐 -->`
<head>
    <title>제목</title>
</head>

<!-- 맞음 -->
<head>
    <meta charset="UTF-8">
    <title>제목</title>
</head>

2. viewport 없이 모바일 대응

<!-- 틀림: 모바일에서 작게 보임 -->
<head>
    <meta charset="UTF-8">
    <title>제목</title>
</head>

<!-- 맞음 -->
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>제목</title>
</head>

3. OG 이미지 상대 경로 사용

<!-- 틀림: 상대 경로 -->
<meta property="og:image" content="/images/thumbnail.jpg">

<!-- 맞음: 절대 경로 -->
<meta property="og:image" content="https://myblog.com/images/thumbnail.jpg">

OG 이미지는 반드시 전체 URL을 써야 해요!

4. 모든 페이지에 같은 description

<!-- 나쁜 예: 모든 페이지 동일 -->
<meta name="description" content="내 블로그입니다.">

<!-- 좋은 예: 페이지마다 고유 -->
<meta name="description" content="HTML 메타 태그로 SEO 최적화하는 구체적인 방법을 배웁니다.">

메타 태그 테스트 도구

1. 구글 리치 결과 테스트

https://search.google.com/test/rich-results

구글 검색에 어떻게 나오는지 미리 봐요.

2. 페이스북 공유 디버거

https://developers.facebook.com/tools/debug/

페이스북/카카오톡 공유 미리보기 확인해요.

3. 트위터 카드 검증

https://cards-dev.twitter.com/validator

트위터 카드가 제대로 나오는지 확인해요.

다음 단계

다음 글에서는 실전 웹페이지 만들기를 배웁니다. 지금까지 배운 모든 걸 합쳐서 진짜 웹사이트를 만들어볼 거예요!

메타 태그는 SEO의 기본이에요. 잘 설정하면 검색 노출이 훨씬 좋아져요!

HTML 독학 가이드 시리즈:

이전: HTML 독학 가이드 - 레이아웃 구성
다음: HTML 독학 가이드 - 실전 웹페이지 만들기

← 블로그 목록으로