본문 바로가기

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

2019.05.12 댓글 2

브레드크럼(Breadcrubmb; 이동 경로)을 추가하면 SEO(검색엔진 최적화)에 도움이 될 수 있습니다.

지난 달에 이 티스토리 블로그의 스킨을 Magazine으로 변경했습니다.

스킨을 바꾸면서 개별 글에 그림과 같이 브레드크럼(이동 경로)을 추가했습니다.

티스토리 브레드크럼

구글 검색에서 아래 그림과 같이 이동 경로가 표시됩니다.

티스토리 브레드크럼

티스토리 블로그에서 브레드크럼이 지원되지 않지만, 저는 워드프레스 테마에 사용되는 브레드크럼 소스를 티스토리에 맞게 수정했습니다.

다음은 Magazine 스킨에서 브레드크럼을 적용하는 방법입니다. 다른 스킨에서도 비슷하게 응용이 가능합니다.

스킨 편집 화면에서 다음 라인을 찾습니다.

<div class="box_article_tit">

이 라인 아래에 다음과 같은 형식으로 브레드크럼 소스를 추가합니다.

<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://yourid.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://yourid.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://yourid.tistory.com[##_article_rep_link_##]"></li></ul>
</div></nav>

yourid.tistory.com은 적절히 바꾸어주세요.

CSS에 다음과 같이 추가합니다.

.bf-breadcrumb.bc-top-style {
    margin: 0 0 14px 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;
    line-height: 22px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: '\00BB';
    margin-left: 5px;
    margin-right: 5px;
    color: #929292;
    vertical-align: top;
}
.bf-breadcrumb .bf-breadcrumb-item a, .bf-breadcrumb .bf-breadcrumb-item span {
    color: #9e9e9e;
    display: inline-block;
}
li.bf-breadcrumb-item {
    display: inline-block;
}

이제 브레드크럼이 잘 표시되는지 확인합니다. 원하는 경우 CSS를 수정하도록 합니다.

참고:


※일부 글에 제휴 링크가 포함될 수 있습니다.

댓글2