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

브레드크럼(Breadcrubmb; 이동 경로)을 추가하면 SEO(검색엔진 최적화)에 도움이 될 수 있습니다. 그리고 구글 서치 콘솔에서 'itemListElement' 입력란이 누락되었습니다 오류가 발생하는 경우에도 브레드크럼을 적용하면 오류가 해결될 수 있습니다.

브레드크럼과 SEO

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

• 티스토리의 신규 스킨 Magazine으로 변경해보았습니다

※자동으로 브레드크럼을 추가하는 방법은 티스토리 블로그의 모든 글에 자동으로 목차 표시하는 방법을 참고해보세요.

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

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

구글 서치콘솔에서 브레드크럼 관련 오류가 발생하는 경우 이 방법으로 브레드크럼(Bredacrumb)을 추가하면 오류가 사라질 수 있습니다. 아래에서는 매거진 스킨과 북클럽 스킨, 왓에버 스킨, 그리고 #1 스킨에 적용하는 방법이 설명되어 있습니다. 아래의 내용을 응용하여 다른 스킨에도 브레드크럼을 추가할 수 있습니다.

먼저 동영상을 통해 브레드크럼 코드를 추가하는 방법을 살펴보시기 바랍니다.

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

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

다음은 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://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>

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

[참고*티스트리 시스템이 업데이트되면서 치환자를 실제 값으로 변환하여 표시하는 버그가 발생하고 있습니다. 위의 코드에서 ## 앞뒤의 공백은 삭제해주세요.*]

CSS에 다음과 같은 CSS 코드 스니펫을 추가합니다. 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를 수정하도록 합니다.

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

북클럽 (Book Club) 스킨에서도 기본적으로 동일한 코드를 사용할 수 있습니다.

꾸미기 > 스킨 편집 > html 편집 > HTML 탭에서 다음 라인을 찾습니다.

<span class="category">IT & 기타/티스토리</span>
<h1>티스토리 Magazine 스킨에 브레드크럼을 추가하는 방법</h1>

위의 라인이 한 군데 있습니다.

브레드크럼을 어디에 위치시키는가에 따라 브레드크럼 코드 위치가 달라집니다. 타이틀 아래에 위치시키려면 <h1>티스토리 Magazine 스킨에 브레드크럼을 추가하는 방법</h1> 바로 아래에 위에 제시된 HTML 코드를 추가합니다.

만약 타이틀 위의 카테고리 대신 브레드크럼을 표시하려면, <span class="category">IT & 기타/티스토리</span> 라인을 삭제하고 위에 제시된 브레드크럼 코드로 대체합니다.

그런 다음 CSS 탭으로 이동하여 맨 아래에 위에 제시된 CSS 코드를 추가합니다. 그리고 다음 CSS 코드 스니펫을 추가로 입력하면 브레드크럼이 가운데 정렬됩니다.

nav.bf-breadcrumb {
    text-align: center;
    margin-top: 5px !important;
}

CSS에서 컬러값, 숫자 등은 적절히 변경하시기 바랍니다. 위와 같이 입력하면 다음과 같이 브레드크럼이 표시됩니다.

CSS 컬러 색상값은 https://www.w3schools.com/colors/colors_picker.asp 문서를 참고해보세요.

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

#1 스킨의 경우 카테고리 부분을 브레드크럼으로 대체할 수 있습니다. <strong class="tit_category"><a href="/category/IT%20%26%20%EA%B8%B0%ED%83%80/%ED%8B%B0%EC%8A%A4%ED%86%A0%EB%A6%AC">IT & 기타/티스토리</a></strong> 부분을 찾도록 합니다. 약 220번째 라인에 있습니다. 여러 개 검색되면 맨 아래에 있는 것에서 먼저 테스트해보세요.

카테고리를 표시하는 코드 라인을 위에 제시된 브레드크럼 코드로 대체합니다.

그런 다음 CSS 탭의 맨 아래에 티스토리 매거진 스킨에 브레드크럼을 추가하는 방법에 제시된 CSS 코드 스니펫을 추가합니다. 그러면 다음과 같이 카테고리 부분이 브레드크럼으로 바뀝니다.

티스토리 Whatever 스킨에 브레드크럼 추가하기

왓에버(Whatever) 스킨에도 비슷한 방법으로 브레드크럼을 적용할 수 있습니다. 

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

<div class="category">IT & 기타/티스토리</div>
<h1>티스토리 Magazine 스킨에 브레드크럼을 추가하는 방법 </h1>

이 라인에서 <div class="category">IT & 기타/티스토리</div> 부분을 "티스토리 매거진 스킨에 브레드크럼을 추가하는 방법"에 제시된 브레드크럼 HTML 코드로 대체합니다. 위와 같은 라인이 여러 군데 있다면 맨 아래에 있는 라인을 찾도록 합니다(약 218번 라인).

그리고 "티스토리 매거진 스킨에 브레드크럼을 추가하는 방법"에 제시된 동일한 CSS 코드를 CSS 탭의 맨 아래에 추가하도록 합니다.

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

이 글을 작성한 후에 이 블로그의 스킨을 고래 스킨으로 변경했습니다. 고래스킨에 이동경로를 추가하는 방법은 다음 글을 참고해보세요.

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

추가: 오디세이 스킨에 브레드크럼 적용하기

오디세이 스킨을 사용하는 경우 다음 글을 참고해보세요.

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

티스토리에서 HTML/CSS 코드 추가하는 방법

티스토리 블로그에서 HTML / CSS 코드를 추가하려면 꾸미기 > 스킨편집 > html편집 > HTML 탭  또는 CSS 탭을 클릭하여 추가하도록 하도록 합니다.

티스토리 블로그에 CSS 코드 추가하기

※파트너스 활동으로 일정액의 수수료를 제공받을 수 있습니다.

참고:

• SEO(검색엔진최적화)에 유리한 웹사이트 메뉴 구조
• 티스토리 블로그의 모든 글에 자동으로 목차 표시하기
• 티스토리 포트폴리오 스킨 (Portfolio 스킨)에 브레드크럼 추가하기