검색 순위 상승 비법! 브레드크럼 자동화로 티스토리 SEO 강화하기

웹사이트를 이용하다 보면 상단에 “홈 > 카테고리 > 게시글 제목”처럼 경로가 표시되는 것을 본 적이 있을 겁니다. 이것이 바로 브레드크럼이라고 하는데요, 이름은 동화 《헨젤과 그레텔》에서 남매가 길을 잃지 않으려고 빵 부스러기를 떨어뜨린 데서 유래했습니다. 웹에서는 방문자가 지금 사이트 어디에 있는지, 어떤 경로를 따라 왔는지를 알려주는 길잡이 역할을 합니다.

브레드크럼은 단순히 길 안내뿐 아니라, 사용자의 편의성을 높이고, 검색엔진 최적화(SEO)에도 큰 도움이 되어 내 블로그나 웹사이트의 검색 노출과 방문자 만족도를 동시에 높여줍니다.

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

이 글에서는 브레드크럼이 무엇인지, 왜 중요한지 쉽게 설명하고, 특히 티스토리처럼 카테고리가 많은 블로그에서 자동으로 브레드크럼을 만드는 방법까지 자세히 알려드리겠습니다.

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

브레드크럼(Breadcrumb)이란 웹사이트에서 사용자가 현재 위치한 페이지까지 도달하기 위해 거친 경로를 시각적으로 보여주는 내비게이션 요소입니다. 사용자가 사이트 내에서 자신의 위치를 쉽게 파악하고 원하는 페이지로 빠르게 이동할 수 있도록 도와줍니다.

브레드크럼이 왜 중요할까?

사용자 편의성 향상: 방문자가 지금 보고 있는 글이나 페이지가 어디에 위치하는지 한눈에 알 수 있습니다.
검색엔진 최적화(SEO) 도움: 구글 같은 검색엔진은 브레드크럼 정보를 보고 사이트 구조를 이해하며, 검색 결과에 보기 좋은 위치 경로를 보여줍니다.
클릭률 상승 효과: 검색결과에 경로가 표시되면 사용자가 더 신뢰하고 클릭할 가능성이 높아집니다.
사용자뿐 아니라 검색엔진도 사이트 구조가 명확하다고 판단.
사이트 전반적인 신뢰도가 올라가서 검색 순위에 긍정적 영향을 줍니다.
구글은 구조화 데이터를 적극 권장하고 있습니다.
브레드크럼 JSON-LD는 공식적인 SEO 가이드에 포함되어 있어 최신 트렌드에 부합합니다.

티스토리 블로그에서 브레드크럼 만들기

티스토리 블로그처럼 글이 많고 카테고리가 여러 개인 경우, 모든 글마다 브레드크럼을 수동으로 작성하기는 어렵습니다. 그래서 오늘은 “동적으로 현재 글 주소, 카테고리, 제목을 읽어서 자동으로 브레드크럼 구조화 데이터를 만드는 방법”을 소개합니다.

글이 많고 카테고리가 많은 블로그에서 매번 수동으로 작업할 필요 없이
스크립트 하나만 넣으면 자동으로 모든 글에 적용됩니다.
작업 시간과 오류 가능성도 줄어듭니다.

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

JSON-LD는 구글에 데이터를 알려주는 특별한 구조화 데이터 형식입니다.
브레드크럼 정보를 JSON-LD 형식으로 웹페이지에 넣으면,
구글이 사이트 구조를 더 잘 이해해서 검색결과에 위치 정보를 예쁘게 보여줍니다.

티스토리 최적화에서 광고가 미치는 현상 — 웹사이트, 블로그에 광고를 넣는 건 수익을 위해 어쩔 수 없는 선택 이지만, 접근성 문제 , 권장사항에 문제를 동반할 수 있습니다

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

아래 자바스크립트는 현재 페이지 URL과 제목, 카테고리 경로를 자동으로 파악해서 JSON-LD 브레드크럼 코드를 생성하고, 페이지에 삽입합니다.

<script>
(function() {
  // 현재 URL 가져오기
  const currentUrl = window.location.href;

  // 홈 URL (자신의 블로그 메인 URL로 수정)
  const homeUrl = 'https://everydayhub.tistory.com/';

  // 카테고리 URL과 이름을 동적으로 추출 (예: URL 경로에서 두번째 슬래시 이후 부분)
  // 티스토리 URL 예: https://everydayhub.tistory.com/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 배열에 홈, 카테고리, 게시글 순서대로 객체를 추가합니다.
마지막에 JSON-LD 형식으로 변환해 <head> 안에 <script>로 삽입합니다.

어디에 붙여야 할까?

티스토리 스킨 편집에서 <head> 바로 아래나,
<body> 태그 끝부분 근처에 붙여주세요.
그렇게 하면 페이지가 열릴 때 자동으로 브레드크럼 데이터가 만들어집니다.

적용 후 반드시 확인해야 할 것!

구글 리치 결과 테스트 도구에서 URL을 입력해
BreadcrumbList가 감지되는지 꼭 확인하세요.
오류 없이 제대로 뜨면 성공입니다.

브레드크럼은 사용자의 편의성과 구글 SEO 모두에 매우 중요한 요소입니다. 특히 글이 많고 카테고리가 많은 블로그에서는 자동 생성하는 방법이 훨씬 효율적입니다. 위 자바스크립트 코드를 붙이기만 하면 별도 관리 없이 자동으로 동작하니 꼭 적용해 보시고, 검색 노출 향상을 경험해 보세요!

저작자표시 비영리 변경금지 (새창열림)

'SEO > seo-resources' 카테고리의 다른 글

빈 썸네일, 블로그 글 작성 시 이미지가 없는 요소의 빈 공간 문제와 해결법 (4)	2025.06.27
블로그 상단 광고 고정(코드 포함) 노출로 수익과 검색 최적화 (SEO) 동시에 잡는 법 (4)	2025.06.14
블로그 댓글란 활용 방법! 댓글을 콘텐츠 확장 도구로 활용하는 이미지·링크 표시 방법 (0)	2025.06.12
블로그 콘텐츠 도용 방지 방법｜SEO 손상 없이 안전하게 보호하는 법 (1)	2025.05.30
CSS 코드 자동 정리 프로그램 공유, CSS최적화로 블로그 최적화하기 (4)	2025.05.28
블로그 애드센스 광고 ! 댓글란까지 확장해 수익 극대화하는 방법 (5)	2025.04.29
블로그 콘텐츠 관리 프로그램 v2 생산성 향상! 자동화 도구와 IPTV 기능 (2)	2025.04.15