티스토리 오디세이 스킨에 브레드크럼 표시하기

브레드크럼(이동 경로)을 표시하면 SEO에 도움이 됩니다. 그리고 브레드크럼을 추가하면 구글 서치 콘솔에서 ‘itemListElement’ 입력란이 누락되었습니다와 같은 오류가 발생하지 않는 것 같습니다. 이 블로그에서 고래 스킨과 매거진 스킨에 브레드크럼을 표시하는 방법을 설명한 적이 있습니다. 티스토리 오디세이 (Odyssey) 스킨에서 브레드크럼을 표시하는 방법에 대한 문의가 있어서 이 글에서는 오디세이 스킨에 Breadcrumb을 추가하는 방법에 대해 간단히 정리해보았습니다.

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

방법은 이전 글에서 설명했던 것과 거의 동일합니다. 

티스토리 오디세이 스킨에 브레드크럼 표시하기

오디세이 (Odyssey)는 살펴보니 작년 9월에 공개된 스킨이네요. 티스토리에서 공개한 스킨 중에서 가장 최신 스킨이라 할 수 있습니다.

오디세이 스킨

스킨이 깔끔하고 디자인적인 측면에서 괜찮아 보이네요.

스킨에 브레드크럼을 추가하려면 먼저 꾸미기 > 스킨 편집을 클릭합니다.

html 편집을 클릭합니다.

그러면 HTML 파일과 CSS를 편집할 수 있는 화면이 표시됩니다.

HTML 탭에서 아래 코드 부분을 찾도록 합니다.

<div class="inner-header">
                      <div class="box-meta">
                        <p class="category">[ ##_article_rep_category_## ]</p>
                        <h2 class="title-article">[ ##_article_rep_title_## ]</h2>
                        <div class="box-info">
                          <span class="writer">[ ##_article_rep_author_## ]</span>
                          <span class="date">[ ##_article_rep_date_## ]</span>
                        </div>
                      </div>
                    </div>

위의 코드 부분에서 카테고리 표시 부분을 브레드크럼으로 바꾸어보도록 하겠습니다. 위의 코드 부분을 아래의 코드로 대체하시기 바랍니다.

          <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="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[ ##_article_rep_category_link_## ]"><span itemprop="name">[ ##_article_rep_category_## ]</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">[ ##_article_rep_title_## ]</span><meta itemprop="position" content="3"><meta itemprop="item" content="https://avada.tistory.com[ ##_article_rep_link_## ]"></li></ul>
</div></nav><!-- breadcrumb end -->												
                        <h1 class="title-article">[ ##_article_rep_title_## ]</h2>
                        <div class="box-info">
                          <span class="writer">[ ##_article_rep_author_## ]</span>
                          <span class="date">[ ##_article_rep_date_## ]</span>
                        </div>
                      </div>
                    </div>

위에서 블로그 주소는 해당 블로그 주소로 변경해야 합니다. 

[참고*티스토리가 업데이트되면서 코드로 추가된 치환자가 실제 값으로 바뀌는 버그가 발생하고 있네요. 위의 코드에서 ## 앞뒤에 있는 공백은 삭제하여 추가해주세요.*]

참고로 포스트 제목은 h1 태그를 사용하는 일반적입니다. 오디세이 스킨에서는 이상하게 글 제목 부분이 h2 태그로 되어 있네요. 왜 h2 태그로 되어 있는지 이해가 되지 않네요. 위에서 h1 태그로 바꾸었습니다. H1 태그는 한 문서에서 하나만 있어야 한다고 합니다. 일반적으로 포스트 제목에는 H1 태그가 적용됩니다.

그리고 CSS 탭을 클릭합니다.

맨 아래에 다음 CSS 코드를 추가합니다.

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

.container.bf-breadcrumb-container {
    background-color: #9e9e9e7a;
    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: #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 스타일은 적절히 변경하도록 합니다. 위와 같은 코드를 넣으면 다음과 같이 카테고리가 표시될 부분에 브레드크럼이 표시됩니다.

카테고리도 표시하게 하려면 IT & 기타/티스토리 치환자를 적절한 곳에 추가하고 CSS로 조정하시면 됩니다.

참고

avada.tistory.com/1784

티스토리 블로그의 모든 글에 자동으로 목차 표시하는 방법

avada.tistory.com/1789

티스토리 블로그 고래 3.4 스킨에 목차 자동 생성하는 방법

avada.tistory.com/1828

티스토리 스킨 고래 스킨 4.0으로 변경