브레드크럼(Breadcrumbs)은 '빵 쪼가리' 라는 뜻으로, 헨젤과 그레텔에서 남매가 지나온 길을 빵 부스러기로 표시한 것에서 유래된 말이다.
기능은 이름의 유래처럼, 웹 사이트에서 현재 내가 머물러 있는 페이지가 어떤 경로를 통해 올 수 있는 곳인지를 나타내어, 빵 부스러기로 길을 표시한 것처럼, '홈' > '카테고리' > '현재 페이지' 같은 방식을 통해 사용자에게 직관적인 인터페이스로 자신이 머무르고 있는 페이지에 어떻게 도달했고, 어떤 카테고리에 속하는지 등의 정보를 한눈에 알아볼 수 있게 해준다.
때문에 이 브레드크럼을 사용하면, 그렇지 않을 때보다 더 좋은 사용자 경험을 제공하게 되고, 이는 높은 SEO(Search engine optimization, 검색 엔진 최적화) 점수로 반영된다.
구글에 검색했을 때, 검색 결과에서 타이틀 바로 아래에 퍼머링크, URL이 초록색으로 표시되고 있는데, 간혹 여기에 URL만 있는 게 아니고,
브레드크럼을 워드프레스 사이트에 적용하는 방법
자유도가 높은 워드프레스인 만큼, 당연하게도 브레드크럼을 삽입하는 방법은 여러 가지가 있는데, 그중에서 가장 효과적인 방법은, 바로 'Yoast SEO' 플러그인의 기능을 사용하는 것이다.
이 방법이 효과적이라고 말 한 이유는, 간편하고 안정적일 뿐더러 우리가 브레드크럼을 사용하는 이유는 SEO 최적화 때문인데, 'Yoast SEO' 플러그인은 SEO 최적화를 위한 플러그인이기 때문에, 가장 SEO 친화적으로 브레드크럼을 생성하기 때문이다.
같은 브레드크럼이라도 그냥 텍스트만 나열되는 것과, 검색엔진에게 올바른 방식으로 정보를 제공하면서 브레드크럼이 나타나는 것은 꽤나 큰 차이가 있다. 때문에 SEO를 위해 브레드크럼을 사용하는 만큼 전문적인 녀석을 사용해 그 효과를 제대로 누리자.
'Yoast SEO' 플러그인으로 브레드크럼 사용하는 방법
우선 'Yoast SEO' 플러그인으로 브레드크럼을 설정하는 방법 자체는 엄청 간단하다. 'Yoast SEO' 플러그인을 설치하면 생기는 워드프레스 메뉴
이렇게 설정을 마치고 'Save changes'로 저장하면 'Yoast SEO'에서 하는 설정은 모두 끝이다.
테마에서 브레드크럼(Breadcrumbs)을 설정하기
위처럼 성공적으로 'Yoast SEO'에서 브레드크럼 설정을 마쳤다면, 대부분의 테마(Yoast SEO와 호환되는)에선 워드프레스 관리자페이지 '외모' > '사용자 정의하기' 메뉴의 하단에 'Yoast SEO Breadcrumbs'라는 메뉴가 생성됐을 것이다.
그렇다고 이 메뉴에서 테마설절을 하는 것은 아니고, 그냥 '아 생겼구나' 하고 확인한 뒤 'Customify' 테마 기준 '호환성' > '브레드크럼' 메뉴에 진입해서 메뉴를 설정하자.
- 위치 표시: '헤더 뒤에', '커버/타이틀바 안에', '사이트 메인 이전' 중 선택하면 된다. '헤더 뒤에' 메뉴가 가장 일반적이기 때문에 사용자 친화적이며, 즉 SEO에 유리하다. 하지만 사이트 구성에 따라 다른 메뉴가 더 효율적인 경우도 있으니 직접 위치를 바꿔가며 최적화 해 보도록 한다.
- 표시하기: 어떤 페이지들에서 브레드크럼을 표시할지 설정한다. 말 그대로 브레드크럼이 나타나길 원하는 부분에 체크하면 된다. 설정할 수 있는 메뉴는 현재 기준 아래와 같다.
- 글자: 브레드크럼의 글자 디자인을 정의한다. 설정할 수 있는 메뉴는 아래와 같다.
- 스타일링: 브레드크럼의 글자들을 담고있는 영역을 스타일링 한다.
이렇게 설정을 마친 뒤 상단의 '공개' 버튼을 눌러 '사용자 정의'를 완성하면, 이제 사이트에 브레드크럼이 표시된다.
브레드크럼 메뉴가 없는 테마나, 직접 위치 설정하기
테마가 자동적으로 'Yoast SEO' 플러그인의 브레드크럼을 인식하지 않거나, 본인이 원하는 위치(개꿀몬처럼 포스트 하단에 표시한다던지)에 커스텀으로 브레드크럼을 표시하고 싶을 때에는, 아래와 같은 방법들을 사용해 해결할 수 있다.
우선 'Yoast SEO'의 브레드크럼 관련 공식 도움말 에서는 다음과 같이 'PHP' 코드를 사용해 표현하길 원하는 페이지에 직접 삽입하거나
<?php
if ( function_exists('yoast_breadcrumb') ) {
yoast_breadcrumb( '<p id="breadcrumbs">','</p>' );
}
?>
혹은 다음과 같은 숏코드를 활용해 표현하라고 추천하고 있다.
[wpseo_breadcrumb]
하지만 두 가지 방식 다 먹히지 않는 경우가 있는데, 그럴 경우 아래처럼 개꿀몬이 만든 숏코드와 php를 합친 코드를 사용하면, 오류없이 브레드크럼을 적용시킬 수 있다.
<?php echo do_shortcode('<div id="breadcrumbs">[wpseo_breadcrumb]</div>'); ?>
위의 코드를 'single.php'(포스팅 페이지) 등 본인이 원하는 부분에 직접 삽입하면 된다. 또한 이렇게 직접 브레드크럼을 삽입한 경우에는, 하나하나 스타일을 처음부터 지정해 줘야 한다.