브레드크럼 자동화로 티스토리 블로그 SEO 최적화 강화하기

블로그 검색 순위를 높이는 핵심 SEO 전략 중 하나인 브레드크럼(Breadcrumb)을 내 블로그에 쉽고 빠르게 적용하는 방법을 소개합니다. 자바스크립트를 활용해 자동으로 JSON-LD 구조화 데이터를 생성하면, 검색 엔진에 내 사이트의 구조를 명확히 전달할 수 있습니다. 이를 통해 구글 리치 결과 노출과 사용자 편의성이라는 두 마리 토끼를 동시에 잡아 보세요.

웹사이트를 이용하다 보면 상단에 ‘홈 > 카테고리 > 게시글 제목’처럼 현재 위치가 표시되는 것을 본 적이 있을 겁니다. 이것을 브레드크럼이라고 부르는데요, 동화 속 헨젤과 그레텔이 길을 잃지 않으려 떨어뜨린 빵 부스러기에서 유래한 명칭입니다. 웹상에서도 방문자가 사이트 내에서 길을 잃지 않도록 도와주는 소중한 길잡이 역할을 합니다.

브레드크럼은 단순히 위치를 알려주는 기능을 넘어 검색엔진 최적화(SEO)에도 아주 큰 도움을 줍니다. 내 블로그의 구조를 검색 로봇이 계층적으로 이해하게 만들어 검색 노출 빈도와 방문자 만족도를 동시에 높여주기 때문입니다. 특히 구글이 강조하는 리치 결과에 내 글이 예쁘게 노출되기 위한 필수 요소이기도 합니다.

티스토리 카테고리별 브레드크럼 자동 생성과 SEO 최적화 실전 팁

이번 글에서는 브레드크럼이 왜 중요한지 살펴보고, 특히 카테고리가 복잡한 티스토리 블로그에서 코드를 통해 자동으로 브레드크럼을 생성하는 방법을 자세히 다뤄보겠습니다. 웹사이트의 구조적 명확성을 높여 검색 엔진이 좋아하는 환경을 직접 구축해 보세요.

브레드크럼(Breadcrumb)이란 무엇일까?

브레드크럼은 사용자가 현재 페이지까지 도달하기 위해 거친 경로를 시각적으로 보여주는 내비게이션 바입니다. 사용자가 사이트 내에서 자신의 위치를 파악하고 상위 카테고리로 빠르게 이동할 수 있게 돕는데, 보통 ‘홈 > 상위 카테고리 > 현재 페이지’ 순으로 정렬됩니다.

브레드크럼이 왜 중요할까? (SEO와 UX의 핵심)

• 사용자 편의성 향상 (UX): 방문자가 글을 읽다가 자신이 속한 카테고리의 다른 글도 쉽게 찾아볼 수 있어 이탈률이 낮아집니다.
• 검색엔진 최적화 (SEO) 도움: 구글 로봇은 브레드크럼 데이터를 통해 사이트의 계층 구조를 파악하고 더 효율적으로 정보를 수집합니다.
• 클릭률(CTR) 상승: 검색 결과 화면에 사이트 경로가 깔끔하게 표시되면 사용자의 신뢰도가 높아져 클릭할 확률이 올라갑니다.
• 웹 표준을 준수하는 구조화 데이터(Structured Data)를 적용함으로써 사이트의 전체적인 품질 점수가 개선됩니다.

티스토리 블로그에서 브레드크럼 자동화의 필요성

글이 수백 개가 넘는 블로그에서 모든 포스팅에 브레드크럼을 일일이 수동으로 넣는 것은 불가능에 가깝습니다. 그래서 현재 접속한 글의 주소와 제목, 카테고리를 스스로 읽어 들여 자동으로 구조화 데이터를 생성하는 스크립트가 필요합니다. 특히 대형 블로그 운영자에게는 필수적인 자동화 기술입니다.

• 수동 작업 대비 관리 시간을 90% 이상 획기적으로 줄여줍니다.
• 스크립트 하나만 설치하면 과거에 쓴 글부터 미래에 쓸 글까지 일관된 SEO 구조가 유지됩니다.
• 사람이 직접 입력할 때 생기는 주소 오타나 경로 오류를 완벽하게 방지합니다.

JSON-LD 브레드크럼 구조화 데이터란?

JSON-LD는 구글이 가장 권장하는 구조화 데이터 형식으로, 페이지의 head 태그 부분에 삽입되어 검색 엔진에게 “이 페이지는 이런 구조로 되어 있습니다”라고 친절하게 설명해 주는 역할을 합니다. 이 데이터가 잘 들어가 있으면 구글 검색 결과에 위치 정보가 포함된 리치 결과로 나타나게 됩니다.

동적 브레드크럼 JSON-LD 생성 스크립트

아래 자바스크립트 코드는 현재 페이지의 정보를 자동으로 파악하여 JSON-LD 코드를 만들어 줍니다. 홈 URL 부분만 본인의 블로그 주소로 정확하게 수정해서 사용해 주세요.

<script>
(function() {
    const currentUrl = window.location.href;
    const homeUrl = 'https://openipc.kr/'; // 자신의 블로그 주소로 변경하세요.
    const pathParts = window.location.pathname.split('/').filter(Boolean);
    
    let categoryName = '';
    let categoryUrl = '';
    let isCategoryPage = false;

    if (pathParts[0] === 'category' && pathParts[1]) {
        categoryName = decodeURIComponent(pathParts[1]);
        categoryUrl = homeUrl + 'category/' + pathParts[1];
        isCategoryPage = true;
    }

    const postTitle = document.title || '';
    const itemListElement = [{
        "@type": "ListItem",
        "position": 1,
        "name": "홈",
        "item": homeUrl
    }];

    if (isCategoryPage) {
        itemListElement.push({
            "@type": "ListItem",
            "position": 2,
            "name": categoryName,
            "item": categoryUrl
        });

        if (!window.location.pathname.endsWith('/category/' + pathParts[1] + '/')) {
            itemListElement.push({
                "@type": "ListItem",
                "position": 3,
                "name": postTitle,
                "item": currentUrl
            });
        }
    } else {
        itemListElement.push({
            "@type": "ListItem",
            "position": 2,
            "name": postTitle,
            "item": currentUrl
        });
    }

    const jsonLd = {
        "@context": "https://schema.org",
        "@type": "BreadcrumbList",
        "itemListElement": itemListElement
    };

    const script = document.createElement('script');
    script.type = 'application/ld+json';
    script.text = JSON.stringify(jsonLd);
    document.head.appendChild(script);
})();
</script>

스크립트의 작동 원리 분석

• 현재 페이지의 전체 주소와 경로를 분석하여 위치를 특정합니다.
• URL 구조를 파악해 해당 페이지가 특정 카테고리에 속해 있는지 확인합니다.
• 블로그의 제목 태그를 읽어와 브레드크럼의 마지막 단계를 게시글 제목으로 설정합니다.
• 수집된 정보를 바탕으로 구글이 이해할 수 있는 ListItem 객체 배열을 구성합니다.
• 최종적으로 JSON-LD 태그를 생성해 페이지의 상단(head)에 자동으로 삽입합니다.

적용 위치 가이드

• 티스토리 관리자 화면의 스킨 편집 > HTML 편집으로 들어갑니다.
• </head> 태가 바로 위나 </body> 태그가 끝나기 직전에 코드를 붙여넣으세요.
• 한 번의 설정으로 모든 글에 브레드크럼 데이터가 생성되어 검색 로봇에게 전송됩니다.

적용 후 확인해야 할 필수 검증 방법

코드를 적용했다면 반드시 구글 리치 결과 테스트 도구에서 확인 과정을 거쳐야 합니다. 내 글 주소를 입력했을 때 ‘BreadcrumbList’가 오류 없이 감지되는지 살펴보세요. 성공적으로 감지된다면 구글 서치 콘솔에서도 리치 결과 노출 현황을 모니터링할 수 있게 됩니다.

브레드크럼은 내 블로그를 방문한 사용자에게 친절한 안내원이 되어주고, 구글에게는 잘 정리된 지도를 건네주는 것과 같습니다. 특히 글이 쌓일수록 자동 생성 방식의 효율은 더욱 빛을 발합니다. 지금 바로 이 스크립트를 적용해서 여러분의 블로그를 더 가치 있는 공간으로 업그레이드해 보세요!