#9413
6 min read · 2559 자
이 글은 ToolSignal Pro 사이트를 운영하면서 발생한 검색엔진 최적화 오류를 기술적으로 분석하고 해결한 과정을 담은 가이드다. 네이버 서치어드바이저 H1 중복 문제를 완벽하게 진단하고 올바른 HTML 구조로 복원하여 검색 노출 품질을 개선한 실전 기록을 공유한다.
문제 상황
운영 기록 기준, 내가 ToolSignal Pro 사이트의 검색엔진 최적화 상태를 유지 관리하던 중 청천벽력 같은 진단 결과를 확인했다. 네이버 서치어드바이저 웹마스터 도구의 SEO 점검 리포트에서 단일 페이지 내에 H1 태그가 2개 존재한다는 치명적인 경고가 검출된 것이다. 검색엔진 봇은 웹페이지를 방문할 때 문서의 가장 핵심적인 주제를 파악하기 위해 H1 태그를 최우선으로 탐색한다. 만약 단일 페이지에 이 태그가 복수로 배치되어 있으면 문서의 구조적 명확성이 훼손되고 페이지의 주제 집중도가 분산되어 검색 순위 경쟁에서 불이익을 받게 된다. 사이트의 검색 노출 가시성을 정상화하기 위해서는 이 오류를 반드시 해결해야 했다.
에러 증상
네이버 서치어드바이저가 지적한 문제의 원인은 페이지 내부 마크업 구조에서 동일한 위상의 H1 태그가 중복 인스턴스로 생성되고 있었기 때문이다. 구체적으로 첫 번째 인스턴스는 사이트 상단 로고 영역에 위치한 ToolSignal Pro 문구였고, 두 번째 인스턴스는 메인 페이지의 중심부에서 사용자 시선을 사로잡는 홈 hero 카피 영역이었다. 검색엔진 최적화의 정석에 따르면 하나의 URL을 가진 독립된 페이지 안에는 단 하나의 H1 태그만 존재하여 명확한 핵심 주제를 선언해야 한다. 그러나 현재 마크업은 두 개의 서로 다른 영역이 모두 H1 구조를 점유하면서 수집 봇에게 구조적 혼선을 주고 있었으며, 이것이 고스란히 경고 발생으로 이어졌다.
환경
이번 문제를 겪고 해결을 진행한 ToolSignal Pro 사이트의 기술적 환경은 다음과 같다. 기본 인프라로 Blogger v3 API를 통해 콘텐츠 데이터베이스를 핸들링하고 있었으며, 시각적인 레이아웃과 디자인 통제를 위해 외부에서 제작된 커스텀 theme.xml 템플릿 파일을 연동하여 사용 중이었다. 또한 소스 코드 수정 후 운영 환경에 자동으로 이를 배포하고 통제하기 위해 Playwright CDP 인터페이스를 통합하여 활용했다. 최종 마크업의 규격 준수 여부를 판단하기 위한 기술 검증 도구로는 공식 네이버 서치어드바이저의 진단 도구와 함께 HTML 내부의 태그 발생 횟수를 정밀하게 추적하는 Python regex 기반의 H1 카운트 스크립트를 구성하여 사용했다.
시도했지만 실패한 방법
처음에는 소스 코드를 직접 건드리지 않고 블로거 관리자 대시보드의 레이아웃 설정 메뉴를 통해 문제를 해결해 보려고 시도했다. 대시보드 위젯 설정에서 블로그 제목 레이블의 노출 옵션을 변경하거나 로고 형식을 텍스트가 아닌 단순 이미지 파일 형태로 교체해 본 것이다. 하지만 외부에서 불러와 적용한 커스텀 theme.xml 구조는 마크업 뼈대 자체가 템플릿 코드 내부에 강고하게 하드코딩된 상태로 고정되어 있었다. 결과적으로 대시보드 상에서 UI 조작을 통해 설정을 일부 바꾸는 방식으로는 웹페이지가 실제로 렌더링될 때 출력되는 하부 XML 소스의 H1 구조 생성 로직을 근본적으로 제거할 수 없었기에 실패로 끝났다.
최종 해결
나는 문제를 뿌리 뽑기 위해 시스템의 기반이 되는 외부 커스텀 theme.xml 소스 코드를 열어 직접 편집하는 방식으로 최종 해결을 설계했다. 템플릿 내부에서 상단 로고와 타이틀을 렌더링하는 구문을 정밀하게 추적한 결과, 불필요하게 타이틀 구조를 제어하던 <h2 id='h1-off'><data:title/></h2> 구문과 블로그 타이틀 영역을 레이아웃 단계에서 H1으로 강제 할당하던 <b:tag class='blog-title' name='h1'> 구문을 발견했다.
이 두 가지 마크업 컴포넌트가 로고 영역에 잔존하면서 검색엔진 봇에게 H1 중복 인스턴스로 잡히는 원인을 제공하고 있었으므로, 이들을 디자인 구조만 유지할 수 있도록 일반적인 div 태그로 완전히 swap 처리하는 코드를 반영했다. 즉, 사이트 상단 로고 영역의 태그 위상을 div로 끌어내려 숨겨두고, 오직 홈 hero 카피 문구만이 페이지 내에서 유일무이한 단 하나의 H1 태그 권한을 갖도록 마크업 계층 구조를 완전히 단일화한 것이다.
이렇게 전면 수정한 theme.xml 파일은 미리 짜둔 Playwright CDP 자동화 스크립트를 작동시켜 블로거 시스템으로 다이렉트 업로드를 진행했다. 파일 전송 후 시스템 파이프라인에서 CDP theme-upload verified=true 검증 결과가 떨어지며 서버에 안전하게 코드가 안착했음을 확인했다. 소스 적용이 완료된 후 즉시 라이브 페이지를 새로고침하여 소스코드를 분석한 결과, 기존에 2개로 잡히던 H1 마크업 카운트가 정상 규격인 1개로 정확하게 떨어지는 것을 확인했다.
사용한 코드
# theme.xml
# 이전 (문제 코드)
# 상단 로고 영역에서 무분별하게 H1 위상을 점유하던 코드 구조
<h2 id='h1-off'><data:title/></h2>
<b:tag class='blog-title' name='h1'>
# 수정 (fix)
# 검색엔진 구조 오류를 피하기 위해 일반 div 레이아웃 태그로 swap 적용
<div id='h1-off'><data:title/></div>
<b:tag class='blog-title' name='div'>
검증 결과
내부 테스트 기준, 수정 작업의 효용성을 객괴적으로 검증하기 위해 두 가지 검증 단계를 순차적으로 수행했다. 우선 라이브로 구동 중인 ToolSignal Pro 메인 페이지의 HTML 소스코드를 다운로드하여 파이썬의 정규표현식(regex) 라이브러리를 통해 H1 태그 패턴의 매칭 횟수를 세어보았다. 검증 결과 소스 내에 존재하는 H1 시작 및 종료 태그의 최종 카운트 수치가 정확하게 1개로 출력되는 기술적 결과를 확인했다.
그다음 단계로 실제 네이버 서치어드바이저 웹마스터 도구에 접속하여 대상 URL에 대한 수집 요청을 보낸 뒤 웹 표준 최적화 상태를 다시 진단했다. 수집 및 분석이 완료되자, 이전까지 계속해서 시각적 오류 레이블을 띄우던 H1 중복 경고 문구가 완벽히 소멸하고 제목 태그 항목이 녹색 신호의 정상 표준 상태로 완벽히 수정 완료되었음을 최종 검증했다.
현재 상태
현재 상태는 fixed이다. 블로거 테마 파일의 마크업 단락 수정과 Playwright CDP 업로드 검증 절차를 완벽하게 통과한 이후, 시스템의 어떠한 하위 페이지에서도 더 이상 태그 중복 현상이 관측되지 않고 있다. ToolSignal Pro의 검색엔진 수집 상태는 최고 수준의 최적화 규격을 만족하고 있으며, 상단 로고 영역은 div 마크업의 보호 아래 레이아웃만 유지하고 있고 실제 타겟 키워드가 담긴 홈 hero 카피 영역만 고유한 H1 태그로 검색 봇에게 명확히 전달되는 중이다.
같은 문제 겪는 분들에게
구글 블로거에서 무료 혹은 유료로 제공되는 외산 외부 커스텀 테마를 가져와 설치해 보면, 테마 제작자가 디자인적 편의나 고유의 스타일링을 적용하기 위해 상단 헤더 영역이나 블로그 제목 가젯 내부에 H1 또는 H2 태그를 생각 없이 남발하여 코딩해 둔 사례를 아주 흔하게 볼 수 있다. 이로 인해 국내 검색 환경의 표준인 네이버 서치어드바이저에 블로그를 등록하자마자 제목 태그 중복 경고를 마주하고 좌절하는 운영자분들이 많을 것으로 생각된다.
이러한 문제를 겪고 있다면 대시보드 UI 설정에서 헤매지 말고 테마 메뉴의 HTML 편집 창으로 들어가 로고 주변부의 b:tag 구문이나 제목 출력 변수를 감싸고 있는 태그의 name 속성을 찬찬히 살펴보기 바란다. 해당 영역을 문서 구조에 영향을 주지 않는 순수한 div 태그로 변경해 주는 작업만으로도 검색 수집의 품질이 극적으로 개선되니, 본 가이드의 수정 로직을 참고하여 여러분의 웹사이트 SEO 점수를 안전하게 확보하시길 권한다.