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

1

브레드크럼(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에서는 “이동 경로”로 번역되어 있습니다. “이동 경로”라는 표현도 좋은 것 같습니다.

You might also like

Comments