Word Cracker의 잡다한 정보 모음

브레드크럼(Breadcrumb)을 사용하여 SEO 향상시키기

6

브레드크럼(Breadcrumb)과 구글 검색 결과

유명한 “헨젤과 그레텔”이라는 동화에서 헨젤은 길을 잃지 않으려고 빵가루를 뿌려놓습니다. 동화에서는 새들이 빵가루를 다 쪼아먹어서 길을 잃게 되지만 웹사이트에서 이 빵가루 즉 브레드크럼(Breadcrumbs)은 사용자들이 길을 잃지 않고 올바른 글을 찾을 수 있도록 도움을 줄 수 있습니다.

브레드크럼을 사용하면 구글 검색 결과에서 주소 부분에 이동 경로가 표시됩니다.

브레드크럼과 구글 검색
구글 검색 결과에 이동 경로(Breadcrumb)이 주소 URL 부분에 표시됩니다.

단순히 URL이 표시되는 것보다 이동 경로가 표시되면 사용자들의 이탈률(Bounce rate)을 줄이는 데 도움이 됩니다.

Yoast SEO의 브레드크럼 기능 사용하기

워드프레스에서 브레드크럼을 사용하는 방법에는 여러 가지가 있습니다. Breadcrumb NavXT 같은 플러그인을 사용하면 편리하게 이동 경로를 추가할 수 있습니다.

만약 Yoast SEO를 사용하는 경우에는 Yoast SEO에 내장된 Breadcrumb 기능을 사용할 수 있습니다.

Yoast SEO의 Breadcrum 기능을 사용하려면 테마 파일을 수정하여 Breadcrumb이 표시될 부분에 코드를 추가해야 합니다. 보통 single.php/page.php 파일에 추가하면 됩니다. 간혹 header.php 파일에 추가하는 경우도 있다고 하네요. 그리고 주의할 사항은 functions.php 파일에는 추가하지 않도록 합니다.

다음 코드를 적절한 곳에 추가합니다:

<?php
if ( function_exists('yoast_breadcrumb') ) {
yoast_breadcrumb('
<p id="breadcrumbs">','</p>
');
}
?>

가령 이 블로그에 적용된 Elegant Themes의 Divi 테마의 경우 single.php 파일에서 <article … > 태그 바로 위에 추가하면 됩니다. (반드시 차일드 테마를 만든 후에 작업하도록 합니다. 그렇지 않으면 테마 업데이트 시 수정 사항이 사라지게 됩니다. “원클릭으로 간편하게 차일드 테마 만들기” 글을 참고해보세요.)

Divi 테마에서 브레드크럼 추가하기

이제 워드프레스 관리자 페이지의 왼쪽 패널에서 SEO > Advanced로 이동하여 Breadcrumbs 설정을 활성화해 주어야 합니다.

Yoast SEO 브레드크럼 설정

Breadcrumbs settings에서 Enabled를 선택하면 Breadcrumb 기능이 활성화됩니다.

원하는 대로 몇 가지 설정을 해주도록 합니다. 가령 글 유형에 표시할 분류(Taxonomy)를 Taxonomy to show in breadcrumbs for post types에서 설정할 수 있습니다.

Yoast SEO에서 Breadcrumbs 설정

위와 같이 “카테고리“를 선택하면 아래 그림과 같이 글에 카테고리가 표시됩니다.

워드프레스 브레드크럼

CSS를 사용하여 Breadcrumb이 표시되는 레이아웃을 조정할 수 있습니다.

* 참고: Breadcrumb은 음역하여 브레드크럼이라고 흔히 사용되고, MS Glossary에서는 “이동 경로”로 번역되어 있습니다. “이동 경로”라는 표현도 좋은 것 같습니다.

Related Posts

6 Comments
  1. Chris Mok says

    적용했다가 얼마전에 삭제했습니다. 사이트가 넘나 느려서 플러그인 사용을 줄이느라 없앳는데 ㅠㅠ

    차라리 속편하게 호스팅 비용을 좀더 주고 업글을 하는게 빠르겠단 생각이… 넘나 귀차니즘때문에요 ㅎㅎ 지금 젤 싼 월에 AUD $7 짜리를 사용하고 있습니다.

    1. Word says

      호주달러로 7달러면 미화로 5.35달러 정도 되네요. 그 정도면 Vultr에 5달러짜리 플랜을 이용하면 어떤가요? Vultr 5달러짜리가 미끼 상품 성격이어서 별로 좋지는 않다는 일부 평이 있지만… 비용 대비 괜찮은 선택이 아닐까 생각됩니다.ㅎㅎ

      Yoast가 테마나 웹호스팅 서버에 따라 사이트 성능에 영향을 미치는 것으로 보입니다. 이전 테마에서 Yoast SEO를 설치하니까 관리자 페이지가 너무 느려지더군요. 그래서 당시에는 All in One SEO를 사용하다가 최근에 Divi 테마(http://www.thewordcracker.com/basic/elegant-themes-divi-%EB%A6%AC%EB%89%B4%EC%96%BC/ )로 바꾸고 난 후에 Yoast SEO를 다시 설치해보니 이전과 같이 느려지는 문제가 발생하지는 않고 있습니다.

      웹호스팅 서버뿐만 아니라 테마나 다른 프러그인의 영향도 많이 받는 것 같습니다.

      1. Chris Mok says

        지금 현재 호스팅 회사에서 무료로 SSL 을 제공해 주고 있어서 못 떠나고 있는 실정입니다 ㅠㅠ

      2. Word says

        Comodo 인증서가 설치되어 있네요^^

        Bluehost의 경우 상품에 따라 무료로 SSL을 제공하고 있습니다. 제가 사용하는 플랜에는 SSL이 포함되어 있지 않습니다. (굳이 사용하려고 하면 무료 공유 SSL을 사용할 수 있습니다만 그럴 경우 이미지 경로 등을 모두 수정해야 하는 등 귀찮은 작업이 있어서 적용하지 않고 있습니다. http://www.thewordcracker.com/miscellaneous/%ED%95%B4%EC%99%B8-%ED%98%B8%EC%8A%A4%ED%8C%85-bluehost%EC%97%90%EC%84%9C-%EB%AC%B4%EB%A3%8C-%EA%B3%B5%EC%9C%A0-ssl-%EC%9D%B8%EC%A6%9D%EC%84%9C-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0/ )

        최근에 Comodo 인증서를 Bluehost를 통해 유료로 신청한 적이 있는데 Comodo에서 인증 이메일을 어디로 보냈는지 제가 받지를 못했습니다. 블루호스트에 연락하니 Comodo에 연락하라서 해서 Comodo 홈페이지를 통해 메시지를 보냈는데 아무런 연락이 없어서 결국 취소했습니다. Comodo는 별로 장사할 생각이 없나 봅니다ㅎㅎ (생각해보니 블로그에 유료 SSL 인증서를 사용하는 것은 사치 같기도 하고… 어쩌면 잘 되었다는 생각이 들기도 합니다.)

  2. Estoque says

    브레드 크럼이 SEO에도 도움이 되는군요!

    그런데 애플 웹사이트 가보면 브레드 크럼이 하단에 아주 조그맣게 표시되는데 이런것도 과연 도움이 되는지 모르겠습니다. ㅎㅎ

    1. Word says

      애플은 사용자들이 알아서 찾아오니까 SEO에 신경 쓸 이유는 별로 없지 않을까 생각되네요.ㅎㅎ

Leave A Reply

Your email address will not be published.