티스토리 북클럽 스킨 | 카테고리 탐색경로 브레드크럼(breadcrumb)

목차

북클럽 스킨, 카테고리 탐색경로 브레드크럼(breadcrumb)

티스토리 최적화를 검색하다 검색 엔진 최적화(SEO)에 도움이 되는 브레드크럼(breadcrumbs)이라는 게 있다는 걸 알게 되었습니다.

 

아래처럼 검색 엔진 최적화(SEO) 등 여러 가지 장점들이 있지만 제 경우는 일단 멋져 보여서 적용을 해봤습니다. ^^

 

항상 그렇듯 제 글이 설명이 길고 이미지가 많아 복잡해 보이지만 설명대로 하나씩 따라 하시면 쉽게 '브레드크럼(breadcrumb)'을 적용할 수 있으니 차근차근 따라 해 보시기 바랍니다.

브레드크럼(breadcrumb)은 SEO 최적화 방법 중 하나로 사이트나 앱에서 사용자가 현재 어느 위치에 있는지를 보여주는 내비게이션 요소입니다. 이러한 요소의 주요 장점은 다음과 같습니다:

1. 사용자 경로 제공:
   사용자가 현재 위치한 페이지에서 사이트의 다른 부분으로 쉽게 이동할 수 있도록 합니다. 이는 사용자의 경로를 시각적으로 파악하고 탐색을 단순화하여 사용자 경험을 향상시킵니다.
2. 사이트 내 이동 용이성:
   사용자가 원하는 정보에 빠르게 액세스 할 수 있도록 합니다. 이는 사용자들이 사이트를 더욱 쉽게 탐색하고, 필요한 정보를 놓치지 않도록 돕습니다.
3. 사용자 경험 향상:
   Breadcrumbs는 사용자들이 사이트를 더욱 직관적으로 이해하고 탐색할 수 있도록 도와줍니다. 이는 사용자들이 사이트를 보다 즐겁고 효율적으로 사용할 수 있도록 돕습니다.
4. 검색 엔진 최적화(SEO):
   Breadcrumbs는 웹사이트의 구조를 이해하는데 도움을 줄 뿐만 아니라, 검색 엔진이 사이트를 쉽게 색인하고 랭크하는 데에도 도움이 될 수 있습니다.

---

 

구글 서치콘솔에서 브레드크럼 적용 전, 후의 비교

아래 이미지는 구글 서치콘솔에서 브레드크럼 적용 전, 후의 비교입니다. 브레드크럼 적용 후에는 개선사항과 환경에 탐색경로 구조를 발견해서 생성된 것을 확인할 수 있습니다.

 

---

 

브레드크럼 북클럽 스킨 적용 미리보기

 

기존 링크가 없던 카테고리가 홈과 현제 카테고리를 알려주며 클릭 시 이동까지 가능한 브레드크럼으로 바뀐 걸 확인할 수 있습니다

728x90

 

브레드크럼 HTML 편집.

북클럽 스킨의 경우 기존 카테고리 코드 아래 브레드크럼의 HTML을 추가하고 기존의 카테고리를 <!-- 주석 -->을 이용해 숨겨주는  방식입니다.

 

1. '관리자 홈'에서 꾸미기 > 스킨 편집 > html 편집 > HTML'로 들어갑니다.

---

 

2. Ctrl + F를 이용해 <span class="category">를 검색합니다.

<span class="category">

---

 

3. 아래의 코드를 복사 후  <span class="category"> 코드 아래 붙여 넣고 코드를 수정 후 '적용'을 눌러주면 됩니다.

 

- 수정할 부분

• '삭제'라고 쓰인 부분을 지워주세요. (두 군데)
  [삭제##_article...  ⇉  [##_article...
  
  
• "내 블로그 주소"에 "본인의 블로그 주소"를 넣어 주세요 (두 군데)
  href="내 블로그 주소"  ⇉  href="https://galam.tistory.com"
  
  
• 주석으로 <span class="category"> 코드 아래위로 감싸서 숨기기
  <!--
  <span class="category">[ ##_article_rep_category_## ]</span>
  -->

---

 

4. 브레드크럼 HTML코드 복사하기

<!-- 브레드크럼 시작 -->
<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>
<!-- 브레드크럼 끝 -->

728x90

 

브레드크럼 스타일 CSS 추가하기

1. 'html'탭에서 'CSS'탭으로 들어갑니다.

---

 

2. 아래 코드를 복사하여 CSS'코드 맨 아래 넣어주고 '적용'을 눌러주시면 됩니다.

---

 

3. 브레드크럼 스타일 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;
}
/* 브레드크럼 끝*/

---

 

마무리

이렇게 '북클럽 스킨'에 적용되는 브레드크럼에 대해 알아봤습니다.

다른 스킨을 사용하시는 분들은 '브레드크럼'으로 검색을 하시면 많은 분들이 코드를 올려 두셨으니 참고하시기 바랍니다.

 

그리고 항상 말씀드리지만 제가 프로그래머도 블로그 고수도 아니기 때문에 그냥 다른 고수들이 올려주신 소스를 참고하며 제 블로그 스킨에 맞게 조금씩 수정한 코드입니다.

"쿠팡 파트너스 활동을 통해 일정액의 수수료를 제공받을 수 있습니다"