캐노니컬 태그와 스키마 마크업으로 SEO 완성도 높이기

지난 글에서는 SEO의 기초가 되는 타이틀 태그, 메타 디스크립션, 헤더 태그, 이미지 Alt 태그까지 총 4가지의 HTML 코드를 살펴보았습니다. SEO 성과를 한 단계 더 끌어올리기 위해서는 ‘기본 태그’ 외에도 챙겨야 할 핵심 태그가 더 있습니다.

오늘은 중복 콘텐츠 문제를 해결하고, 검색 엔진이 페이지의 구조와 의미를 더 명확히 이해할 수 있도록 하는 캐노니컬 태그와 스키마 마크업에 대해 소개합니다.

캐노니컬 태그

캐노니컬 태그(<link rel="canonical">)는 유사한 콘텐츠가 여러 URL에 걸쳐 존재할 때, 어떤 버전이 ‘권위 있는 원본’인지 검색 엔진에 알려주는 핵심적인 테크니컬 SEO 요소입니다. 캐노니컬 처리가 제대로 되어 있지 않으면, 사이트의 순위가 크게 분산될 수 있습니다.

<link rel="canonical" href="<https://www.yoursite.com/preferred-page-url>">

캐노니컬 태그가 중요한 이유

검색 엔진의 목표는 사용자에게 다양하고 관련성 높은 결과를 제공하는 것입니다. 구글이 내용이 거의 유사한 여러 페이지를 발견했다면 다음과 같은 문제가 발생할 수 있습니다.

랭킹 신호 분산 SEO 가치(링크, 참여도 등)가 하나의 선호 URL이 아니라 다수의 중복 페이지에 나뉘어 쌓이게 됩니다.
크롤링 자원 낭비 구글이 중복된 페이지를 반복해서 크롤링하면서, 최신 콘텐츠나 가치 있는 콘텐츠를 놓칠 수 있습니다.
검색 결과(SERP) 표시의 불확실성 캐노니컬 URL을 지정하지 않으면 구글이 임의로 선택한 URL이 검색 결과에 노출될 수 있습니다,
중복 콘텐츠로 인한 문제 인식 구글이 중복 콘텐츠에 직접적인 패널티를 부과하는 경우는 많지 않지만, 잘못된 버전이 순위에 오르거나 어떠한 버전도 노출되지 않으면 실질적으로 패널티를 받은 것과 비슷한 결과가 나타날 수 있습니다.

캐노니컬 태그를 반드시 적용해야 하는 주요 사례들

전자상거래 사이트의 URL 파라미터
색상이나 사이즈 선택으로 생긴 여러 URL은 모든 신호를 하나의 대표 상품 페이지로 캐노니컬 처리해 모아야 합니다.

세션 ID와 추적 코드가 포함된 URL
동적 파라미터가 포함된 URL(예: ?sid=abc123&utm_source=email)은 중복 콘텐츠 이슈를 피하기 위해 깔끔한 버전의 URL로 캐노니컬을 지정해야 합니다.

프린트용 버전
/print/ 또는 ?print=true처럼 기능적으로 동일한 페이지는 표준 버전으로 캐노니컬 처리해야 합니다.

모바일 또는 대체 버전
별도의 URL이 존재하는 경우(예: m.example.com, AMP 페이지 등), 두 버전 사이에 상호 캐노니컬을 적용해 중복을 방지해야 합니다.

데스크톱 URL: https://example.com/products/wireless-headphones
모바일 URL: https://m.example.com/products/wireless-headphones

데스크톱 버전의 <head>에 다음 태그 추가

<!-- 자기 자신을 캐노니컬로 지정 -->
<link rel="canonical" href="<https://example.com/products/wireless-headphones>">
<!-- 모바일 대체 버전 존재 알림 -->
<link rel="alternate" media="only screen and (max-width: 640px)" href="<https://m.example.com/products/wireless-headphones>">

모바일 버전의 <head>에 다음 태그 추가

<!-- 데스크톱 버전을 캐노니컬로 지정 -->
<link rel="canonical" href="<https://example.com/products/wireless-headphones>">
<!-- 자기 자신을 모바일 대체 버전으로 명시 -->
<link rel="alternate" media="only screen and (max-width: 640px)" href="<https://m.example.com/products/wireless-headphones>">

이렇게 양방향으로 링크를 설정하면 검색 엔진은 두 가지 URL이 동일한 콘텐츠이고, 각각의 기기 유형에 맞춰 최적화된 버전임을 인식하게 됩니다. 그 결과 중복 콘텐츠로 처리되지 않으며, 두 버전 모두 SEO 가치를 유지할 수 있습니다.

반복 요소가 포함된 페이지네이션
제품 리스트나 기사 시리즈처럼 첫 번째 페이지의 내용을 여러 페이지에 반복해서 사용하는 경우, 각 페이지가 자신의 URL을 캐노니컬로 지정해야 합니다. ‘전체 보기’를 활용할 경우에는 예외가 있을 수 있습니다.

랭킹에 악영향을 주는 캐노니컬 태그 설정 오류

페이지네이션 시 자기참조 캐노니컬
페이지네이션된 콘텐츠에 고유한 내용이 있는 경우, 각 페이지는 첫 번째 페이지가 아니라 자기 자신을 캐노니컬로 지정해야 합니다.

캐노니컬 체인
A 페이지가 B 페이지를 캐노니컬로 지정하고, B 페이지는 다시 C 페이지를 캐노니컬로 지정하는 식의 연결 고리(chain)를 만들면 검색 엔진의 크롤러가 혼란을 겪습니다.

캐노니컬 루프
A 페이지가 B 페이지를 캐노니컬로, B 페이지가 다시 A 페이지를 캐노니컬로 지정하는 순환 참조는 잘못된 구조입니다.

상충되는 신호
캐노니컬 태그가 hreflang, 색인 제어, 리디렉션 등 다른 지시어들과 충돌할 경우, 검색 엔진이 어떤 지시를 따라야 할지 혼란스러워질 수 있습니다.

HTTP/HTTPS 프로토콜 불일치
캐노니컬 참조에서 HTTP와 HTTPS를 혼용하면 랭킹 신호가 분산될 수 있습니다.

상대 경로 vs. 절대 경로
상대 경로를 사용할 경우, 디렉토리 구조가 변경되면 잘못된 URL로 해석될 수 있기 때문에 절대 경로를 사용하는 것이 더 안전합니다.

고급 캐노니컬 구현 전략

캐노니컬 태그는 나중에 덧붙이는 요소가 아니라, 사이트 아키텍처 설계 단계에서부터 고려되어야 합니다. 사이트를 개발할 때, 아래와 같은 내용을 포함한 캐노니컬 매핑 문서를 만들어 두는 것이 좋습니다.

블로그 시리즈나 제품 버전 간의 상하 관계
필터링, 정렬, 추적 등을 위한 URL 파라미터 처리 규칙
도메인 간 콘텐츠 공유 정책 (콘텐츠를 여러 사이트에 게재할 경우)
AMP, m-dot, 지역 버전 등 모바일/대체 버전 간 관계 정의

이렇게 사전에 계획된 전략을 통해 중복 콘텐츠 이슈를 미리 방지하고, 트래픽이 급감한 이후에 부랴부랴 수정하는 사태를 막을 수 있습니다.

스키마 마크업

스키마 마크업은 콘텐츠와 검색 엔진 사이의 번역기 역할을 합니다. 일반 HTML 태그가 콘텐츠의 표시 방식을 알려준다면, 스키마는 각 요소가 무엇을 의미하는지 명확하게 정의해 줍니다. 이를 통해 검색 알고리즘은 페이지의 목적과 구성 요소를 더 정확하게 이해할 수 있습니다.

{
"@context": "[<https://schema.org>](<https://schema.org/>)",
"@type": "Product",
"name": "Smart Thermostat Pro",
"image": "<https://example.com/images/thermostat.jpg>",
"description": "An energy-efficient smart thermostat with Wi-Fi control.",
"sku": "THERMO-2025",
"brand": {
"@type": "Brand",
"name": "EcoTech"
},
"offers": {
"@type": "Offer",
"price": "199.99",
"priceCurrency": "USD",
"availability": "<https://schema.org/InStock>"
},
"aggregateRating": {
"@type": "AggregateRating",
"ratingValue": "4.7",
"reviewCount": "203"
}
}

스키마 구현 방식 비교

웹사이트 운영자와 개발자는 다양한 방식으로 스키마를 구현할 수 있습니다. 각각의 방법은 기술 수준과 사이트 구조에 따라 장단점이 있으며, 유지 보수 및 기존 코드와의 상호작용 방식도 다릅니다. 가장 일반적인 스키마 구현 방식은 마이크로데이터, JSON-LD, RDFa 세 가지입니다.

마이크로데이터 (Microdata)

마이크로데이터는 한때 가장 널리 사용된 스키마 구현 방식이었으며, 지금도 특히 구형 웹사이트나 오래된 콘텐츠 관리 시스템(CMS)에서는 비교적 흔히 볼 수 있습니다. 최근에는 JSON-LD가 새로운 구현 방식으로 자리 잡았지만, 마이크로데이터 역시 여전히 웹에서 구조화 데이터를 제공하는 데 큰 비중을 차지하고 있습니다.

마이크로데이터의 특징

HTML 코드 안에 직접 통합됨
콘텐츠 업데이트와 함께 관리하기 쉬움
중첩된 엔티티가 많을 경우 구조가 복잡해질 수 있음
업데이트 시 관리 부담이 다소 클 수 있음

많은 CMS 플랫폼이나 플러그인(특히 구버전)은 여전히 마이크로데이터를 기본 스키마 방식으로 사용합니다. 또한 일부 개발자들은 구조화 데이터가 실제 콘텐츠와 직접 연결되어 있는 방식을 선호할 때 마이크로데이터를 사용하기도 합니다.

그러나 웹사이트 구조가 복잡해질수록 더 많은 개발자들이 유연성과 간편한 구현을 위해 마이크로데이터에서 JSON-LD로 전환하고 있는 추세입니다.

JSON-LD

구글은 공식 문서에서 JSON-LD를 선호한다고 명확하게 밝혀왔으며, 그 이유는 다음과 같습니다.

처리 용이성: JSON-LD는 구글 크롤러가 데이터를 효율적으로 분석하고 추출할 수 있도록 정돈된 형식을 제공합니다. HTML 요소에 뒤섞여 있는 마크업보다 훨씬 간단합니다.
오류 감소: 콘텐츠 마크업과 구조화 데이터를 분리하면 구현 오류가 줄어들어, 구글이 스키마를 정확히 해석할 가능성이 높아집니다.
비동기 로딩 지원: JSON-LD는 페이지가 로드된 후 동적으로 삽입할 수 있으므로, Google Tag Manager 같은 태그 관리 시스템을 사용해도 성능에 영향을 주지 않습니다.
복잡한 데이터 관계에 적합: 레시피 재료, 단계, 영양 정보, 평점 등 다양한 데이터 포인트 간 관계를 명확히 표현할 수 있어, 구글의 리치 결과 요구 사항을 만족시키기에 좋습니다.
확장성: 스키마 표준이 진화하더라도, JSON-LD는 일관적이고 예측 가능한 형식을 유지하기 때문에 구글이 처리 시스템을 쉽게 확장할 수 있습니다.

JSON-LD의 특징

Google Tag Manager를 통해 삽입 가능
콘텐츠 HTML과 분리된 구조
복잡한 중첩 관계 구현이 쉬움
업데이트 및 유지보수가 간편함

RDFa

RDFa는 아래에서 설명하듯 고급 기능을 제공하지만, 구현 난이도가 높고 JSON-LD가 상업 사이트에서 널리 채택되면서 일반적인 SEO 활용도는 낮은 편입니다.

RDFa의 특징

주로 XHTML 기반 사이트에서 사용
세 가지 방식 중 가장 풍부한 어휘 집합 지원
외부 데이터 소스와의 연결을 유연하게 지원
국제 메타데이터 표준과 호환 가능
마이크로데이터보다 더 복잡한 데이터 관계 표현 가능
다양한 어휘 체계(namespace)를 동시에 사용할 수 있어 정밀한 제어 가능
정확하게 구현하려면 상당한 기술 지식 필요

RDFa는 주로 학술기관, 정부기관, 특수 기술 사이트 등에서 정밀한 데이터 간 연결이 중요한 경우에 선호됩니다.

페이지 유형별 전략적 스키마 선택

아래 표는 페이지 유형에 따라 자주 사용하는 스키마 유형을 정리한 것입니다. 사이트의 구조나 콘텐츠에 따라 이외에도 적합한 스키마는 다양하게 존재합니다.

페이지 유형	주요 스키마	보조 스키마
홈페이지	Organization, WebSite	LocalBusiness (적용 가능할 경우)
상품 페이지	Product	Offer, AggregateRating, Review
카테고리 페이지	ItemList, CollectionPage	BreadcrumbList
기사/블로그 게시글	Article, BlogPosting	Author, Publisher
로컬 비즈니스 페이지	LocalBusiness	GeoCoordinates, OpeningHours
이벤트 페이지	Event	Location, Performer, Offer

리치 결과를 막는 스키마 구현 오류

스키마 마크업을 적용할 때 다음과 같은 일반적인 실수를 주의해야 합니다. 이러한 오류는 구조화 데이터가 검색엔진에 의해 올바르게 해석되지 않도록 만들며, 리치 결과 표시를 막을 수 있습니다.

숨겨진 콘텐츠에 마크업 적용: 스키마는 페이지에 실제로 표시되는 콘텐츠에만 적용되어야 하며, 사용자에게 보이지 않는 요소에 마크업을 적용하면 안 됩니다.
속성 누락: 필수 속성이 빠져 있으면 전체 스키마가 무효 처리됩니다.
콘텐츠와 스키마의 불일치: 스키마 데이터는 사용자가 실제로 페이지에서 확인할 수 있는 정보와 정확히 일치해야 합니다.
논리적으로 맞지 않는 스키마 혼용: 한 페이지에 서로 호환되지 않는 스키마 타입을 적용하면 혼란을 일으킬 수 있습니다.
중첩 관계 오류: 엔티티 간의 상하관계를 정확하게 중첩하지 않으면 마크업이 잘못된 것으로 간주됩니다.

스키마 마크업은 검색 엔진이 콘텐츠를 해석하는 방식을 근본적으로 변화시킵니다. 검색 결과에 리치 스니펫이 노출되지 않더라도, 올바르게 구현된 스키마는 페이지의 주제 및 관련성 평가에 큰 영향을 미칠 수 있습니다.

피해야 할 일반적인 HTML 태그 실수

HTML 태그는 검색 순위와 사용자 경험 모두에 긍정적인 영향을 줄 수 있지만, 잘못 구현하면 오히려 웹사이트에 부정적인 영향을 줄 수 있습니다.

제목 태그에 키워드를 과도하게 집어넣기

키워드 남용은 오래된 SEO 전략입니다. 오늘날의 검색 엔진은 자연어 처리 능력이 매우 뛰어나기 때문에 키워드를 반복해서 넣는 방식은 사용자 경험을 해치고 오히려 패널티를 유발할 수 있습니다.

사용자에게 정확하고 유익한 정보를 전달하는 자연스러운 제목이, 키워드만 나열된 제목보다 훨씬 더 좋은 성과를 냅니다.

잘못된 예: <title>스마트홈 기기 스마트홈 기술 스마트홈 시스템 스마트홈 자동화 최고의 스마트홈</title>
더 나은 예: <title>2025년 최고의 스마트홈 기기 10선 | 사이트 이름</title>

헤더 태그 오용

한 페이지에 H1 태그를 여러 번 사용하는 것
디자인 목적으로만 헤더를 사용하고 의미 구조를 고려하지 않는 것
H2에서 H4로 단계를 건너뛰는 것
헤더를 쓰되 설명 없는 텍스트만 사용하는 것

잘못된 예:
<h1>스마트홈 가이드</h1>
<h1>최고의 스마트홈 기기</h1>
<h4>보안 카메라</h4>

올바른 예:
<h1>2025 스마트홈 완벽 가이드: 최고의 기기 추천</h1>
<h2>추천 스마트홈 보안 기기</h2>
<h3>보안 카메라</h3>

여러 페이지에서 동일한 제목 태그 사용

여러 페이지에서 동일한 title 태그를 사용할 경우, 검색 엔진은 어떤 페이지를 특정 쿼리에 대해 우선적으로 랭크시켜야 할지 혼란을 겪게 됩니다.

예를 들어, 한 전자상거래 사이트가 다음과 같은 제목을 상품 페이지, 카테고리 페이지, 블로그 게시글 모두에 반복해서 사용한 경우를 가정해 봅시다.
<title>프리미엄 등산 장비 | Outdoor Adventures</title>
이렇게 되면 검색 엔진은 어떤 페이지를 ‘등산 장비’ 관련 검색어에 대해 노출시켜야 할지 판단하기 어렵고, 그 결과 모든 페이지의 가시성이 떨어질 수 있습니다.

잘못된 캐노니컬 태그 설정

캐노니컬 URL을 잘못 지정하거나, 상충되는 캐노니컬을 설정하면 잘못된 페이지가 인덱싱되거나, 실제로 노출돼야 할 콘텐츠가 검색 결과에서 제외될 수 있습니다.

예: 빨간색과 파란색 두 가지 색상의 상품이 각각 다른 URL로 제공되는 경우

<!-- 빨간색 상품 페이지 -->
<link rel="canonical" href="<https://example.com/product/blue-widget>" />
<!-- 파란색 상품 페이지 -->
<link rel="canonical" href="<https://example.com/product/blue-widget>" />

위 예시처럼 양쪽 모두가 파란색 상품을 캐노니컬로 지정하면, 검색 엔진은 오직 파란색 버전만 색인하며, 빨간색 상품은 전혀 노출되지 않게 됩니다.

오해를 불러일으키는 메타디스크립션

메타디스크립션이 없거나, 페이지 내용을 제대로 설명하지 못하면 검색 결과에서 클릭률이 낮아지고 이탈률은 높아질 수 있습니다.

세금 공제 전략에 대한 콘텐츠인데 “저희 서비스에 대해 자세히 알아보세요. 지금 확인해보세요. 최고의 옵션을 제공합니다.”와 같은 메타디스크립션을 활용하는 경우를 예시로 들 수 있는데요.

이런 일반적이고 무의미한 설명은 사용자가 페이지에서 어떤 정보를 얻을 수 있는지를 알려주지 않기 때문에, 검색 클릭률을 낮추고 기대에 못 미칠 경우 이탈률도 증가시킵니다.

모바일 전용 태그 누락

viewport 메타태그나 모바일 메타데이터가 누락되면, 모바일 사용자 경험과 모바일 순위에 부정적인 영향을 줍니다.

예: 반응형 웹사이트인데 다음 태그가 누락된 경우

<!-- 이 중요한 태그가 빠짐 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

이 태그가 없으면 모바일 기기에서는 데스크톱 버전을 축소해서 표시하게 되고, 텍스트가 너무 작아져 확대가 필요해지는 등 사용자 경험이 악화됩니다.

구조화 데이터의 과도한 사용

콘텐츠와 맞지 않는 스키마를 적용하거나, 리뷰가 없는 페이지에 가짜 리뷰 마크업을 삽입하면 패널티를 받을 수 있습니다.

예시: 리뷰가 없는 일반 상품 페이지에 아래와 같이 조작된 5점 리뷰 스키마 삽입

<script type="application/ld+json">
{
  "@context": "<https://schema.org/>",
  "@type": "Product",
  "name": "Premium Hiking Boots",
  "review": {
    "@type": "Review",
    "reviewRating": {
      "@type": "Rating",
      "ratingValue": "5",
      "bestRating": "5"
    },
    "author": {
      "@type": "Person",
      "name": "John Smith"
    }
  }
}
</script>

이러한 조작은 구글의 구조화 데이터 가이드라인을 위반하는 행위로 간주되며, 사이트에 수동 조치(패널티)가 가해지고 모든 리치 결과가 제거될 수 있습니다.

언어 태그 무시

html의 lang 속성이 누락되거나 잘못 지정되면, 국제 SEO 및 스크린 리더 접근성에 부정적인 영향을 줍니다.

예: 독일어로 작성된 다국어 사이트인데, 언어 속성이 잘못되었거나 아예 없는 경우

<!-- 잘못되었거나 누락된 lang 속성 -->
<html>
<!-- 올바른 예 -->
<html lang="de">

이런 경우, 검색 엔진이 독일어 콘텐츠를 영어 검색어로 잘못 색인하거나, 스크린 리더가 독일어를 영어식으로 읽는 문제, 또는 브라우저 번역 기능이 제대로 작동하지 않는 문제가 생길 수 있습니다.

✅ 원글 보러가기
🙌 디지털 마케팅 전문가의 도움이 필요하신가요? NNT와 무료 상담을 받아보세요!

Another Posts

INSIGHTS Digital Marketing SEO