티스토리 이동경로·카테고리 경로(Breadcrumb navigation) 적용

브레드크럼은 무엇일까?

빵 부스러기 '브레드크럼(이동경로)'를 표시하게 되면 SEO에 도움이 된다고 하는데 일단 브레드크럼을 추가하고나면 구글 서치 콘솔에서 'itemListElement' 입력란이 누락되었습니다'와 같은 오류가 발생하지 않는다.

 

로봇에게 사이트를 훨씬 구조적으로 인식하게 만들어 주고 방문자에게 쉽게 이전카테고리로 이동할 수 있게 해준다. 오디세이 스킨에서도 브레드크럼을 표시할 수있다. 카테고리 리스트 또는 게시글 본문에도 적용시킬 수 있다.

 

이는 로봇도 마찬가지로, 수집로봇이 사이트를 방문했을 때, 사이트를 훨씬 더 잘수집할 수 있고 구조적으로 높은 점수를 주기 때문에 SEO 점수도 올라가는 효과를 볼 수 있다.

 

---

오디세이 스킨에 적용하기

「꾸미기」 메뉴에 있는 스킨 편집을 선택하면 html 편집 버튼을 눌러보면 HTML과 CSS를 편집하고 파일업로드가능한 화면이 나온다. HTML 탭을 선택하고 아래 코드를 원하는 부분에 브레드크럼을 넣도록 하자.

<div class="inner-header">
<div class="box-meta">
<!-- 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="[블로그주소]" 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="[블로그주소]"><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="[블로그주소]"></li></ul>
</div></nav><!-- breadcrumb end -->
<h1 class="title-article"></h2>
<div class="box-info">
<span class="writer"></span>
<span class="date"></span>
</div>
</div>
</div>

 

해당 티스토리 블로그에서 브레드크럼을 제목 위에 표시되도록 했다. 카테고리 부분을 브레드크럼으로 교체하고 싶다면 아래 코드를 위 코드로 교체 해주면 되고 블로그 주소를 본인의 티스토리 블로그 주소로 변경하자.

 

<p class="category"></p>

 

이제 CSS 탭으로 가서 마지막줄에 아래 CSS 코드를 추가하자.

 

/* 오디세이 스킨 브레드크럼 */
.bf-breadcrumb .bf-breadcrumb-items {
padding: 0;
margin: 0;
list-style: none;
}

.container.bf-breadcrumb-container {
background-color: #9e9e9efa;
padding: 3px 10px 5px 10px;
border-radius: 4px;
}

.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: #fafafa;
vertical-align: top;
}

.bf-breadcrumb .bf-breadcrumb-item a, .bf-breadcrumb .bf-breadcrumb-item span {
color: #fff;
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 스타일은 본인의 블로그 스타일에 맞게 글자색 또는 글자 배경등을 변경하면 된다.