티스토리에서 브레드크럼(Breadcrumb)을 추가하여 SEO 향상시키기

티스토리에서 브레드크럼(Breadcrumb)을 추가하여 SEO를 향상시키는 방법

며칠 전에 아는 분으로부터 티스토리 초대장을 받아서 티스토리 블로그를 하나 개설했습니다.

이때까지 주로 워드프레스로 사이트를 만들었는데 티스토리는 무료 블로그로서는 꽤 매력적인 것 같습니다. (다만 백업이 중단되었기 때문에 추후에 다른 플랫폼으로 이전을 할 수 없다는 단점이 있습니다.)

티스토리를 조금 만져보니 단순한 블로그를 운영하기에 좋겠다는 생각이 듭니다. 워드프레스는 무료 테마뿐만 아니라 아바다, Enfold, Divi 같은 매우 많은 유료 테마를 이용할 수 있고 커스터마이징을 통해 원하는 기능을 추가할 수 있는 강력한 CMS입니다. 그리고 대부분의 기능을 플러그인을 통해 추가할 수 있을 정도로 많은 무료 및 유료 플러그인을 이용할 수 있습니다.

워드프레스는 무엇보다 SEO에 강한 것으로 정평이 나 있습니다. 구글에 티스토리 글이 많이 검색되는 것으로 보면 티스토리도 SEO에 그리 나쁜 것 같지 않다는 인상을 받았습니다. (참고로 티스토리를 이용하니 Daum 검색에 잘 노출되는 것 같습니다.ㅎㅎ)

티스토리 블로그에 기본 스킨을 추가한 다음 조금씩 레이아웃을 수정하고 있습니다. 수정 작업은 그리 어렵지는 않고, HTML, CSS만 조금 알면 수정이 비교적 수월할 것 같습니다.

그리고 티스토리 블로그에 브레드크럼(Breadcrumb, 이동 경로)을 추가해보았습니다. 브레드크럼을 제대로 추가하면 구글에 반영되어 사용자들이 해당 글의 카테고리를 쉽게 파악할 수 있어 SEO(검색엔진최적화)에 도움이 됩니다.

참고로 이 블로그에 사용된 Pluto 테마에는 브레드크럼이 기본적으로 제공됩니다.

티스토리에서 브레드크럼(Breadcrumb)을 추가하여 SEO 향상시키기

저는 다른 블로그에 사용된 워드프레스 테마를 참고하여 코드를 동일하게 만들어 티스토리 스킨 파일의 적절한 곳에 추가하니 구글에 제대로 반영되는 것을 확인할 수 있었습니다.

티스토리에 브레드크럼을 추가하고 싶은 경우 다음 코드를 스킨 파일의 적절한 곳에 추가하도록 합니다.

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

위에서 http://avada.tistory.com은 사용 중인 티스토리 주소로 바꾸도록 합니다.

그런 다음 CSS 코드를 적절히 수정하여 추가하도록 합니다. (CSS 코드는 아래를 참고로 하고 스킨에 따라 적절히 수정해야 할 수 있습니다.)

.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;
}

그러면 다음과 비슷하게 브레드크럼이 추가될 것입니다.

티스토리에서 브레드크럼(Breadcrumb)을 추가하여 SEO 향상시키기

구글 검색에서도 제대로 브레드크럼이 제대로 반영되어 표시됩니다.

티스토리에서 브레드크럼(Breadcrumb)을 추가하여 SEO 향상시키기

Avada 등 일부 워드프레스 테마에서 브레드크럼이 기본적으로 제공되고 Yoast SEO 같은 플러그인을 사용하면 비교적 수월하게 브레드크럼을 워드프레스에 추가할 수 있습니다. 티스토리 스킨의 경우 (제가 못 찾아서 그럴 수도 있지만) 브레드크럼이 적용된 스킨이 드문 것 같습니다.

참고:

Leave a Comment