워드프레스 브레드크럼 적용 방법 (종합)

Facebooktwitterredditpinterestlinkedinmail

워드프레스에 브레드크럼을 추가하면 사용자들이 쉽게 이동 경로를 클릭하여 이동할 수 있고 구글 같은 일부 검색엔진에 이동 경로가 표시되므로 SEO에 유리합니다. 이 글에서는 다양한 워드프레스 브레드크럼 적용 방법에 대해 살펴보겠습니다.

브레드크럼(breadcrumb)은 헨젤과 그레텔에서 길에 흔적을 남기기 위해 빵 조각을 남긴 것에서 유래한 것으로 사용자 인터페이스에서 현재 사용자가 어떤 위치에 있는지를 시각적으로 나타내는 기법 중 하나입니다.

브레드크럼(이동 경로)이 구글 검색 결과에 표시된다
브레드크럼을 적용하면 이동 경로가 구글 검색 결과에 표시되어 SEO 개선에 도움이 된다.

워드프레스 브레드크럼 적용 방법 1 - 테마 기능 사용

가장 간단한 방법은 워드프레스 테마에서 브레드크럼 (Breadcrumb) 기능을 제공하는 경우 테마 기능을 사용하는 것입니다. 일부 유료 테마에서 브레드크럼 활성화 옵션을 제공합니다.

테마에서 이 기능을 제공하면 별도의 플러그인을 설치할 필요 없이 이동 경로를 페이지와 포스트에 표시할 수 있습니다.

아바다 테마

베스트셀링 테마인 아바다 (Avada)에서는 Theme Options (테마 옵션) > Breadcrumbs (경로 정보)에서 브레드크럼의 프리픽스, 색상 등을 설정할 수 있습니다.

워드프레스 브레드크럼 적용 방법 - 아바다 테마의 테마 옵션

그리고 Theme Options (테마 옵션) > Page Title Bar (페이지 제목 바)에서 페이지 제목 표시줄에 이동 경로를 표시할지 여부를 전역적으로 설정할 수 있습니다.

아바다 테마의 페이지 제목 표시줄 설정 - 브레드크럼 (경로 정보) 활성화 / 비활성화

또한, 개별 페이지/글의 편집 화면의 Fusion Page Options (퓨전 페이지 옵션)에서 경로 정보를 표시할지 여부를 개별적으로 선택할 수 있습니다.

Fusion Page Options compressor - 워드프레스 브레드크럼 적용 방법 (종합)

뉴스페이퍼 테마

인기 뉴스, 매거진 테마인 뉴스페이퍼 (Newspaper)에서도 브레드크럼을 설정하는 옵션을 제공합니다. 뉴스페이퍼 테마의 경우 Newspaper > Theme panel > Template Settings (템플릿 설정)으로 이동하여 Breadcrumbs 섹션에서 이동 경로와 관련된 다양한 옵션을 설정할 수 있습니다.

워드프레스 뉴스페이퍼 테마의 Breadcrumbs 설정

워드프레스 브레드크럼 적용 방법 1 - SEO 플러그인 기능 활용

테마에서 브레드크럼 기능을 제공하지 않는다면 일부 SEO 플러그인을 활용할 수 있습니다.

Yoast SEO 플러그인

Yoast SEO를 사용하고 있다면 이 플러그인에서 제공하는 브레드크럼 기능을 사용할 수 있습니다. 워드프레스 대시보드 > SEO > Search Appearance를 클릭하고 Breadcrumbs 탭을 클릭합니다.

워드프레스 SEO 플러그인 Yoast SEO의 Breadcrumbs 기능

이 옵션을 활성화하고 옵션을 적절히 설정한 후에 다음과 같은 코드를 적절한 테마 파일에 추가하도록 합니다.

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

보통 single.php 파일과 page.php 파일 내의 적절한 위치에 추가할 수 있으며, 테마에 따라 header.php 파일에 직접 추가할 수 있는 경우도 있습니다. 추가하는 위치는 테마에 따라 차이가 있습니다. 반드시 차일드 테마를 만들어서 코드를 넣으시기 바랍니다.

Yoast 문서에 의하면 대부분의 비 WooTheme (non-WooTheme) 테마에서 이 코드 스니펫을 함수 파일(functions.php)에 추가해서는 안 된다고 합니다.

기회가 되면 이 블로그에 현재 적용 중인 GeneratePress 테마에 브레드크럼 코드 스니펫을 추가하는 방법에 대해 살펴보겠습니다.

Rank Math 플러그인

Rank Math 플러그인을 사용하는 경우 Rank Math > General Settings (일반 설정) > Breadcrumbs에서 브레드크럼 관련 옵션을 설정할 수 있습니다.

워드프레스 SEO 플러그인 Rank Math의 브레드크럼 설정

이동 경로를 페이지와 포스트에 표시하려면 다음 코드를 테마의 적당한 파일에 추가하도록 합니다.

<?php if (function_exists('rank_math_the_breadcrumbs')) rank_math_the_breadcrumbs(); ?>

또는 다음 숏코드를 원하는 곳에 삽입해도 됩니다.

[rank_math_breadcrumb]

워드프레스 브레드크럼 적용 방법 3 - 플러그인 사용

또 다른 방법으로 브레드크럼 플러그인을 사용할 수 있습니다. 워드프레스 브레드크럼 플러그인으로 Breadcrumb NavXT를 사용해볼 수 있습니다. 이 플러그인은 현재 80만 개 이상 사이트에 설치되어 활성화되어 있습니다.

이 무료 플러그인을 설치한 후에 워드프레스 알림판 > 설정 > Breadcrumb NavXT에서 옵션을 설정할 수 있습니다. 워드프레스 페이지와 포스트에 이동 경로 정보를 표시하려면 다음 코드를 적절한 곳에 추가하도록 합니다.

<div class="breadcrumbs" typeof="BreadcrumbList" vocab="http://schema.org/">
    <?php if(function_exists('bcn_display'))
    {
        bcn_display();
    }?>
</div>

마찬가지로 자식 테마(차일드 테마, 하위 테마)를 만들어서 작업하시기 바랍니다.

마치며

이상으로 워드프레스에서 브레드크럼(이동 경로)을 표시하는 다양한 방법에 대해 살펴보았습니다. 테마에 이동 경로를 표시하는 기능이 있으면 활용할 수 있고, 그렇지 않은 경우 SEO 플러그인이나 브레드크럼 전용 플러그인을 사용해볼 수 있습니다.

참고:



0 개 댓글