SEO 메타태그 완전 가이드

title·description·OG·Twitter Card·JSON-LD 구조화 데이터 — 실무 SEO 체크리스트

SEO 메타태그란

SEO 메타태그는 HTML <head> 영역에 작성되어 검색 엔진과 소셜 미디어 플랫폼에 페이지 정보를 전달하는 태그입니다. 직접적인 순위 요소는 아니지만, 검색 결과 표시 품질(CTR)과 소셜 공유 미리보기에 직접적인 영향을 줍니다.

메타태그는 크게 네 가지 범주로 나눌 수 있습니다. 기본 SEO 태그(title, description, canonical), 소셜 공유 태그(Open Graph, Twitter Card), 기술적 태그(viewport, charset, robots), 그리고 구조화 데이터(JSON-LD)입니다.

기본 SEO 태그

title 태그

title 태그는 검색 결과의 파란 링크 텍스트로 표시됩니다. 가장 중요한 SEO 요소 중 하나입니다.

<title>페이지 제목 — 브랜드명 | Integrity</title>

권장 길이는 50~60자(한글 기준 약 25~30자)입니다. 그 이상이면 검색 결과에서 잘려 표시됩니다. 핵심 키워드를 앞부분에 배치하고, 페이지마다 고유한 제목을 사용해야 합니다. 브랜드명은 주로 뒤에 붙이며, 구분자로는 |, -, —가 일반적입니다.

meta description

검색 결과에서 제목 아래에 표시되는 설명문입니다. 클릭을 유도하는 역할을 합니다.

<meta name="description" content="페이지의 핵심 내용을 요약한 설명. 사용자가 클릭하고 싶도록 가치를 명확히 전달하세요.">

권장 길이는 120~160자입니다. 페이지 내용을 정확히 반영하고, 주요 키워드를 자연스럽게 포함시키세요. Google이 description을 무시하고 본문에서 직접 추출하는 경우도 있으므로, 본문 내용도 잘 작성하는 것이 중요합니다.

canonical 태그

중복 콘텐츠가 있을 때 대표 URL을 검색 엔진에 알려주는 태그입니다.

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

동일 콘텐츠가 여러 URL로 접근 가능한 경우(www 유무, 트레일링 슬래시, 쿼리 파라미터 등) 반드시 설정해야 합니다. 누락 시 Google이 잘못된 URL을 대표로 선택하거나 순위 신호가 분산될 수 있습니다.

Open Graph 태그

Open Graph(OG)는 Facebook이 만든 프로토콜로, 카카오톡, Facebook, 라인 등 SNS에서 링크를 공유할 때 미리보기 카드를 제어합니다.

<meta property="og:title" content="페이지 제목">
<meta property="og:description" content="페이지 설명">
<meta property="og:image" content="https://example.com/og-image.jpg">
<meta property="og:url" content="https://example.com/page/">
<meta property="og:type" content="website">
<meta property="og:site_name" content="사이트명">
<meta property="og:locale" content="ko_KR">

og:image는 가장 중요한 OG 태그입니다. 권장 크기는 1200×630px, 파일 크기는 8MB 이하입니다. 이미지가 없으면 SNS 공유 시 빈 카드가 표시되거나 임의 이미지가 선택됩니다.

Twitter Card 태그

X(트위터)에서 링크를 공유할 때 표시되는 카드를 제어합니다. OG 태그가 설정되어 있으면 Twitter는 OG를 폴백으로 사용하지만, 명시적 설정이 더 안정적입니다.

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="페이지 제목">
<meta name="twitter:description" content="페이지 설명">
<meta name="twitter:image" content="https://example.com/twitter-image.jpg">

twitter:card의 값으로는 summary(작은 정사각형 이미지), summary_large_image(넓은 가로 이미지), app(앱 카드), player(미디어 플레이어)가 있습니다. 대부분의 경우 summary_large_image가 시각적으로 가장 효과적입니다.

robots 메타태그

<!-- 기본값 (설정하지 않아도 동일) -->
<meta name="robots" content="index, follow">

<!-- 색인 제외 -->
<meta name="robots" content="noindex, nofollow">

<!-- 구글봇에만 별도 지시 -->
<meta name="googlebot" content="noindex">

로그인 페이지, 관리자 페이지, 테스트 페이지, 중복 필터 페이지 등에 noindex를 적용하세요. robots.txt와 달리 메타 robots는 페이지별로 개별 적용이 가능합니다.

JSON-LD 구조화 데이터

JSON-LD는 Schema.org 어휘를 사용해 페이지 콘텐츠를 기계가 이해할 수 있는 형태로 표현합니다. Google 리치 결과(Rich Results — 별점, FAQ 드롭다운, 레시피 카드 등)를 얻기 위한 핵심 요소입니다.

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "기사 제목",
  "description": "기사 설명",
  "author": {
    "@type": "Person",
    "name": "작성자 이름"
  },
  "datePublished": "2024-01-01",
  "dateModified": "2024-03-15",
  "publisher": {
    "@type": "Organization",
    "name": "사이트명",
    "logo": {
      "@type": "ImageObject",
      "url": "https://example.com/logo.png"
    }
  }
}
</script>

FAQ 페이지에는 FAQPage 타입, 제품 페이지에는 Product 타입, 로컬 비즈니스에는 LocalBusiness 타입을 사용합니다. Google의 리치 결과 테스트(search.google.com/test/rich-results)로 구조화 데이터를 검증할 수 있습니다.

hreflang — 다국어 사이트

다국어/다지역 사이트에서 검색 엔진에 언어 및 지역 버전을 알려주는 태그입니다.

<link rel="alternate" hreflang="ko" href="https://example.com/ko/page/">
<link rel="alternate" hreflang="en" href="https://example.com/en/page/">
<link rel="alternate" hreflang="x-default" href="https://example.com/page/">

x-default는 특정 언어에 해당하지 않는 사용자에게 보여줄 기본 URL입니다. hreflang 태그는 각 언어 버전 페이지 모두에 양방향으로 설정해야 합니다.

실무 SEO 메타태그 체크리스트

배포 전 반드시 확인해야 할 항목들입니다. title이 있고 50~60자 이내인지, description이 있고 120~160자 이내인지, canonical URL이 설정되어 있는지, og:image가 설정되어 있고 1200×630px 이상인지, Twitter Card가 설정되어 있는지, JSON-LD가 올바른지 확인하세요. 또한 다국어 사이트라면 hreflang 양방향 설정 여부도 점검해야 합니다.

자주 묻는 질문

Google이 내가 설정한 title/description을 무시하는 이유는?

Google은 사용자 쿼리와 페이지 내용을 분석하여 메타 description보다 더 적합한 텍스트를 본문에서 직접 추출할 수 있습니다. 이는 메타태그가 잘못 설정되거나 너무 일반적인 경우, 또는 Google이 더 관련성 높은 텍스트를 찾은 경우에 발생합니다. 제목과 설명을 쿼리 의도에 맞게 구체적으로 작성하는 것이 최선입니다.

OG 이미지 크기는 왜 1200×630px이 권장되나요?

Facebook, 카카오톡 등 주요 플랫폼이 1.91:1 비율의 가로형 이미지를 기준으로 미리보기 카드를 렌더링하기 때문입니다. 1200×630px은 레티나 디스플레이를 고려한 최소 권장 크기입니다. 이보다 작으면 흐릿하게 표시되거나 카드 형식이 아닌 링크만 표시될 수 있습니다.

canonical을 self-referential로 설정해야 하나요?

네, 모든 페이지에 해당 페이지 자신의 URL을 canonical로 설정하는 것이 권장됩니다. 이렇게 하면 의도치 않은 URL 파라미터나 세션 ID가 포함된 URL이 대표 URL로 인식되는 것을 방지할 수 있습니다.

JSON-LD와 마이크로데이터의 차이는 무엇인가요?

JSON-LD는 HTML 본문에 영향을 주지 않고 <script> 태그에 별도 작성하는 방식으로, Google이 공식적으로 권장합니다. 마이크로데이터는 HTML 요소에 직접 속성을 추가하는 방식으로, 기존 HTML과 밀접하게 결합됩니다. 유지보수 편의성 면에서 JSON-LD가 훨씬 유리합니다.

도구 활용

현재 페이지의 메타태그를 즉시 점검하려면 SEO 메타체크 도구를 사용하세요. 페이지 소스(Ctrl+U)를 복사해서 붙여넣으면 title, description, OG 태그, Twitter Card, canonical 등 주요 항목을 자동으로 분석하고 Google 검색 결과 미리보기도 확인할 수 있습니다.

관련 도구

SEO 메타체크HTTP 헤더 분석글자수 세기

광고 영역