티스토리 블로그 브레드크럼(breadcrumbs) 추가하는 방법

SEO 최적화 방법 중 하나인 브레드크럼(breadcrumbs)은 사이트나 앱에서 사용자에 현재 어디에 위치하고 있는지를 보여주는 2차적 내비게이션입니다. 티스토리 블로그 브레드크럼을 설치하여 SEO 최적화에 어떤 장점들이 있는지 다뤄보겠습니다.

 

내부링크 SEO 영향 및 효과적인 내부링크 사용법

 

 

브레드크럼 구조는 검색 엔진에게 구조화된 데이터를 통해 크롤러가 디렉토리 구조를 쉽게 인식할 수 있도록 도와주며, 사용자에게도 쉽게 자신의 위치를 알 수 있고 쉬운 구조의 경험을 주기 때문에 내부적으로 표시되도록 하는 것이 SEO 최적화에 도움이 됩니다.

 

또한 블로그 작성 후 검색엔진에 색인 요청을 하게 되면 구조화된 탐색경로가 감지되어 검색엔진 최적화에도 도움이 되는 것입니다.

• SEO 구글 상위노출 검색엔진 최적화 중요한 포인트

 

검색엔진 최적화에 어떤 변경이?

 

일반적으로 SEO 최적화를 위해서 구글 검색엔진을 기준으로 두고 맞추게 되는데요. 신규 페이지나 기존 페이지를 수정하게 되면 검색엔진 색인을 요청하게 됩니다. 변경되는 사항은 아래와 같습니다.

웹페이지 구조를 명확하게 전달

브레드크럼이 검색 엔진에서 감지되고 탐색 경로 구조로 표시되면 여러 가지 유용한 장점이 있는데 그중 하나는 브레드크럼은 웹페이지의 구조를 명확하게 전달하고 사용자 경험을 향상시켜 SEO 요소 중 하나로 인식된다는 것입니다.

 

브레드크럼을 활용하면 방문한 사용자가 사이트 내에서 위치를 빠르게 이해할 수 있고, 검색 결과 페이지(SERP)에서 브레드크럼이 표시되면 사용자는 클릭 전에 해당 웹페이지가 어디에 속해 있는지 명확히 파악할 수 있습니다.

 

사용자의 검색 의도에 더 적합한 결과를 찾도록 도와주는 역할을 하기 때문에 신뢰성과 만족도에 기여하는 것입니다.

 

또한, 브레드크럼은 웹페이지의 구조를 검색 엔진에게 명확하게 전달하는데 도움을 줍니다. 검색 엔진은 구조화된 데이터를 활용하여 웹페이지를 더 정확하게 이해하고 색인할 수 있으며,검색 엔진 최적화를 통해 검색 결과의 품질을 향상시키게 됩니다.

접근성 향상

SEO 관점에서 브레드크럼은 웹페이지의 중요한 키워드를 구조화된 형태로 제공함으로써 키워드의 의미와 연관성을 강조할 수 있는 장점이 있습니다. 또한 브레드크럼 각각의 항목은 태그 내에 포함되어 있어 검색 엔진은 이를 더 강조할 수 있습니다.

 

브레드크럼은 웹페이지의 깊은 뎁스(depth)에 있는 내용에 대한 접근성을 향상시킬 수 있으며, 사용자는 브레드크럼을 통해 웹사이트의 다양한 디렉토리 및 섹션으로 쉽게 이동이 가능해 사용자가 원하는 정보에 빠르게 접근할 수 있게 됩니다.

 

종합적으로 본다면 검색 엔진에 브레드크럼이 감지되면 사용자 경험과 검색 엔진 최적화를 동시에 강화하여 웹페이지의 가시성을 향상시키는 효과적인 방법이라고 할 수 있습니다.

구글 서치콘솔에서 감지된 탐색경로 구조

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

 

 

티스토리 브레드크럼(breadcrumbs) 추가 방법

티스토리에 추가하기 위해서는 HTML 편집창에 직접 태그를 추가해야 합니다. 블로그의 경우는 디렉토리가 일반적으로 깊은 뎁스를 가지고 있지 않아 HOME > 카테고리 명 > 글의 제목 또는 제목이 이미 노출되고 있기 때문에 HOME > 카테고리 명으로 표시하면 됩니다.

1. 브레드크럼 HTML 편집창에 추가하기

우선 티스토리 스킨별로 표시가 되는 부분이 다를 수 있습니다. 위 이미지를 보면 원래 카테고리명이 표시되는 곳에 기존의 카테고리 노출명을 지우고 구조화된 브레드크럼을 추가하는 방식입니다.

 

북클럽 스킨으로 기준잡는다면 기존 카테고리명이 표시되는 영역은 <span class="category"> 영역에 유용한 정보/SEO, ADSENSE, BLOG 치환자로 표시가 됩니다.

1. 북클럽 스킨 HTML 편집창을 연다.
2. 편집창에 커서를 누른 후 CTRL+F를 눌러 <span class="category">를 검색한다.
3. 검색된 태그 바로 윗칸에 아래 HTML 소스를 붙여넣기 한다.
4. 붙여놓은 소스에 티스토리 주소에는 본인 블로그의 주소로 수정 기입한다.
5. <span class="category"> 유용한 정보/SEO, ADSENSE, BLOG</span> 을 주석처리 또는 삭제한다.
6. 적용을 누른다.

1-1. 브레드크럼 HTML 소스

드래그 후 복사 가능합니다.

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

        <!-- 본인의 티스토리 주소는 https://XXXX.tistory.com 으로 입력 -->
        <li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem" class="breadcrumb-item breadcrumb-begin">
            <a itemprop="item" href="본인의 티스토리 URL" rel="home">
                <span itemprop="name">Home</span>
                <meta itemprop="position" content="1">
            </a>
        </li>

        <li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem" class="breadcrumb-item">
            <a itemprop="item" href="본인의 티스토리 URL/category/[한글삭제##_article_rep_category_##]">
                <span itemprop="name">[한글삭제##_article_rep_category_##]</span>
                <meta itemprop="position" content="2">
            </a>
        </li>
    </ul>
</div>
</nav>
<!-- 브레드크럼 끝 -->

<!-- 기존의 카테고리 출력 태그는 주석처리 또는 삭제 -->
<!-- <span class="category">[한글삭제##_article_rep_category_##]</span> -->

 

1-2. 붙여넣기 후 유의사항

HTML 소스를 보면 [한글삭제##_article_rep_category_##]으로 되어 있는 곳들이 있습니다. 이 부분에서 한글삭제 문구만 지워주셔야 합니다. 대괄호로 감싼 ##_article_rep_category_##은 치환자로 본인 계정의 카테고리를 불러오는 기능을 합니다.

 

예를 들면 이렇습니다, 대괄호로 감싼 ##_article_rep_category_## 치환자를 그냥 쓰게 되면 유용한 정보/SEO, ADSENSE, BLOG ← 처럼 제 블로그 글이 속해있는 카테고리로 출력됩니다. HTML 소스에서도 마찬가지로 치환되어 나오기 때문에 이를 방지하고자 한글삭제 문구를 추가해놓은 것입니다.

 

2. 브레드크럼 CSS 편집창에 추가하기

아래 CSS는 흰색 글자로 적용이 되어있습니다. 글자 색상은 블로그에 맞게 color 스타일을 수정하시면 됩니다.

1. 북글럽 스킨 CSS 편집창을 연다.
2. 편집창 편한 곳에 아래 CSS 소스를 붙여넣기 한다.
3. 적용을 누르고 본인 블로그에 잘 표시 되는지 확인한다.

2-1. 브레드크럼 CSS 소스

드래그 후 복사 가능합니다.

/* 브레드크럼 스타일 */
.breadcrumb-navigation.top-breadcrumb {
    margin: 0 0 14px 0;
}
.breadcrumb-navigation .breadcrumb-list {
    display: block;
    max-width: 1080px;
    margin: 0 auto 13px;
    font-size: 0.875em;
    color: white;
}
.breadcrumb-navigation .breadcrumb-item:not(.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: #e9e9e9;
    vertical-align: top;
}
.breadcrumb-navigation .breadcrumb-item a, .breadcrumb-navigation .breadcrumb-item span {
    color: #ffffff;
    display: inline-block;
}
.breadcrumb-item {
    display: inline-block;
}

 

정상적으로 적용이 되었다면 HOME > 카테고리 명 >으로 표시가 되며 HOME, 카테고리에 하이퍼링크가 적용됩니다.

 

구글 서치콘솔 탐색경로 구조 감지 확인하기

구글 서치콘솔에서 이미 색인된 페이지로 확인하는 방법입니다. 아직 색인된 페이지가 없다면 블로그 주소를 수동으로 추가해도 확인이 가능합니다.

1. 구글 서치콘솔에 접속하여 ①페이지 → ②색인이 생성된 페이지에 대한 데이터 보기 클릭
2. 색인된 URL 리스트의 우측 돋보기 아이콘을 눌러 색인정보를 불러옴
3. URL 검사 페이지가 뜨면 우측 상단의 실제 URL 테스트를 클릭
4. 검사가 완료된 후, 개선사항과 환경 섹션에 탐색경로 유효한 항목 1개 감지됨이 나오면 완료

아래 이미지를 참고하여 확인해보세요

 

검색엔진에 블로그 등록을 하지 않았다면?

서치 콘솔에 아직 블로그를 등록하지 않으셨다면, 아래 링크에 자세하게 작성되어 있으니 꼭 등록하셔서 구글 검색엔진에도 본인의 콘텐츠를 노출하시기 바랍니다.

• 구글 서치 콘솔에 내 블로그 등록하기
• 애드센스 신청 방법 - 처음부터 자세히 따라해보기

 

이밖에도 SEO를 평가하는 많은 요소가 있습니다. 유튜브에 구글 SEO 최척화 방법에 대해 좋은 영상이 있어 아래에 남기니 꼭 시청해 보시기 바랍니다.

구글 SEO 최적화하는 3가지 방법