랭크매스(RankMath)에서 브레드크럼(Breadcrumbs)을 활성화하고 content-single.php 파일에 코드를 추가하여 내 워드프레스에 브레드크럼을 실행시키는 과정을 쉽게 정리했습니다.
브레드크럼 설정을 적용하면 사용자 경험을 향상시키고 SEO에도 긍정적인 영향을 미칠 수 있습니다.
귀찮을 수도 있지만, 한 번만 설정하면 쾌적한 사이트 운영이 가능하니 꼭 활용해보시길 추천합니다.
1. 브레드크럼(Breadcrumbs)이 뭔가요?
브레드크럼(Breadcrumbs)은 웹사이트를 방문하는 사람들이 현재 위치를 한눈에 파악하고, 이전 단계로 쉽게 이동할 수 있게 도와주는 네비게이션 요소입니다.
아마 명칭을 몰랐을 뿐 한 번쯤은 다들 보시지 않았을까 생각됩니다.
브레드크럼은 다음과 같이 사용자가 사이트를 방문할 때 페이지 구조를 시각적으로 표현하여 어디에 있는지 한눈에 알 수 있도록 도와주는 역할을 합니다.
하지만 단순히 사용자 편의만을 위한 장치가 아니라, SEO(검색엔진 최적화) 측면에서 매우 중요한 역할을 담당하고 있습니다.
실제로 브레드크럼은 검색엔진이 사이트 구조를 이해하게 도와주는 역할도 합니다.
2. 브레드크럼(Breadcrumbs)을 사용하는 이유
(1) 웹사이트 구조 파악에 도움
브레드크럼은 사이트의 계층 구조를 명확하게 보여주기 때문에, 구글과 같은 검색엔진은 페이지들 사이의 관계를 쉽게 파악할 수 있습니다.
예를 들어, ‘홈 > 카테고리 > 상품’과 같은 구조가 있다면, 검색엔진은 각 페이지가 어떤 역할을 하는지, 어디에 속해 있는지 빠르게 이해할 수 있게 됩니다.
이것은 검색엔진이 사이트 내 콘텐츠를 더 정확하게 분류하고 색인화하는 도움을 줍니다.
(2) 검색결과(SERP)에서의 브레드크럼 표시
검색결과에서도 브레드크럼이 표시됩니다.
(3) 사용자 경험(UX) 개선과 SEO 점수 향상
브레드크럼은 웹사이트를 처음 방문한 사람들에게 현재 위치를 명확히 보여주고, 이전 단계로 한 번에 이동할 수 있도록 해줍니다.
이로 인해 사용자의 탐색이 훨씬 편리해지고, 사이트 내에서 오래 머무르는 경향이 높아질 수 있습니다.
사용자가 오래 머무를수록 이탈률이 줄어들고, 이는 곧 SEO 점수 향상으로 이어집니다.
(4) 내부 링크 구조 최적화
브레드크럼은 사이트 내에서 자연스럽게 내부 링크를 생성하여 검색엔진 크롤러가 더 많은 페이지를 쉽게 탐색하고 색인화할 수 있게 도와줍니다.
특히 하위 페이지나 깊숙한 위치에 있는 콘텐츠도 브레드크럼을 통해 노출 빈도가 높아지면서 전체 사이트의 검색엔진 노출 가능성이 커지게 됩니다.
(5) 모바일 및 사용자 친화적인 탐색 제공
모바일 환경에서는 화면이 작아 메뉴나 탭을 여러 번 눌러야 하는 불편함이 있습니다.
하지만 브레드크럼은 한 줄로 간결하게 현재 위치와 상위 카테고리를 보여주기 때문에, 작은 화면에서도 사용자가 쉽게 이동할 수 있습니다.
이는 모바일 사용자 경험을 개선하며, 모바일 트래픽이 많은 요즘 같은 시대에 더욱 중요한 요소로 작용합니다.
3. 랭크매스(RankMath) 브레드크럼(Breadcrumbs) 설정
브레드크럼을 가장 쉽게 설정할 수 있는 방법은 플러그인을 사용하는 방법입니다.
그 중에서 랭크매스나 Yoast 같은 SEO플러그인에서 이 기능을 대부분 지원하고 있습니다.
저는 그 중에서 랭크매스를 사용해서 브레드크럼을 설정하는 방법을 설명드려보도록 하겠습니다.
랭크매스를 설치했다고 하더라도 브레드크럼은 비활성 상태이기 때문에 먼저 랭크매스 설정에서 브레드크럼을 활성화 시켜줘야합니다.
[RankMath-일반설정-Breadcrumb]에 들어가서 아래처럼 설정해줍니다.
사실상 활성화 부분을 빼고 나머지 옵션들은 본인 기호에 맞게 조절하시면 되겠습니다.
그리고 4번에 있는 php코드를 복사해둡니다.(OR 부터는 다른 코드이니 그 앞부분까지만 복사합니다.)
복사한 코드는 다음과 같습니다.
<?php if (function_exists('rank_math_the_breadcrumbs')) rank_math_the_breadcrumbs(); ?>
4. content-single.php 파일에 코드 넣기
이제 복사한 코드를 content-single.php 파일에 붙여넣어야합니다.
그런데 차일드 테마를 사용하고 계신 경우에는 이 파일이 기본으로 복사되지 않습니다.
따라서 우선 차일드테마 플러그인에서 content-single.php 파일을 복사해야 합니다.
차일드테마를 사용하지 않으신 경우에는 아래 코드 넣는 부분부터 봐주시기 바랍니다.
또한 차일드테마를 사용하지 않고 계시다면, 개인적으로 차일드테마를 꼭 사용하시라 말씀드리고 싶습니다.
이유는 아래 글을 참고해주시기 바랍니다.
Step1 Child Theme 설정에서 Files 탭에 content-single.php 를 체크하고 ‘copy’ 버튼을 클릭해서 해당 파일을 내 차일드테마로 복사합니다.
Step2 그 후 테마파일 편집기에 들어가보면 원래 없던 content-single.php 파일이 추가된 걸 볼 수 있습니다.
Step3 content-single.php 파일을 클릭하고 26번째 줄 정도에 header 아래에 다음과 같이 코드를 붙여넣습니다. 물론 붙여넣고 파일 업데이트 버튼을 꼭 눌러주셔야합니다.
노파심에 드리는 말씀이지만 아래 사진에서 제가 붙여넣은 것 아래에 <?php는 그대로 두셔야 합니다.
워드프레스에 익숙하지 않은 분들은 중복인줄 알고 지워버리는 경우가 있어서 말씀드립니다.
5. 브레드크럼(Breadcrumbs) 설정 완료 모습
브레드크럼 설정을 하면 다음과 같이 제목 위에 경로가 표시됩니다.
아까 코드를 붙여넣은 위치 말고 다른 곳에 붙여넣으면 위치도 변경이 가능하지만 저는 이 위치가 가장 적당한 것 같습니다.
또한 랭크매스 설정에서 어느 경로까지 보여줄지도 설정이 가능합니다.(예를 들어, 제목 빼고 카테고리까지만 보여주는 것 등..)
그런 부분들은 개인적인 선택 사항이니 하나씩 테스트해보시기 바랍니다.
물론 중요한 부분은 아니니 그냥 이대로 사용하셔도 무방합니다.
저도 처음에는 브레드크럼 같은걸 굳이 설정해야하나 하는 생각을 했었습니다.
SEO에 도움이 된다고는 하는데 크게 와닿지 않았기 때문입니다.
그런데 요즘에는 ‘SEO에 좋다고 하는데 굳이 안할 이유가 있나?’ 라고 생각이 바뀌었습니다.
이거 바꾼다고 해서 큰 변화가 일어나지는 않지만, 설정해서 나쁠건 없으니 아직 안하신 분들은 시도해보시기를 추천드립니다.