브레드크럼 만들기 in 워드프레스 Yoast SEO

by

브레드크럼(Breadcrumbs)은 ‘빵 쪼가리’ 라는 뜻으로, 헨젤과 그레텔에서 남매가 지나온 길을 빵 부스러기로 표시한 것에서 유래된 말이다.

기능은 이름의 유래처럼, 웹 사이트에서 현재 내가 머물러 있는 페이지가 어떤 경로를 통해 올 수 있는 곳인지를 나타내어, 빵 부스러기로 길을 표시한 것처럼, ‘홈’ > ‘카테고리’ > ‘현재 페이지’ 같은 방식을 통해 사용자에게 직관적인 인터페이스로 자신이 머무르고 있는 페이지에 어떻게 도달했고, 어떤 카테고리에 속하는지 등의 정보를 한눈에 알아볼 수 있게 해준다.

때문에 이 브레드크럼을 사용하면, 그렇지 않을 때보다 더 좋은 사용자 경험을 제공하게 되고, 이는 높은 SEO(Search engine optimization, 검색 엔진 최적화) 점수로 반영된다.

구글에 검색했을 때, 검색 결과에서 타이틀 바로 아래에 퍼머링크, URL이 초록색으로 표시되고 있는데, 간혹 여기에 URL만 있는 게 아니고, ‘https://gkkmon.com › WordPress’ 처럼 카테고리 명까지 나타나는 경우를 볼 수 있다. 이 뜻은 즉 구글에서도 브레드크럼이 SEO에 좋은 영향을 끼친다는 걸 인정하고, 적극 권장하고 있다는 얘기가 된다.

create-a-bread-crumb-in-wordpress-yoast-seo
create-a-bread-crumb-in-wordpress-yoast-seo

브레드크럼을 워드프레스 사이트에 적용하는 방법

자유도가 높은 워드프레스인 만큼, 당연하게도 브레드크럼을 삽입하는 방법은 여러 가지가 있는데, 그중에서 가장 효과적인 방법은, 바로 ‘Yoast SEO’ 플러그인의 기능을 사용하는 것이다.

이 방법이 효과적이라고 말 한 이유는, 간편하고 안정적일 뿐더러 우리가 브레드크럼을 사용하는 이유는 SEO 최적화 때문인데, ‘Yoast SEO’ 플러그인은 SEO 최적화를 위한 플러그인이기 때문에, 가장 SEO 친화적으로 브레드크럼을 생성하기 때문이다.

같은 브레드크럼이라도 그냥 텍스트만 나열되는 것과, 검색엔진에게 올바른 방식으로 정보를 제공하면서 브레드크럼이 나타나는 것은 꽤나 큰 차이가 있다. 때문에 SEO를 위해 브레드크럼을 사용하는 만큼 전문적인 녀석을 사용해 그 효과를 제대로 누리자.

‘Yoast SEO’ 플러그인으로 브레드크럼 사용하는 방법

우선 ‘Yoast SEO’ 플러그인으로 브레드크럼을 설정하는 방법 자체는 엄청 간단하다. ‘Yoast SEO’ 플러그인을 설치하면 생기는 워드프레스 메뉴 ‘SEO’ > ‘Search Appearance’ > ‘Breadcrumbs’ 메뉴에서 ‘Breadcrumbs settings’를 ‘Enabled’ 시켜서 가동시키자. 각 속성들은 다음과 같다.

  • Separator between breadcrumbs: 브레드크럼의 단계 사이에 넣을 기호를 정한다. 기본은 ‘»’로 되어있다
  • Anchor text for the Homepage: 홈페이지를 뭐라고 표시할지 정한다. 기본은 ‘Home’이다.
  • Prefix for the breadcrumb path: 브레드크럼 이동 경로의 접두사를 정한다.
  • Prefix for Archive breadcrumbs: 아카이브 브레드크럼의 접두사를 정한다. 기본은 ‘Archives for’ 이다.
  • Prefix for Search Page breadcrumbs: 검색 페이지 브레드크럼의 접두사. 기본은 ‘You searched for’
  • Breadcrumb for 404 Page: 404 페이지의 브레드크럼. 기본은 ‘Error 404: Page not found’
  • Bold the last page 마지막 페이지의 글자를 굵게 할 지 기본으로 할 지 정한다. ‘Bold’가 굵게 ‘Regular’가 규정 사이즈다.
  • 마지막 Taxonomy to show in breadcrumbs for content types’는 글, 페이지, 미디어의 브레드크럼을 어떤 방식으로 표현할 것인지 결정한다. 글은 기본적으로 카테고리, 태그, 글 형식으로 분류할 수 있으며 개인적으로도 SEO 측면에서도 특별한 점이 없다면 카테고리 방식으로 분류하는 방법을 추천한다.

이렇게 설정을 마치고 ‘Save changes’로 저장하면 ‘Yoast SEO’에서 하는 설정은 모두 끝이다.

테마에서 브레드크럼(Breadcrumbs)을 설정하기

위처럼 성공적으로 ‘Yoast SEO’에서 브레드크럼 설정을 마쳤다면, 대부분의 테마(Yoast SEO와 호환되는)에선 워드프레스 관리자페이지 ‘외모’ > ‘사용자 정의하기’ 메뉴의 하단에 ‘Yoast SEO Breadcrumbs’라는 메뉴가 생성됐을 것이다.

그렇다고 이 메뉴에서 테마설절을 하는 것은 아니고, 그냥 ‘아 생겼구나’ 하고 확인한 뒤 ‘Customify’ 테마 기준 ‘호환성’ > ‘브레드크럼’ 메뉴에 진입해서 메뉴를 설정하자.

– 위치 표시: ‘헤더 뒤에’, ‘커버/타이틀바 안에’, ‘사이트 메인 이전’ 중 선택하면 된다. ‘헤더 뒤에’ 메뉴가 가장 일반적이기 때문에 사용자 친화적이며, 즉 SEO에 유리하다. 하지만 사이트 구성에 따라 다른 메뉴가 더 효율적인 경우도 있으니 직접 위치를 바꿔가며 최적화 해 보도록 한다.

– 표시하기: 어떤 페이지들에서 브레드크럼을 표시할지 설정한다. 말 그대로 브레드크럼이 나타나길 원하는 부분에 체크하면 된다. 설정할 수 있는 메뉴는 현재 기준 아래와 같다.

  • ‘인덱스에서 감추기’
  • ‘카테고리에서 감추기’
  • ‘검색에서 감추기’
  • ‘글보관함에서 감추기’
  • ‘단일 페이지에서 감추기’
  • ‘단일글에서 감추기’
  • ‘단일에서 감추기’
  • ‘404 페이지에서 감추기’

– 글자: 브레드크럼의 글자 디자인을 정의한다. 설정할 수 있는 메뉴는 아래와 같다.

  • 폰트 패밀리: 브레드크럼의 폰트 종류, 즉 ‘Sans’, ‘Sans-serif’ 같은 ‘Font-family’ 를 설정한다.
  • Font Weight: 폰트의 굵기를 정의한다. 기본, 굵게, 100~900까지 설정할 수 있다.
  • 폰트 사이즈: 폰트의 사이즈를 결정한다. 픽셀(px) 단위를 사용하고, PC 화면, 테블릿화면, 모바일화면 크기마다 다르게 설정할 수 있다.
  • 줄 간격: 브레드크럼이 두 줄 이상 생기게 될 때, 각 라인끼리의 간격을 정의한다. 세부 설정은 위와 같다.
  • 글자 스페이싱: 라인의 간격이 아니라, 글자 하나하나 끼리의 가로 간격을 정의한다. 세부 설정은 위와 같다.
  • 폰트 스타일: 폰트 스타일을 결정한다. 이탈릭(Italic) 처럼 글씨를 기울인다던지 하는 기능을 한다.
  • Text Decoration: 텍스트 데코레이션을 정한다. 밑줄을 친다던지 하는 기능이다
  • Text Transform: 글자가 자연스럽게 씌여질지, 첫 글자만 대문자로 할 지, 모두 소문자로 할 지, 모두 대문자로 할 지 등을 결정한다.

– 스타일링: 브레드크럼의 글자들을 담고있는 영역을 스타일링 한다.

‘Normal’메뉴에서 색상과 링크 색상, 간격, 배경 색상, 배경 이미지, 테두리 스타일, 테두리 둥글게, 테두리 그림자 등을 설정할 수 있고, ‘마우스 오버’메뉴 에서 링크에 마우스를 올렸을 때 링크 색상을 변경할 수도 있다.

이렇게 설정을 마친 뒤 상단의 ‘공개’ 버튼을 눌러 ‘사용자 정의’를 완성하면, 이제 사이트에 브레드크럼이 표시된다.

브레드크럼 메뉴가 없는 테마나, 직접 위치 설정하기

테마가 자동적으로 ‘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'(포스팅 페이지) 등 본인이 원하는 부분에 직접 삽입하면 된다. 또한 이렇게 직접 브레드크럼을 삽입한 경우에는, 하나하나 스타일을 처음부터 지정해 줘야 한다.

create-a-bread-crumb-in-wordpress-yoast-seo