블로그 검색 순위를 높이는 핵심 SEO 전략인 브레드크럼(Breadcrumb)을 티스토리 블로그에 자동으로 적용하는 JSON-LD 스크립트와 구체적인 구현 방법을 소개합니다. 이 동적 자동화 기술을 통해 웹사이트 구조를 검색 엔진에 명확히 전달하여 리치 결과 노출과 사용자 편의성을 동시에 노려 보세요!.
웹사이트를 이용하다 보면 상단에 홈 카테고리 게시글 제목처럼 경로가 표시되는 것을 본 적이 있을 겁니다. 이것이 바로 브레드크럼이라고 하는데요, 이름은 동화 《헨젤과 그레텔》에서 남매가 길을 잃지 않으려고 빵 부스러기를 떨어뜨린 데서 유래했습니다. 웹에서는 방문자가 지금 사이트 어디에 있는지, 어떤 경로를 따라 왔는지를 알려주는 길잡이 역할을 합니다.
브레드크럼은 단순히 길 안내뿐 아니라, 사용자의 편의성을 높이고, 검색엔진 최적화(SEO)에도 큰 도움이 되어 내 블로그나 웹사이트의 검색 노출과 방문자 만족도를 동시에 높여줍니다. 특히 구글의 리치 결과(Rich Results)에 노출되기 위한 필수 요소로 자리 잡고 있습니다.
티스토리 카테고리별 브레드크럼 자동 생성과 SEO 최적화 실전 팁
이 글에서는 브레드크럼이 무엇인지, 왜 중요한지 쉽게 설명하고, 특히 티스토리처럼 카테고리가 많은 블로그에서 자동으로 브레드크럼을 만드는 방법까지 자세히 알려드리겠습니다. 이를 통해 웹사이트의 구조적 명확성을 높이고 검색 엔진 친화적인 환경을 구축할 수 있습니다.
브레드크럼(Breadcrumb)이란 무엇일까?
브레드크럼(Breadcrumb)이란 웹사이트에서 사용자가 현재 위치한 페이지까지 도달하기 위해 거친 경로를 시각적으로 보여주는 내비게이션 요소입니다. 사용자가 사이트 내에서 자신의 위치를 쉽게 파악하고 원하는 페이지로 빠르게 이동할 수 있도록 도와주며, 일반적으로 ‘홈 상위 카테고리 현재 페이지’ 순으로 표시됩니다.
브레드크럼이 왜 중요할까? (SEO와 UX의 핵심)
- 사용자 편의성 향상 (UX): 방문자가 지금 보고 있는 글이나 페이지가 어디에 위치하는지 한눈에 알 수 있어 이탈률을 낮춥니다.
- 검색엔진 최적화 (SEO) 도움: 구글 같은 검색엔진은 브레드크럼 정보를 보고 사이트 구조를 계층적으로 이해하며, 크롤링 효율성을 높입니다.
- 클릭률(CTR) 상승 효과: 검색결과에 경로가 표시되면 사용자가 더 신뢰하고 클릭할 가능성이 높아집니다. 이는 리치 결과 노출의 주요 이점입니다.
- 사이트 전반적인 신뢰도가 올라가서 검색 순위에 긍정적 영향을 줍니다.
- 구글은 구조화 데이터(Structured Data) 적용을 적극 권장하고 있습니다.
- 브레드크럼 JSON-LD는 공식적인 SEO 가이드에 포함되어 있어 최신 웹 표준에 부합합니다.
티스토리 블로그에서 브레드크럼 자동화의 필요성
티스토리 블로그처럼 글이 많고 카테고리가 여러 개인 경우, 모든 글마다 브레드크럼을 수동으로 작성하거나 수정하기는 매우 어렵습니다. 그래서 오늘은 동적으로 현재 글 주소, 카테고리, 제목을 읽어서 자동으로 브레드크럼 구조화 데이터를 만드는 방법을 소개합니다. 이 방법은 SEO 관리가 필요한 대형 블로그에 특히 유리합니다.
- 글이 많고 카테고리가 많은 블로그에서 매번 수동으로 작업할 필요 없이 관리 시간 90% 절약
- 스크립트 하나만 넣으면 자동으로 모든 글에 적용되어 일관된 SEO 구조를 유지합니다.
- 작업 시간과 사람이 직접 할 때 발생할 수 있는 오류 가능성도 줄어듭니다.
JSON-LD 브레드크럼 구조화 데이터란?
- JSON-LD는Schema.org 표준을 기반으로 구글에 데이터를 알려주는 특별한 구조화 데이터 형식입니다.
- 브레드크럼 정보를 JSON-LD 형식으로 웹페이지의 head 태그에 넣으면,
- 구글이 사이트 구조를 더 잘 이해해서 검색결과에 위치 정보를 예쁘게 표시해주는 리치 결과로 노출시킵니다.
동적 브레드크럼 JSON-LD 생성 스크립트
아래 자바스크립트는 현재 페이지 URL과 제목, 카테고리 경로를 자동으로 파악해서 JSON-LD 브레드크럼 코드를 생성하고, 페이지의 head 영역에 삽입합니다. 홈 URL은 반드시 자신의 블로그 주소로 수정해야 합니다.
script
(function() {
// 현재 URL 가져오기
const currentUrl = window.location.href;
// 홈 URL (자신의 블로그 메인 URL로 수정)
const homeUrl = 'https://qcai.kr/';
// 카테고리 URL과 이름을 동적으로 추출 (예: URL 경로에서 두번째 슬래시 이후 부분)
// 티스토리 URL 예: https://qcai.kr/category/블로그수익화
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;
}
// 글 제목은 title 태그에서 가져오기 (필요에 따라 커스터마이징)
const postTitle = document.title || '';
// JSON-LD 데이터 구성
const itemListElement = [
{
"@type": "ListItem",
"position": 1,
"name": "홈",
"item": homeUrl
}
];
if (isCategoryPage) {
itemListElement.push({
"@type": "ListItem",
"position": 2,
"name": categoryName,
"item": categoryUrl
});
// 글 페이지라면 3번째 위치 추가
if (!window.location.pathname.endsWith('/category/' + pathParts[1] + '/')) {
itemListElement.push({
"@type": "ListItem",
"position": 3,
"name": postTitle,
"item": currentUrl
});
}
} else {
// 카테고리 페이지가 아니라면 글 제목만 2번째로 넣음
itemListElement.push({
"@type": "ListItem",
"position": 2,
"name": postTitle,
"item": currentUrl
});
}
const jsonLd = {
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": itemListElement
};
// JSON-LD 스크립트 생성 및 삽입
const script = document.createElement('script');
script.type = 'application/ld+json';
script.text = JSON.stringify(jsonLd);
document.head.appendChild(script);
})();
/script
이 코드는 어떻게 작동할까? (스크립트 분석)
window.location.href로 현재 페이지 전체 주소를 가져와 경로 분석에 사용합니다.window.location.pathname으로 URL 경로를 슬래시(/) 기준으로 분리해 카테고리 여부를 체크합니다.- 카테고리 경로가 있다면 카테고리 이름과 주소를 동적으로 변수에 저장합니다.
- 문서 제목(
document.title)을 글 제목으로 사용하여 최종 단계의 이름을 설정합니다. itemListElement배열에 홈, 카테고리, 게시글 순서대로 **ListItem** 객체를 추가하여 계층 구조를 만듭니다.- 마지막에 JSON-LD 형식으로 변환해
head안에script type="application/ld+json"태그로 삽입합니다.
어디에 붙여야 할까? (적용 위치)
- 티스토리 스킨 편집에서
/head바로 위나, /body태그 끝부분 근처에 붙여주세요.- 어떤 위치든 페이지가 열릴 때 자동으로 브레드크럼 데이터가 생성되어 검색 엔진에 전송됩니다.
적용 후 반드시 확인해야 할 것! (검증 방법)
- 구글 리치 결과 테스트 도구에서 해당 글의 URL을 입력해
- BreadcrumbList가 오류 없이 감지되고, 구조화 데이터가 제대로 표시되는지 꼭 확인하세요.
- 성공적으로 감지되면 구글 서치 콘솔에서 리치 결과 보고서를 통해 노출 여부를 확인할 수 있습니다.
브레드크럼은 사용자의 편의성과 구글 SEO 모두에 매우 중요한 요소입니다. 특히 글이 많고 카테고리가 많은 블로그에서는 자동 생성하는 방법이 훨씬 효율적입니다. 위 자바스크립트 코드를 붙이기만 하면 별도 관리 없이 자동으로 동작하니 꼭 적용해 보시고, 검색 노출 향상을 경험해 보세요!
브레드크럼 JSON-LD를 적용하는 것이 실제 검색 순위에 영향을 주나요?
직접적인 순위 상승 요인이라기보다는, 구글이 사이트 구조를 정확히 이해하게 도와 크롤링 효율성을 높이고, 검색 결과에 리치 결과로 노출되어 클릭률(CTR)을 높입니다. 높아진 CTR은 간접적으로 검색 순위에 긍정적인 영향을 미칩니다.
티스토리에서 스크립트를 적용할 때 “홈 URL”을 정확히 입력해야 하는 이유는 무엇인가요?
JSON-LD 구조화 데이터는 각 경로 요소가 고유한 URL(Item)을 가져야 합니다. “홈 URL”은 브레드크럼의 시작점이자 최상위 페이지를 정의하므로, 스크립트가 정확한 경로를 구축하고 유효성을 확보하기 위해 반드시 정확한 메인 블로그 주소를 입력해야 합니다.
글의 제목이 너무 길 경우 브레드크럼에 모두 표시되나요?
브레드크럼은 주로 document.title을 사용하며, 구글은 검색 결과에 브레드크럼을 표시할 때 공간 제약으로 인해 제목을 자동으로 축약하거나 생략할 수 있습니다. 길이는 검색 엔진이 결정하지만, 내부적으로는 완전한 제목을 구조화 데이터에 포함하는 것이 좋습니다.