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

2019. 5. 12. 06:27 | 댓글 40

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

지난 달에 이 티스토리 블로그의 스킨을 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://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에 다음과 같은 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">[##_article_rep_category_##]</span>
<h1>[##_article_rep_title_##]</h1>

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

브레드크럼을 어디에 위치시키는가에 따라 브레드크럼 코드 위치가 달라집니다. 타이틀 아래에 위치시키려면 <h1>[##_article_rep_title_##]</h1> 바로 아래에 위에 제시된 HTML 코드를 추가합니다.

티스토리 Book Club 스킨 브레드크럼

만약 타이틀 위의 카테고리 대신 브레드크럼을 표시하려면, <span class="category">[##_article_rep_category_##]</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="[##_article_rep_category_link_##]">[##_article_rep_category_##]</a></strong> 부분을 찾도록 합니다. 약 220번째 라인에 있습니다. 여러 개 검색되면 맨 아래에 있는 것에서 먼저 테스트해보세요.

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

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

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

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

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

<div class="category">[##_article_rep_category_##]</div>
<h1>[##_article_rep_title_##] </h1>

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

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


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

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

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

참고:


  • 네이버 블러그 공유하기
  • 네이버 밴드에 공유하기
  • 페이스북 공유하기
  • 트위터 공유하기
  • 카카오스토리 공유하기

댓글을 달아 주세요

">
  1. thumbnail
    잉여토기

    이렇게 소스를 만져 브레드크롬을 넣어 검색엔진 최적화를 이룰 수 있군요.
    이런 방법으로 더 많은 방문자가 방문할 수 있겠어요.

  2. thumbnail
    Charlie253

    안녕하세요.
    구글 서치콘솔에서 제 블로그에 '브레드크럼'오류가 떴다고 해서 알아보다가, 작성해주신 포스팅을 보고 제 블로그에 브레드크럼을 추가하였습니다. 덕분에 오류도 사라지고 뭔가 좀 더 검색엔진에 친화적인 블로그가 된 것 같아서 기쁩니다. 도움주셔서 대단히 감사합니다.
    혹시 실례가 안된다면, Avada님께서 공유하신 코드를 활용하여 브레드크럼을 삽입한 내용으로 포스팅을 하나 올려도 괜찮을까요?

    • thumbnail
      홈페이지 제작, 워드프레스, 웹호스팅 정보를 제공하는 블로그 Avada
      2020.06.01 15:15 신고

      안녕하세요?

      이 글이 도움이 되셨기를 바랍니다.

      네. 이 코드를 활용하여 브레드크럼을 적용한 방법에 대한 글을 작성하셔도 됩니다.

      제 블로그는 기술적인 내용이 많아서 생각보다 방문자 수가 적네요. 제 블로그 홍보도 부탁드립니다.ㅎㅎ

      즐거운 시간 보내세요.

      (참고로 글을 작성할 때 소제목을 사용하고 목차를 자동 생성하면 SEO에 도움이 됩니다. 이 글의 맨 아래에 관련 링크를 추가했으니 참고해보세요.)

  3. thumbnail
    Charlie253

    허락해주셔서 감사합니다 :D
    포스팅을 작성하였는데, 많이 부족하지만 한번 방문하셔서 좋아요를 눌러주시면 감사하겠습니다 ㅎㅎ
    https://tog2001.tistory.com/67

  4. thumbnail
    윈터 원더

    좋은 정보 감사합니다. 구독하고 갑니다.

  5. thumbnail
    열매맺는나무

    고래스킨에서는 어떻게 하셨나요?
    제가 잘 못봤는지, <div class="box_article_tit">가 안 보여서요.

  6. thumbnail
    thegrace

    북클럽 스킨을 사용하는데요, 처음에 avada님의 블로그에서 보고 따라하다가, 북클럽에서는 어디에 적용을 해야하는지를 몰라서, 다른 분(찰리253님)의 블로그에서 따라했는데, 검색을 해보니 적용이 안되네요. 코드는 여러번 확인했는데 틀린 곳은 없고, 제 주소를 정확히 기입을 했고, 넣어라는 곳에 적용을 시켰는데, 구글에서 확인을 해 보니 전혀 변화가 없어요. ㅠㅠ 혹시 북클럽 스킨에 적용하는 방식이나 코드가 다른게 있을 까요?

    현재 브레드크럼 이슈가 있다고 해서 방법을 찾고 있습니다.

  7. thumbnail
    ◀↗↓↖▶바인

    안녕하세요.
    브레드크럼이란것을 알게 되어서 기쁘네요.
    적용해 봤습니다.
    그런데 스킨마다 css적용이 조금씩 다른건지 가로로 나오지 않고 줄바꿈이 되어 버리네요.
    https://buza.co.kr/39
    한번 봐주세요.

    스킨은 #1 기본 스킨 입니다.
    감사합니다.

    추가질문)
    마지막에 제목을 노출 하던데요.
    빼도 될까요?
    링크는 home >> 카테고리 까지만 있던데 마지막 제목은 노출할 필요가 있을까요? 어차피 제목근처에 브레드크럼을 노출할거라서요...^^

    • thumbnail
      홈페이지 제작, 워드프레스, 웹호스팅 정보를 제공하는 블로그 Avada
      2020.07.23 07:55 신고

      안녕하세요?

      댓글이 여러 개라서 조금 헷갈렸습니다. #1 스킨에 브레드크럼을 추가하는 방법을 위에 추가했습니다. CSS 코드 스니펫만 CSS 탭의 맨 아래에 추가하시면 제대로 표시될 것입니다.

      제목을 빼도 괜찮은지에 대해서는 구글을 한 번 검색해보시겠어요?

      참고로 유명한 워드프레스 SEO 플러그인을 만드는 Yoast SEO라는 업체의 블로그에는 타이틀이 포함되어 있네요.

      참고 스크린샷: https://www.screencast.com/t/tajNnZSeFY

  8. thumbnail
    thegrace

    'css에 추가 하라는 스니펫'이라는 것은 정확히 어느 위치에 넣는 건가요? 어제 css 코드에 넣었다고 뒤죽받죽이 되었어요.

  9. thumbnail
    thegrace

    위드 프레스님 저 또 왔습니다. ^^
    방금전에 다시 처음부터 차근차근 따라했고, 헷갈리던 nav.....이 코드도, 삽입한 css코드 아래에 넣었더니 브레드크럼이 가운데로 정렬이 되었습니다. 하지만, 구글에 site:https://......이걸로 제 블로그를 찾아보니 여전히 아무런 반응이 없습니다. ㅠㅠ
    아무튼 친절한 설명 감사드립니다. 전 뭐가 문제인지 찾지를 못하겠습니다. ^^;;

  10. thumbnail
    ◀↗↓↖▶바인

    감사합니다. CSS 추가 할때 제일 하단에 넣지 않아서 생긴 오류였네요.
    계속 안되길래 테스트 하다가 css 정말...제일 마지막에 넣으니까 되네요. 신기하네요.

    감사합니다. ^^
    제목도 노출 하는게 맞겠네요

  11. thumbnail
    ◀↗↓↖▶바인

    안녕하세요.
    브레드크럼에 성공했습니다. 그런데 욕심이 생깁니다. 하나만 더 알려주실 수 있을까요?
    아레에 제가 제목을 노출 시키냐 마냐? 질문한 이유를 아실거에요. 제목이 길었을때 길고 중복적으로 보여서 입니다.

    그런데 님의 블로그를 핸드폰으로 봤을때 제목이 길면 제목부분이 안보이던데요. 어떻게 하는 건가요? 비법을 알려주시면 감사하겠습니다. ^^
    좋은하루 되세요.

  12. thumbnail
    2020.07.24 14:06

    비밀댓글입니다

    • thumbnail
      홈페이지 제작, 워드프레스, 웹호스팅 정보를 제공하는 블로그 Avada
      2020.07.24 14:18 신고

      안녕하세요?

      PC와 모바일에 다른 애드센스 광고 크기를 추가하여 문제를 해결해보시기 바랍니다.

      개념을 설명해드리면...

      <div class="desktop-ad">데스크탑용 애드센스 광고 코드</div>
      <div class="mobile-ad>모바일용 광고 코드</div>

      이런 식으로 광고를 추가합니다. 즉, 두 개의 광고가 추가되는 것이죠.

      이제 CSS 코드를 사용하여 desktop-ad는 모바일 기기에서 표시되지 않도록 설정하고, mobile-ad는 데스크탑 기기에서는 표시되지 않도록 하면 됩니다.

      예시:
      @media only screen and (min-device-width: 768px){
      mobile-ad: display:none;
      }
      }

      @media only screen and (max-device-width: 767px){
      desktop-ad: display:none;
      }
      }


  13. thumbnail
    2020.07.26 20:03

    비밀댓글입니다

  14. thumbnail
    🏌🏻‍♂️

    감사합니다. 왓에버에 잘 적용했습니다.

  15. thumbnail
    2020.08.28 16:02

    비밀댓글입니다