본문으로 바로가기
  1. Home
  2. IT & 기타/티스토리
  3. 티스토리 고래 스킨에 브레드크럼 표시하는 방법 (SEO 향상)

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

· 댓글 16 · 워드프레스, 웹호스팅 정보를 제공하는 블로그 Avada

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

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

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

 

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

브레드크럼(Breadcrubmb; 이동 경로)을 추가하면 SEO(검색엔진 최적화)에 도움이 될 수 있습니다. 지난 달에 이 티스토리 블로그의 스킨을 Magazine으로 변경했습니다. 티스토리의 신규 스킨 Magazine으로

avada.tistory.com

고래 스킨을 사용하는 경우 아래를 참고해보세요. (고래 스킨 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' 입력란이 누락되었습니다 오류

티스토리에서 ‘itemListElement’ 입력란이 누락되었습니다 오류가 발생하는 경우가 있습니다. 이 문제는 카테고리에 글이 없을 때 발생한다고 알려져 있습니다. 저는 테스트용 티스토리 블로그에

avada.tistory.com

 

SNS 공유하기
최근 글
30분전
추천하는 글
30분전
💬 댓글 16

이름을 저장합니다.

가성비가 뛰어난 웹호스팅

저렴하고 가성비 좋은 웹호스팅

이런 공지가 있었군요 알아 갑니다

💬空空(공공)

멋진 하루 되시기바랍니다. 잘보고갑니다

💬해피스타일75

관련 오류가 있으신 분들은 참고가 되겠습니다

💬空空(공공)

저는 애드센스 광고를 없애는 것도 고려하고 있습니다. ⋯

💬워드프레스, 웹호스팅 정보를 제공하는 블로그 Avada

진짜 이제는 이사 준비 해야될것 같은데 문제는 이게 1⋯

💬Sakai

워드프레스 시작 가이드

워드프레스 시작하기
이모티콘창 닫기
울음
안녕
감사해요
당황
피폐

이모티콘을 클릭하면 댓글창에 입력됩니다.

프리미엄 테마 그래픽 동영상 템플릿 무료 다운로드