본문 바로가기

티스토리 카테고리 탐색경로 브레드크럼(breadcrumb)

by JINYH 2021. 12. 27.
728x90
반응형

'구글 검색 엔진 최적화(SEO)'를 공부하는 중에 '브레드크럼(Breadcrumb)'을 알게 됐다.

 

이 '브레드크럼(Breadcrumb)'은 웹사이트 방문자의 탐색 편의에 도움을 주어 웹사이트 체류시간을 높여줄 수 있고 이탈률을 낮춰줄 수 있다.

 

또한 검색 엔진이 웹사이트의 구조를 더 잘 이해하는 최적화에도 도움이 되는데, '브레드크럼(Breadcrumb)'을 적용하면 크롤링과 색인 생성 작업을 다시 해야 하니 웹사이트 운영을 시작할 때 적용하는 것이 좋겠다.

 

본 글은 '구글 검색 센터'를 기반으로 '브레드크럼(Breadcrumb)'의 중요성 및 필요성에 대한 내용과 티스토리의 반응형 스킨인 '북클럽 스킨'을 기준으로 '브레드크럼(Breadcrumb)' 적용 방법에 대한 내용이다.

 

 

 

 

 

 

 

 

 

 

1] 경로를 안내해 주는 '탐색 기능'

 

근본적으로 인터넷 사용자가 포털사이트에서 검색하는 이유는 원하는 정보를 찾기 위함이고, 나아가 웹사이트를 방문하는 이유는 원하는 정보를 얻기 위함이다.

 

지금은 '내비게이션(Navigation)'이 있기 때문에 우리가 원하는 장소 어디든 쉽게 이동할 수 있지만, 내비게이션이 없었던 시대에는 실시간 '최단 경로' 및 '최적 경로'를 안내받지 못했기 때문에 어디론가 멀리 떠나려는 마음먹기조차 쉽지 않았을 것이다.

 

이처럼 웹사이트 내에 경로 안내를 해주는 '탐색 기능'이 없다면, 웹사이트 방문자는 피로감을 느끼게 되고 좋지 않은 웹사이트와 콘텐츠로 여기게 되어 자연히 체류시간은 낮아지고 이탈률은 높아지게 된다.

 

 

 

 

 

다음은 구글에서 말하는 내용으로, '탐색 기능'이 방문자의 탐색 편의에 도움을 줄 때 중요한 역할을 할 뿐만 아니라 '검색 엔진이 웹사이트 소유자가 중요하다고 생각하는 콘텐츠를 이해하는 데 유용'하다고 한다.

 

이는 검색 엔진이 웹사이트의 주제(주요 주제)와 구조(주제 분류)를 이해하고, 전문성과 가치 있는 웹사이트로 판명하는 하나의 요소일 수 있다.

 

또한 '사이트 전반에서 특정 페이지가 어떤 역할을 하는지도 파악'한다고 하는 것과 같이 구글은 인터넷 사용자에게 '최고의 검색 결과'를 제공하기 위해 웹사이트 내에 '탐색 기능'을 필요로 한다.

 

이는 '구글 검색의 기본 작동 방식'을 알면 이해하기 쉬운데, 검색 엔진은 이미 크롤링된 페이지의 링크를 따라가서 신규 또는 업데이트된 페이지를 크롤링하고 각각의 페이지에 관한 정보를 분석하여 인터넷 사용자에게 가장 높은 품질의 검색 결과를 제공한다.

 

01-검색엔진-탐색기능

 

 

 

 

 

2] '탐색 경로'의 기본

 

너무 기본이 되어 버려서 모두 알고 있다고 생각되는 부분인데, 아래 구글에서 말하는 내용의 요지는 주제(페이지)를 분류하는 '카테고리' 또는 '메뉴'를 설정하라는 것이다.

 

티스토리에서 기본적으로 제공하고 있는 '카테고리'와 '메뉴' 기능을 적용하면 되겠다.

 

02-탐색계획-카테고리

 

 

 

그런데 '카테고리'와 '메뉴' 기능을 모두 적용하면 웹사이트 방문자에게는 보다 도움이 될 수 있으나, '검색 엔진 최적화(SEO)' 입장에서는 크롤링이나 스피드 등에서 웹사이트의 구조를 더 잘 이해하는 데에 좋지 않은 영향이 있을 수 있으니 '카테고리'와 '메뉴' 중 하나의 기능만 적용하는 것을 추천한다.

 

아래는 '루트 페이지(홈 페이지)' 내에 '관련 주제 목록'으로 '랭킹뉴스'와 '꿈해몽풀이'가 있고 '꿈해몽풀이'의 '특정 주제'로 태몽, 사람, 직업 등을 적용한 '카테고리'의 예시 이미지다.

 

03-카테고리-예시

 

 

 

또한 '카테고리' 또는 '메뉴'가 아니어도 웹사이트 방문자가 쉽게 탐색할 수 있게, 주요 페이지(글)들의 링크를 넣어 공지사항 같은 페이지(글)을 발행하는 것도 도움이 될 것이다.

 

참고로 '탐색 경로'의 이름은 웹사이트 방문자뿐만 아니라 검색 엔진이 더 잘 이해할 수 있도록 숫자나 기호가 아닌 문자로 하는 것이 좋으며, 동사나 형용사가 아닌 명사로 하는 것이 좋겠다.

 

04-탐색페이지

 

 

 

추가로 아래와 같은 '탐색 경로'가 있으면 웹사이트 방문자는 현재 자신이 방문한 페이지가 웹사이트 내에서 어느 주제(위치)에 해당하는지를 쉽게 확인할 수 있고 해당 주제의 다른 콘텐츠들도 쉽게 탐색할 수 있다.

 

05-탐색경로-목록

 

 

 

위의 '탐색 경로'를 만들려면 두 개 이상의 'ListItems'가 포함된 'BreadcrumbList'를 정의해야 한다.

 

06-탐색경로-브레드크럼

 

 

 

 

 

3] '브레드크럼(Breadcrumb)' 만들기

 

 

 

3-1] '브레드크럼(Breadcrumb)' 이란?

 

'브레드크럼(Breadcrumb)'은 '빵부스러기'라는 뜻인데, '그림 형제'의 동화인 '헨젤과 그레텔'에서 집을 찾아 돌아가기 위해 바닥에 '빵부스러기'를 놓았던 것에서 착안하여 '탐색 경로'의 코드 이름을 '브레드크럼(Breadcrumb)'으로 명명했다고 한다.

 

 

 

앞서 구글이 '사이트 전반에서 특정 페이지가 어떤 역할을 하는지도 파악'한다고 말했는데, 즉 웹사이트 내에 '탐색 기능'이 있으면 검색 엔진이 웹사이트의 구조를 더 잘 이해하여 아래 이미지의 '검색 결과 페이지(SERP)'와 같이 '탐색 경로'인 '브레드크럼(Breadcrumb)'도 같이 노출해 준다. (이는 구글이 인터넷 사용자 대상 '최고의 검색 결과' 제공의 일환)

 

07-검색결과페이지-브레드크럼
구글 관련 웹사이트의 경우 모두 '검색 결과 페이지(SERP)'에 '브레드크럼(Breadcrumb)'이 노출

 

 

'브레드크럼(Breadcrumb)'을 적용하는 것은 티스토리에서 기본 제공하지 않기 때문에 HTML과 CSS 작업이 필요하며 '북클럽 스킨'을 기준으로 하나하나 알아보겠다.

 

 

 

 

 

3-2] HTML 작업

 

아래의 '브레드크럼(Breadcrumb)' 코드를 <span class="category">티스토리/최적화</span> 위에 삽입한다.

 

 

여기서 중요한 것은 '브레드크럼(Breadcrumb)' 코드 내에 'category' 내용이 들어가기 때문에 <span class... </span> 코드는 삭제해야 하고 '사이트명'에는 자신의 티스토리 주소를 삽입하면 된다. (9행, 15행, 23행)

 

<!-- 제목 위 브레드크럼 시작 -->
<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="https://ID.tistory.com" 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="https://ID.tistory.com/category/%ED%8B%B0%EC%8A%A4%ED%86%A0%EB%A6%AC/%EC%B5%9C%EC%A0%81%ED%99%94">
<span itemprop="name">티스토리/최적화</span>
<meta itemprop="position" content="2">
</a> </li>

<li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem" class="bf-breadcrumb-item bf-breadcrumb-end">
<span itemprop="name">티스토리 카테고리 탐색경로 브레드크럼(breadcrumb)</span>
<meta itemprop="position" content="3">
<meta itemprop="item" content="https://ID.tistory.com/13">
</li> </ul>

</div> </nav>
<!-- 제목 위 브레드크럼 끝 -->

<span class="category">티스토리/최적화</span> // 이 줄은 삭제해야 합니다.

08-html-브레드크럼

 

 

 

 

 

3-3] CSS 작업

 

아래의 '브레드크럼(Breadcrumb)' 코드를 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;
    font-size: 0.875em;
    color: white;
}
.bf-breadcrumb .bf-breadcrumb-item:not(.bf-breadcrumb-end):after {
    display: inline-block;
    font-style: normal;
    font-weight: 400;
    line-height: 14px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: '\00BB';
    margin-left: 5px;
    margin-right: 5px;
    color: #c7c0c0;
    vertical-align: top;
}
.bf-breadcrumb .bf-breadcrumb-item a, .bf-breadcrumb .bf-breadcrumb-item span {
    color: #c7c0c0;
    display: inline-block;
}
li.bf-breadcrumb-item {
    display: inline-block;
}

09-css-브레드크럼

 

 

 

 

 

3-4] 적용 결과

 

HTML과 CSS 모두 적용하면 아래 이미지와 같이 제목 위에 '브레드크럼(Breadcrumb)'이 노출된다. (적용 전에는 '카테고리'에 해당하는 '꿈해몽풀이/식물'만 노출)

 

10-브레드크럼-적용결과

 

 

 

그런데 'Home > Category > Title'의 3단계를 적용하면 제목이 중복되기 때문에 나는 일부 수정한 아래 코드를 HTML에 삽입하여 'Home > Category'의 2단계만 적용했다.

 

<!-- 제목 위 브레드크럼 시작 -->
<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="2"> <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="https://ID.tistory.com" 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="https://ID.tistory.com/category/%ED%8B%B0%EC%8A%A4%ED%86%A0%EB%A6%AC/%EC%B5%9C%EC%A0%81%ED%99%94">
<span itemprop="name">티스토리/최적화</span> <meta itemprop="position" content="2"> </a> </li>

</ul> </div> </nav>
<!-- 제목 위 브레드크럼 끝 -->

<span class="category">티스토리/최적화</span> // 이 줄은 삭제해야 합니다.

11-브레드크럼-적용결과-변형

 

 

 

 

 

3-5] '구글 서치 콘솔' URL 검사

 

모든 작업이 완료된 후에 '구글 서치 콘솔(Search Console)'에서 'URL 검사'를 시행했다.

 

'실시간 테스트'로 검사한 결과 '개선사항' 부분에 '탐색경로' 항목이 새롭게 생성됐다. (기존에는 '모바일 사용 편의성'만 존재)

 

12-구글서치콘솔-탐색경로

 

 

 

 

 

 

 

 

 

 

지금까지 '탐색 경로'인 '브레드크럼(Breadcrumb)'에 대해 알아봤다.

 

색인 생성 전에라 '구글 검색 결과 페이지(SERP)'에는 아직 '브레드크럼(Breadcrumb)이 노출되지 않으나 '구글 서치 콘솔(Search Console)'에 반영되었으니 이제 기다리기만 하면 된다.

 

 

 

참고로 '브레드크럼(Breadcrumb)'은 네이버 검색 결과 페이지에는 적용되지 않는다.

 

그리고 '브레드크럼(Breadcrumb)'을 적용하면 '구글 서치 콘솔(Search Console)'에서 나타나는 'itemListElement 입력란이 누락되었습니다' 관련 오류도 해결된다.

 

 

 

 

 

728x90
반응형
저작자표시 비영리 변경금지

관련글

티스토리툴바