티스토리 브레드크럼 삽입 방법 (JB FACTORY 스킨)
- LIFE
- 2022. 11. 27.
| 티스토리 브레드크럼 삽입 방법 (JB FACTORY 스킨) + breadcrumb 삽입하면 seo에 도움이 될까? |
안녕하세요. 일상 속 다양한 꿀팁을 전하는 꿀팁 저장소 -쇼핑백입니다. 오늘은 티스토리 브레드크럼 삽입 방법 알려드리도록 하겠습니다. 워드프레스 사용자라면 테마에 브레드크럼이 자동 적용되어 있는 것도 있고 rankmath나 yoast 등을 사용해 브레드크럼을 자동 삽입할 수도 있습니다.
하지만 티스토리의 경우 직접 html 창을 열어서 브레드크럼 코드를 입력해야 하는데요. 오늘 이 곳에서 티스토리 breadcrumb을 삽입하고 적용이 잘 되었는지 확인해보는 방법 알려드리도록 하겠습니다.
(광고)
▼ 이 블로그의 다른 꿀팁
브레드크럼이란?
먼저 브레드크럼이란 무엇인지 알아보고 간단하게 브레드크럼에 관련된 Q&A 몇가지 살펴보도록 하겠습니다. 브레드크럼이란 영어로 breadcrumb, 직역하자면 빵부스러기인데요. 동화 헨젤과 그레텔에서 따온 용어입니다. 헨젤과 그레텔이 빵 부스러기를 땅에 떨어트려 집으로 가는 길을 찾은 것에서 유래되었으며 SEO업계에서는 사이트의 이동경로를 나타냅니다.
간단하게 브레드크럼 관련 질의사항을 정리했습니다.
브레드크럼이 왜 중요한가요?
구글, 네이버 등의 검색엔진은 로봇을 통해 글을 색인하고 검색 랭킹을 매깁니다. 브레드크럼은 로봇이 봤을 때 문서의 기본 구조를 파악하는데 도움이 되어 SEO 점수 향상에 긍정적이기에 중요합니다.
안 하면 많이 불리한가요?
SEO는 브레드크럼 외에도 다양한 요인들로 순위가 정해집니다. SSL 사용여부, 글의 길이, 문서의 HTML 구조 등 너무나도 많은 요인들이 있습니다. 즉 브레드크럼 설정 여부가 전체 구글 SEO에서 차지하는 영향은 미미합니다. 하지만 코드 하나만 넣는거기에 굳이 안 할 이유는 없습니다.
브레드크럼이 잘 적용되었는지 어떻게 확인하나요?
구글 서치 콘솔에서 '탐색경로'를 클릭했을 때 유효 문서 수가 있다면 브레드크럼이 잘 적용된 것으로 볼 수 있습니다.
티스토리 브레드크럼 삽입 방법
먼저 해당 HTML 코드와 CSS 코드는 https://avada.tistory.com에서 발췌했음을 알려드리며 코드를 작성해주셔서 감사합니다. JB FACTORY 스킨을 쓰는 티스토리 블로그에 브레드크럼 삽입을 위해서는 우선 다음 라인을 스킨 편집 화면에서 찾아주세요.
<div class="jb-cell jb-cell-content jb-cell-content-article">
<article>
<header>
해당 라인 아래에 다음 코드를 삽입합니다. yourid.tistory.com은 본인의 티스토리 주소로 바꾼 뒤 삽입해야 합니다.
<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"><span itemprop="name"></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"></span><meta itemprop="position" content="3"><meta itemprop="item" content="https://yourid.tistory.com"></li></ul>
</div></nav>
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는 자신이 원하는 방식으로 편집하셔도 무방합니다. 제대로 적용되었다면 아래의 이미지처럼 제목 상단에 브레드크럼이 출력됩니다.
마무리
이상으로 오늘의 포스트 '티스토리 브레드크럼 삽입 방법 (JB FACTORY 스킨)'를 마치겠습니다. 더 궁금한 사항이 있다면 아래 댓글로 문의 부탁드립니다. 감사합니다.