검색 결과 빵부스러기(Breadcrumb) 미노출 해결 - Schema.org JSON-LD 구조화 데이터 적용 완벽 가이드

웹사이트에 카테고리 페이지나 게시글을 작성한 뒤 구글 검색 결과를 확인했을 때, URL 주소가 길고 지저분하게 출력되는 경험을 해봤을 것이다. 대부분 홈 페이지부터 현재 위치까지 연결되는 빵부스러기(Breadcrumb) 스니펫이 멋지게 나올 것으로 기대하지만, 실제로는 파라미터가 뒤엉킨 긴 URL 그대로 노출되는 경우가 많다. 다만 많은 개발자들이 이를 해결하는 정확한 원인이나 표준 규격 구조화 데이터 적용법을 모르는 경우가 많다. 이번에는 검색 결과 빵부스러기 미노출 원인이 정확히 뭔지, 왜 필요한지, 그리고 백엔드 및 HTML에서 어떻게 구현하는지 완벽하게 정리해서 소개하겠다.

Breadcrumb(빵부스러기)은 사용자가 웹사이트 내부에서 현재 어떤 위치에 있는 지 알려주는 네비게이션 길잡이 역할을 한다. 사용자 경험(UX) 측면에서도 훌륭한 가이드가 되지만, SEO 측면에서는 검색엔진 크롤러에게 웹사이트의 전체적인 카테고리 계층 구조를 명확히 전달하는 중요한 수단이다.

구글과 같은 검색엔진은 일반적인 HTML 마크업만 보고 해당 텍스트가 카테고리 경로인지 일반 본문 문장인지 완전히 구별하기 어렵다. 이 때 Schema.org의 BreadcrumbList 규격에 맞춘 구조화 데이터를 제공하면 구글 검색 결과(SERP)의 URL 표기 영역이 꺾쇠 구분자 형태의 깔끔한 카테고리 경로로 대체된다. 주소가 깔끔하게 정돈되면 유저의 신뢰도가 상승하여 검색 클릭률(CTR)이 눈에 띄게 개선된다.

Breadcrumb 구조화 데이터를 웹사이트에 구현하는 방법은 대표적으로 2가지가 있다.

첫 번째는 HTML 요소에 직접 속성을 부여하는 Microdata 방식이다. HTML 태그 내부 마크업에 itemprop, itemtype 속성을 일일이 덧붙이는 방식인데, 기존 DOM 구조를 복잡하게 만들고 화면 디자인(CSS)과 데이터 마크업이 결합되어 백엔드 템플릿 관리가 까다롭다.

두 번째는 구글이 공식적으로 가장 권장하는 JSON-LD(JavaScript Object Notation for Linked Data) 방식이다. 화면에 출력되는 HTML 구조와 완전히 독립되어 script 태그 형태로 선언하므로, 백엔드 서버 언어(PHP 등)에서 데이터를 배열로 가공하여 JSON으로 렌더링하기 매우 직관적이고 깔끔하다.

실무 백엔드 환경에서 빵부스러기 스니펫을 구현하는 실전 코드를 살펴보자.

✗ 잘못된 코드 (단순 HTML <a> 태그로만 네비게이션을 구성한 경우)

단순히 디자인용 HTML 태그만 생성하면 구글 검색엔진은 이를 구조화 데이터로 파악하지 못하고 길고 지저분한 URL을 그대로 노출한다.

<!-- 검색엔진이 구조화 데이터로 인식하지 못하는 일반 HTML -->
<nav class="breadcrumb">
    <a href="https://example.com">홈</a> &gt;
    <a href="https://example.com/blog">블로그</a> &gt;
    <span>SEO 최적화</span>
</nav>

✓ 올바른 코드 (PHP 배열을 가공하여 JSON-LD 구조화 데이터 자동 동적 출력)

백엔드에서 현재 카테고리 경로 배열을 구축하고 Schema.org 스펙인 BreadcrumbList 형태로 json_encode 처리하여 script 태그로 주입하는 올바른 패턴이다.

<?php
// 현재 페이지의 카테고리 경로 데이터 (백엔드 DB 또는 라우터에서 추출)
$breadcrumbs = [
    [
        'name' => '홈',
        'url'  => 'https://example.com'
    ],
    [
        'name' => '블로그',
        'url'  => 'https://example.com/blog'
    ],
    [
        'name' => 'SEO 최적화',
        'url'  => 'https://example.com/blog/seo'
    ]
];

// Schema.org 규격에 맞춘 JSON-LD 데이터 구조 생성
$itemListElement = [];
foreach ($breadcrumbs as $index => $crumb) {
    $itemListElement[] = [
        '@type'    => 'ListItem',
        'position' => $index + 1, // position은 1부터 시작하는 정수
        'name'     => $crumb['name'],
        'item'     => $crumb['url']
    ];
}

$schemaData = [
    '@context'        => 'https://schema.org',
    '@type'           => 'BreadcrumbList',
    'itemListElement' => $itemListElement
];
?>

<!-- HTML head 또는 body 내 출력 -->
<script type="application/ld+json">
<?php echo json_encode($schemaData, JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE | JSON_PRETTY_PRINT); ?>
</script>

출력 결과 (웹페이지 렌더링 후 생성되는 최종 JSON-LD 코드)

<script type="application/ld+json">
{
    "@context": "https://schema.org",
    "@type": "BreadcrumbList",
    "itemListElement": [
        {
            "@type": "ListItem",
            "position": 1,
            "name": "홈",
            "item": "https://example.com"
        },
        {
            "@type": "ListItem",
            "position": 2,
            "name": "블로그",
            "item": "https://example.com/blog"
        },
        {
            "@type": "ListItem",
            "position": 3,
            "name": "SEO 최적화",
            "item": "https://example.com/blog/seo"
        }
    ]
}
</script>

Microdata 방식과 JSON-LD 방식의 주요 차이점은 다음과 같다.

Breadcrumb 구현 시 개발자들이 자주 실수하는 주의사항을 정리했다.

✗ position 숫자를 0부터 시작하거나 순서를 뛰어넘는 경우 (반드시 1, 2, 3... 순차 정수 사용)

✗ item 속성에 상대 경로(/blog/seo)를 사용하는 경우 (구글은 HTTP/HTTPS가 포함된 완전한 절대 경로 URL만 정상 승인함)

✓ 구글 리치 리설트 테스트(Rich Results Test) 도구로 검증을 마치고 실제 Search Console에 수집 요청하기

Breadcrumb 구조화 데이터는 검색 결과에서의 클릭률(CTR) 향상과 사이트 계층 구조의 명확한 전달을 위한 필수 최적화 작업이다. 작은 최적화와 마크업 습관이 모여서 검색엔진 노출 순위와 유입률 증가라는 큰 효과를 만든다는 점을 잊지 말자. 이 글의 PHP JSON-LD 연동 예제를 참고해 현재 서비스 중인 카테고리 템플릿에 적용하면, 검색 결과에서 훨씬 더 직관적이고 깔끔하게 브랜딩된 빵부스러기 스니펫을 얻을 수 있을 것이다.