최근 워드프레스 블로그 테마를 Kadence로 바꿨다. 얼마 후 네이버 서치어드바이저 사이트 진단 탭의 SEO 항목에 엄청난 “title 요소가 2개 이상 발견” 요소가 넘쳐났다. 이에 해결법을 적는다.
Kadence 테마로 바꾼 후 뭐가 문제 였을까?
처음에 이걸 어떻게 해야 하나 하고 제미나이에게 물어보았다. 일단 얘기 해준건 <head> 영역의 소스 코드를 확인하여 <title> 태그가 몇개 인지 알아봐야한다는 내용이었는데… 이건 너무 어렵고 귀찮았다.
결국 내가 겪은 상황이 뭐였냐면 Kadence(카덴스) 테마의 토글 메뉴(햄버거 버튼(☰))등의 태그가 <title>Toggle Menu</title>, <title>Continue</title>, <title>Previous</title> 식의 이름으로 삽입되는데 저기 영어로 쓰여 있듯이 <title>이라는 문장을 네이버 서치어드바이저 봇이 페이지 제목으로 인식해서 발생하는 문제였다.
내 워드프레스 블로그 오류 원인 직접 확인하는 방법
만약에 이글을 읽고 있는 분이 나와 같은 문제를 겪고 있는지 확인하는 방법을 알아보겠다.
1.네이버 서치어드바이저에 로그인한다.
2.검증 > 색인 상태 확인 순으로 이동하여 “title 요소가 2개 이상 발견” 오류가 난 글의 URL을 입력한다.
그럼 하단에 색인, Meta, SEO 문제가 뜨는지 나온다 SEO에 문제가 있으므로 삼각형 도형에 느낌표가 박힌 아이콘이 나온다. 아이콘 옆의 “∨”를 누른다.
누르면 “title 요소가 2개 이상 발견” 00개 인스턴스를 확인했습니다. 하고 옆에 “∨”가 있다. 이것도 누르면 펼쳐지는데 제목이외에 “- Toggle Menu, – Previous, – Continue” 등이 쭉 나열되어 있다면 나랑 같은 문제다.
“title 요소가 2개 이상 발견” 해결 방법
제미나이가 알려준 방법인데 천천히 따라하면 아주 간단하다. 우선 WPCode 플러그인을 설치 해야한다. 플러그인을 새로 설치하는 순서는 다음과 같다.
- 플러그인 ➞ 플러그인 추가 ➞ 검색창에 WPCode 입력 ➞ 설치 버튼 선택 ➞ 활성화 버튼 선택
플러그인을 설치 했다면 이제 코드를 입력해야한다.
1.워드프레스 왼쪽 메뉴에서 “코드스니펫 ➞ +스니펫 추가”
2.사용자 정의 코드 추가 (새 스니펫) (+ Add Custom Snippet) 선택
3.PHP 스니펫 선택
4.코드 입력창에 아래의 코드를 그대로 복사해서 붙여넣습니다.
// Kadence 테마 SVG 아이콘 내부의 title 태그를 제거하여 네이버 서치어드바이저 충돌을 해결합니다.
add_filter( 'kadence_svg_icons_have_title', '__return_false' );
5.우측 상단의 비활성 토글을 선택하여 활성화로 변경한 후 “스니펫 저장”을 누릅니다.
코드 적용 후 주의사항 (필독)
위 사항을 전부 진행했다면 사용 중인 캐시 플러그인(WP Rocket, LiteSpeed Cache 등)에서 전체 캐시 삭제(Clear/Purge Cache)를 실행해 주어야 한다.
이후에도 똑같이 “title 요소가 2개 이상 발견”오류가 나타 날 수 있다. 이게 결국에는 네이버 서치어드바이저 봇이 다시 방문하여 정보를 가져가야 갱신된다.
제대로만 했다면 저 오류는 없어진다. 걱정하지 않아도 되지만 또 이걸 바로 확인해 보고 싶어지는 것이 사람이다.
코드가 적용됐는지 바로 확인 하는 법
아까 오류가 떴던 URL을 복사한다. 그리고 “요청 ➞ 웹페이지 수집”순으로 진행하여 복사한 URL을 붙여넣고 다시 수집요청을 진행한다.
이 후 몇분 후 “검증 ➞ 색인 상태 확인” 순으로 진행하여 오류가 떴던 URL입력하여 확인하면 오류가 떴던 SEO 항목이 사라진것을 확인 할 수 있다.
