티스토리 고래 스킨에 브레드크럼 표시하는 방법 (SEO 향상)

티스토리 고래 스킨에 브레드크럼을 표시하려는 경우 참고해보세요. 브레드크럼(Breadcrumb)은 빵부스러기라는 의미로 헨젤과 그레텔에서 유래한 용어로 웹사이트에서 이동 경로를 표시하여 SEO 개선에 도움이 됩니다.

티스토리 고래 스킨에 브레드크럼 표시하기

이전 글에서 매거진 스킨에 브레드크럼을 표시하는 방법을 설명한 적이 있습니다. 스킨이 달라져도 브레드크럼을 추가하는 방법은 비슷합니다. 원리만 이해하면 다른 스킨에서도 쉽게 가능할 것입니다.

티스토리 Magazine 스킨에 브레드크럼을 추가하는 방법

고래 스킨을 사용하는 경우 아래를 참고해보세요. (고래 스킨 4.0 기준)

티스토리에 로그인한 후 꾸미기 > 스킨 편집 > HTML 편집 > HTML 탭으로 이동합니다.

Ctrl+F5를 눌러 다음 라인을 찾습니다.

<h1 class="hd-heading lts-narrow p-name" role="heading">

위와 같은 라인이 두 개가 검색될 것입니다. 첫 번째가 아닌 두 번째로 검색되는 곳으로 이동합니다. 위의 라인 바로 위에 아래 라인들을 추가합니다.

					<!-- breadcrumb --><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://avada.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://avada.tistory.com"><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"></span><meta itemprop="position" content="3"><meta itemprop="item" content="https://avada.tistory.com"></li></ul>
											</div></nav><!-- breadcrumb end -->

위에서 avada.tistory.com 부분은 해당 티스토리 블로그 주소로 교체해주세요.

이제 CSS 탭을 클릭하여 맨 아래에 다음 CSS 코드를 추가하시기 바랍니다.

/* 고래 스킨 브레드크럼 */
.bf-breadcrumb.bc-top-style {
    margin: 0 0 -15px 0;
}


.bf-breadcrumb .bf-breadcrumb-items {
    padding: 0;
    margin: 0;
    list-style: none;
}

.bf-breadcrumb .bf-breadcrumb-item:not(.bf-breadcrumb-end):after {
    display: inline-block;
    font-style: normal;
    font-weight: 400;
    font-size: 15px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: '\00BB';
    margin-left: 5px;
    margin-right: 5px;
    color: #ccc;
    vertical-align: top;
}

.bf-breadcrumb .bf-breadcrumb-item a, .bf-breadcrumb .bf-breadcrumb-item span {
    color: #ccc;
    display: inline-block;
}

li.bf-breadcrumb-item {
    display: inline-block;
}

#container nav.bf-breadcrumb {
    border-top: none;
    border-bottom: none;
}

nav.bf-breadcrumb.clearfix.bc-top-style span {
    font-size: 13px;
}

이제 저장하고 블로그 글을 살펴보면 다음 그림과 같이 브레드크럼(이동경로)이 표시될 것입니다.

CSS 코드를 적절히 수정하여 원하는 대로 바꾸시기 바랍니다.

브레드크럼 적용 시 구글 검색 노출

브레드크럼을 적용하면 구글 검색엔진에 글이 노출될 때 이동 경로가 함께 표시됩니다.

위의 그림과 같이 카테고리가 함께 노출되므로 사용자들이 어떤 분야의 글인지를 알 수 있도록 합니다. 네이버에서는 브레드크럼이 표시되지 않습니다.

마치며

이상으로 티스토리 스킨 중 하나인 고래 스킨에서 브레드크럼을 표시하는 방법에 대해 살펴보았습니다. 일부 유료 스킨에는 브레드크럼을 표시하는 기능이 탑재되는 것 같습니다. 몇 년 전에 티스토리 스킨에 브레드크럼을 추가하려고 검색해보았지만 방법이 없어서 당시 사용했던 워드프레스 테마를 참고하여 브레드크럼을 직접 넣었습니다. 그 소스가 위에 있는 것과 동일합니다.

브레드크럼을 추가하면 구글 서치 콘솔에서 ‘itemListElement’ 입력란이 누락되었습니다 오류가 발생하지 않는 것 같습니다.

티스토리 'itemListElement' 입력란이 누락되었습니다 오류