티스토리 꾸미기 :: 검색엔진 최적화(SEO) 브레드크럼 설정

728x90

검색엔진 최적화( SEO)를 위한 브레드크럼 설정

티스토리 블로그를 운영하며 검색 엔진 최적화(SEO)에 대한 관심은 자연스럽게 커집니다.

그 과정에서 발견하게 되는 중요한 기능 중 하나가 바로 **브레드크럼(Breadcrumbs)**입니다.

단순히 사이트의 구조적인 내비게이션을 제공하는 것을 넘어,

검색 엔진 노출과 사용자 경험(UX) 향상에 모두 도움이 되는 핵심 SEO 요소로 꼽히고 있습니다.

브레드크럼이 무엇인가요?

브레드크럼은 웹사이트나 앱에서 사용자가 현재 어느 위치에 있는지

시각적으로 보여주는 경로 안내 시스템입니다. 마치 빵 부스러기를

따라 길을 찾는 것처럼, 사용자가 사이트 내에서 길을 잃지 않도록 돕는 역할을 합니다.

이러한 브레드크럼의 주요 장점은 크게 두 가지로 나눌 수 있습니다.

사용자 경험(UX) 개선: 사용자가 현재 위치한 페이지에서 상위 카테고리나 다른 페이지로 쉽게 이동할 수 있게 해줍니다. 이는 사이트의 전체 구조를 한눈에 파악하게 하여, 사용자의 탐색을 단순화하고 원하는 정보에 빠르게 접근하도록 돕습니다. 결과적으로 사용자가 더욱 편리하게 사이트를 이용할 수 있습니다.
검색 엔진 최적화(SEO): 검색 엔진이 웹사이트의 계층적 구조를 더 쉽게 이해하도록 돕습니다. 이는 검색 로봇이 사이트를 효율적으로 색인하고, 관련 검색어에 대해 더 높은 순위를 부여하는 데 긍정적인 영향을 미칠 수 있습니다.

브레드크럼 설정 전후 차이를 한번 보시죠.

이번 글에서는 **'북클럽 스킨'**을 기준으로 티스토리에

브레드크럼을 어떻게 적용하는지 단계별로 자세히 설명해

드릴 예정입니다. 다소 복잡해 보일 수 있지만, 설명에 따라

차근차근 진행하시면 누구나 쉽게 SEO를 최적화하는

브레드크럼을 완성할 수 있습니다.

만약 다른 스킨을 사용하고 있다면, '티스토리 브레드크럼' 또는

'브레드크럼' 키워드로 검색하시면 많은 개발자분들이

공유해 둔 코드를 참고하실 수 있습니다.

HTML 편

관리자 홈 > html 편집 > html 탭으로 들어갑니다.

html 탭에서 ctrl + f 로 아래 문장을 검색해줍니다.

<span class="category">

아래 코드를 <span class="category"> 밑에 복사해줍니다.

복사 할 때 각 개인 블로그에 맞게 수정해야할 내용이 있으니, 수정 후

붙여넣기를 해주세요.

코드 수정

1. "내 블로그 주소" 수정

2.삭제라고 써있는 글자 삭제

3.<span class="category">티스토리 꾸미기 "  " 를 사용 하여 주석처리 하기

<!-- 브레드크럼 시작 -->
<nav role="navigation" aria-label="Breadcrumbs" class="bf-breadcrumb clearfix bc-top-style">
<div class="container bf-breadcrumb-container">
 <ul class="bf-breadcrumb-items" itemscope="" itemtype="http://schema.org/BreadcrumbList">
  <meta name="numberOfItems" content="3">
  <meta name="itemListOrder" content="Ascending">

  <li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem" class="bf-breadcrumb-item bf-breadcrumb-begin">
   <a itemprop="item" href="내 블로그 주소" rel="home">
    <span itemprop="name">Home</span><meta itemprop="position" content="1"></a></li>

  <li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem" class="bf-breadcrumb-item">
   <a itemprop="item" href="내 블로그 주소[삭제##_article_rep_category_link_##]">
    <span itemprop="name">[삭제##_article_rep_category_##]</span>
    <meta itemprop="position" content="2"></a></li>
</ul> </div> </nav>
<!-- 브레드크럼 끝 -->

CSS 추가하기

CSS 탭으로 이동하여 하단에 아래 코드를 붙여넣기 해줍니다.

/* 브레드크럼 시작*/
.bf-breadcrumb.bc-top-style {
    margin: 0 0 14px 0;
}
.bf-breadcrumb .bf-breadcrumb-items {
    display: block;
    max-width: 1080px;
    margin: 0 auto 13px; /* 폰트 상하 간격1 */
    font-size: 0.9em; /* 폰트 크기 */
    font-weight: 600; /* 폰트 굵기 */
    color: white;
}
.bf-breadcrumb .bf-breadcrumb-item:not(.bf-breadcrumb-end):after {
    display: inline-block;
    font-style: normal;
    font-weight: 400;
    line-height: 16px; /* ⨠ 아이콘 상하 간격2 */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: '\00BB';
    margin-left: 5px;
    margin-right: 5px;
    color: #fef9a6; /* ⨠ 아이콘 색상 */
    vertical-align: top;
}
.bf-breadcrumb .bf-breadcrumb-item a, .bf-breadcrumb .bf-breadcrumb-item span {
    color: #fef9a6; /* 폰트색상 */
    display: inline-block;
}
li.bf-breadcrumb-item {
    display: inline-block;
}
/* 브레드크럼 끝*/

마무리

SEO 개선을 위한 브레드크럼을 알아보았는데요.

저도 설정 이후 광고 수익과 조회수 개선이 있는지

한번 모니터링 해봐야겠습니다.