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

Last Updated: 2022년 08월 05일 | | 17개 댓글

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

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

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

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

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

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

아바다 테마

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

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

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

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

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

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

뉴스페이퍼 테마

인기 뉴스, 매거진 테마인 뉴스페이퍼 (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 플러그인이나 브레드크럼 전용 플러그인을 사용해볼 수 있습니다.

참고로 구글 서치 콘솔에서 탐색경로 문제(‘itemListElement’ 입력란이 누락되었습니다 오류)가 발생하는 경우 브레드크럼을 표시하면 문제가 해결될 것입니다.

참고:

17 개 댓글

Leave a Comment

  3. 안녕하세요
    저는 rank math - 숏코드로 만들었는데 '홈<카테고리<제목' 에서 제목이 길어서 '...' 이런 식으로 줄임말을 넣고 싶습니다, 이 글처럼 제목 끝에 글자 수를 줄이는 방법이 있을까요?ㅜ

    응답

  4. 안녕하세요, 저는 RANK MATH - 숏코드로 넣었는데 '홈>카테고리>제목' 나올 때 제목이 길어서 '...' 이런 식으로 줄임말 넣고 싶습니다.! 어떻게 해야 될까요? 이 글도 제목이 ... 으로 끝나는데 똑같이 하는 방법이 알고 싶습니다ㅜ

    응답

  6. 안녕하세요?
    궁금해서 여쭤봅니다.

    메뉴를 아래와 같이 구성하였습니다.

    회사소개
    - 회사개요
    - CEO 인사말
    - CI
    - 경영이념
    - VISION
    - 오시는 길

    위 와 같이 메뉴 구성을 하고 회사개요를 클릭하면
    홈 > 회사소개 > 회사개요 이렇게 나오도록 하고 싶은데
    홈 > 회사개요 이렇게 나옵니다.
    중간에 회사고개가 빠지는데 어떻게 해야 안빠지고 나올까요?
    플러그인은 Flexy Breadcrumb를 사용하고 있습니다.

    응답

    • 안녕하세요, 온고을님.

      페이지를 만들 때 상위 페이지(부모 페이지)를 설정하셨나요?

      Flexy Breadcrumb 플러그인은 처음 들어보지만, 시간이 될 때 한 번 체크해보겠습니다.

      응답

      • 답변감사드립니다.
        페이지를 만들 때 상위 페이지(부모 페이지)를 만들면 회사소개를 클릭했을때 "회사개요" 화면이 디스플레이 되어야 하게끔 하려니 메뉴를 작성할 때 회사개요를 메뉴에 한번 더 추가하여 이름만 회사소개로 바꿔서 하고 있습니다.
        그렇지 않고 회사소개 페이지를 만들어서 그 아래에 회사개요를 놓고 하면 회사개요를 클릭했을때 홈 > 회사소개 > 회사개요 이렇게 나오는건 확인했습니다.
        문제는 회사소개 페이지를 만들어서 하게되면 회사소개를 클릭 했을때 Blank 페이지가 나오는게 문제라서 그렇게 했습니다.
        말씀하신대로회사소개 페이지를 만들고 Blank 페이지를 안나오도록 하는 방법이 있나요?

      • 메뉴에서 회사소개 > 회사개요로 지정하는 것은 페이지 구조와는 상관이 없습니다.
        사용자 정의 메뉴로 회사소개를 메뉴에 추가하고 링크가 되지 않도록 링크 부분에 #을 입력하면 회사소개가 클릭이 되지 않습니다.

        https://www.thewordcracker.com/basic/how-to-add-external-links-to-wordpress-menu/

        회사소개 페이지를 만들고, 회사개요 페이지를 만들 때 상위 페이지로 회사소개 페이지를 지정하면 회사소개 페이지는 상위 페이지(부모 페이지)가 되고 회사개요는 하위 페이지(자식 페이지) 관계가 될 것입니다.

        회사소개 페이지에 내용이 없다면 회사 소개 페이지가 링크가 되지 않도록 CSS나 javascript로 조정하거나 혹은 다음에서 소개하는 플러그인을 사용하여 회사소개 페이지에 접속하면 다른 페이지로 이동시키는 것이 가능할 것입니다.

        https://www.thewordcracker.com/basic/%EC%9B%8C%EB%93%9C%ED%94%84%EB%A0%88%EC%8A%A4-%ED%8E%98%EC%9D%B4%EC%A7%80-url-%EB%B3%80%EA%B2%BD-%ED%94%8C%EB%9F%AC%EA%B7%B8%EC%9D%B8/

  7. 안녕하세요 워드를 처음 접하면서 많은 도움을 받고 있어 감사드립니다.
    저도 포스팅을 읽고 Rank Math로 변경했는데 이 코드를 어디에 추가해야하는지 여쭤봅니다. 이 방법말고 숏코드를 삽입하는 방법이 간단하긴 한데 저는 제목아래 경로가 표시되고 꾸러미님처럼 제목위에 삽입하는방법을 몰라서 혹시 제목위에 표시할수 있는 방법도 도움주시면 감사하겠습니다.

    응답
할인 소식
Divi 레이아웃 AI 출시 기념 할인!
자세한 정보
AI로 이미지, 텍스트, 코딩, 전체 페이지 레이아웃 생성 가능
베스트셀링 워드프레스 테마 Divi
0
일
0
시간
0
분
0
초
Limited Time Offer
You This Coupon Code in Checkout
20OFF
Click the code to Copy