목차
주말 내내 워드프레스 테마를 바꾸고, CSS를 수정해서 원하는 디자인으로 만들었다. 그런데 오늘 구글 서치 콘솔에서 ‘탐색경로 구조화된 데이터 문제가 감지됨’ 문제를 안내 받았다. id 입력란 URL(itemListElement.item)이 잘못되었다는 청천벽력같은 이야기… 대충 찾아보니, 새로 변경한 테마의 브레드크럼이 문제였다.
브레드크럼(Breadcrumbs)이란?
‘브레드크럼’이란 웹사이트 내에서 현재 페이지가 어디에 위치하고 있는지 알려주는 네비게이션 텍스트를 의미한다. 헨젤과 그레텔에서 빵부스러기로 길을 기억했듯이, 유저가 현재 사이트의 어느 위치에 있는지 길을 알려주는 역할을 하는데서 이름이 유래했다고 한다. 귀엽네…🥹
서치 콘솔의 URL 검사 도구에서 확인해본 결과, URL을 의미하는 id 값이 제대로 크롤링되지 않은 것을 확인할 수 있었다. 새로 바꾼 테마에서 브레드 컬럼 역할을 하는 itemListElement 요소들 중 id를 제대로 넣어주지 않고 있는 것이 문제인 것이다.
문제를 알아보기 위해 검색하다보니 문득 SEO를 위해 itemListElement라는 약속된 이름의 클래스를 사용하는 것이 어디서 온 것인가 궁금해졌다. 찾아보니 개발자들이 구조화된 데이터를 보다 쉽게 제공할 수 있도록 구글, MS, 야후 등 여러 기업이 참여하여 schema.org라는 커뮤니티 겸 가이드를 제공하는 웹사이트를 만들었고, 이 사이트의 가이드에서 브레드 크럼 요소들을 ‘itemListElement’로 구분해서 작성하게끔 한 것이었다. (참고)
아무튼 저 오류가 구글에서 내 사이트를 크롤링을 하는데 치명적인 결함을 만드는 것은 아니라고 써있었지만, 서치 콘솔에서 순차적으로 페이지를 크롤링을 하면서 결국엔 모든 페이지가 저 문제를 갖게될 것이 아찔해졌다. 그래서 얼른 수정을 해야했다.
워드프레스를 사용 할 때 일반적으로 적용할 수 있는 브레드크럼 설정
내가 워드프레스를 사용하게 된 이유는 편리한 어드민 기능도 있지만, SEO 최적화를 도와주는 수많은 플러그인들이 있기 때문이다. 일반적인 경우에 브레드크럼은 SEO 플러그인에서 설정하면 된다.
내가 사용하는 Rank Math SEO에서는 General Settings – Breadcrumbs에서 설정을 켜고, Theme File Editor에 들어가서 template – single.php 파일에
<?php if (function_exists('rank_math_the_breadcrumbs')) rank_math_the_breadcrumbs(); ?>위와 같은 코드를 삽입해주면 모든 페이지에 브레드크럼이 들어가게 된다. 그런데 내가 사용한 테마에서는 이미 브레드크럼이 사이트 코드 내부에 적용되어 있어서 id 값이 제대로 적용이 되도록 바꿔줘야 했다.
php 코드 수정
나의 경우 브레드크럼의 맨 마지막 요소인 ‘현재 페이지’의 URL만 제대로 작성되지 않고 있었다. 코드를 살펴보니 디자인적인 측면에서 현재 페이지의 URL은 필요하지 않아서 테마 개발자가 의도적으로 해당 URL이 들어가지 않도록 php를 작성한 것 같았다. (그냥 CSS에서 안보이게 하면 되지 왜그랬대…🥲) 그래서 나는 php를 모르지만 대충 눈치껏 위 코드로 수정 했다. (php를 알면 더 예쁘게 수정할 수 있을 것 같은데 그냥 최소한의 수정만 한 것이니 참고해주세요!)
item 클래스를 가진 a 태그에 URL을 집어넣어서 itemListElement.item의 id 속성으로 current_url을 가져갈 수 있도록 했다. 참고로 php에서 current_url 가져오는 방법은 아래와 같다.
$object_id = get_queried_object_id();
$current_url = get_permalink($object_id);오류 해결
그리고 결과적으로는 서치 콘솔에서 id(URL) 값을 잘 가져가게 되었다. 🙂
혹시 워드프레스에서 해당 오류가 생겼는데 브레드크럼 요소가 플러그인으로 들어가는 것이 아니라, HTML 내부에 있다면 php 코드를 수정해야 한다. 하지만 직접 코드를 수정하기가 어렵다면 그냥 테마를 바꾸는 것이 더 빠를지도…