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

2021. 2. 11. 00:09 | 댓글 6

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

 

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

티스토리 고래 스킨에 브레드크럼을 표시하려는 경우 참고해보세요. 브레드크럼(Breadcrumb)은 빵부스러기라는 의미로 헨젤과 그레텔에서 유래한 용어로 웹사이트에서 이동 경로를 표시하여 SEO

avada.tistory.com

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

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

오디세이 (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 스타일은 적절히 변경하도록 합니다. 위와 같은 코드를 넣으면 다음과 같이 카테고리가 표시될 부분에 브레드크럼이 표시됩니다.

카테고리도 표시하게 하려면 [##_article_rep_category_##] 치환자를 적절한 곳에 추가하고 CSS로 조정하시면 됩니다.

참고

avada.tistory.com/1784

 

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

티스토리 블로그에 목차를 표시하려는 경우 목차 스크립트 파일을 이용하여 목차를 추가할 수 있습니다. 보통의 경우 목차를 표시할 자리에 수동으로 HTML 코드를 추가해야 하는데, 그러면 번거

avada.tistory.com

avada.tistory.com/1789

 

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

하루일기 님이 티스토리 스킨 중 하나인 고래 3.4에서 목차가 생성되지 않는 문제가 발생한다고 하여 고래 3.4 스킨에서 목차를 적용하는 방법에 대해 간단히 정리해보았습니다. 티스토리 블로그

avada.tistory.com

avada.tistory.com/1828

 

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

작년 8월 말부터 공식 티스토리 스킨 중 하나인 북클럽 스킨을 사용하다 며칠 전에 티스토리 무료 스킨인 고래 스킨으로 변경했습니다. 이 스킨은 네이버, 구글 검색 엔진에 최적화되어 있고 구

avada.tistory.com

 

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

댓글을 달아 주세요

">
  1. thumbnail
    空空(공공)

    이런거는 옆에서 자세히 배워야 쏙쏙 들어 노는데 말입니다
    명절 잘 보내시기 바랍니다.

  2. thumbnail
    열매맺는나무

    얼마전 오디세이 스킨으로 바꿨습니다.
    네이버 서치어드바이저 사이트 최적화를 살펴보니, 고*스킨을 쓴 다음부터 '웹표준을 준수하는 상위12% 사이트'라고 나오더군요. 그 전에는 1~4%였는데 계속 떨어져 결국 두자리 수까지 갔네요.
    어차피 티스토리는 인스타그람 처럼 사용하기도 해서 신경쓰지 않았는데,두자리 수는 너무 심하다 싶어 바꿔봤습니다.
    이제 며칠 두고보면 과연 스킨 때문이었는지 아니었는지 결과가 나오겠죠.

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

      저는 살펴보니 상위 11%로 나오네요.ㅎㅎ

      이 점수는 크게 중요한 것 같지 않습니다. 이 블로그는 한 동안 네이버 웹사이트 영역에 노출되다가 얼마 전부터 네이버 View 탭에 노출되면서 네이버 유입이 제법 늘었습니다.

      오디세이 스킨에 관심이 가기는 하지만 지금 View 탭에 잘 노출되고 있어서 저는 당분간 이 스킨을 유지할 생각입니다.

      좋은 결과 있기를 바라겠습니다.

  3. thumbnail
    허니바이브

    우와...네이버검색했는데 여기로 와서 놀라고 부럽습니다! 혹시 유료스킨이신가요? 오디세이 북클럽 중 너무 고민되는 결정 장애 1인입니다 ㅜㅜ

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

      안녕하세요? 이 블로그에는 현재 고래스킨이라는 무료 스킨이 적용되어 있습니다.

      https://avada.tistory.com/1828

      스킨은 마음에 드는 것을 선택하시면 될 것 같습니다.

      스킨을 변경하면 검색엔진 유입에 변동이 있을 수 있지만, 말씀하신 스킨 중에서 사용할 경우 큰 영향을 미치지 않을 것도 같습니다. 스킨이 느리지 않으면 별 영향은 없지 않을까 생각합니다.