이 글은 네이버 서치어드바이저에서 H1 중복 경고를 겪는 분을 위한 기록입니다. 웹 페이지의 핵심 콘텐츠를 명확히 하고 SEO 품질을 높이는 방법을 바로 해결합니다.
마치며 — 핵심 정리와 생각할 거리
핵심 결론
이번 H1 중복 경고 문제는 웹 페이지의 시각적 표현과 의미론적 구조 간의 불일치에서 비롯되었습니다. 특히, 사이트 로고가 시각적으로는 중요하지만 페이지의 핵심 콘텐츠 제목은 아닌 상황에서, 이를 H1 태그로 마크업한 것이 근본 원인이었습니다. 해결의 핵심은 페이지의 유일한 H1 태그를 핵심 콘텐츠(Hero 섹션 문구)에 할당하고, 로고와 같은 부수적인 요소는 의미론적으로 더 적절한 <div> 태그로 변경함으로써 검색 엔진 크롤러가 페이지의 구조와 중요도를 정확하게 파악하도록 돕는 데 있었습니다. 이는 단순히 경고를 없애는 것을 넘어, 웹 표준과 SEO 모범 사례를 준수하여 사용자 경험과 검색 엔진 최적화를 동시에 개선하는 정공법적인 접근이었습니다.
더 생각해볼 것들
이 문제를 해결하고 나면 자연스럽게 떠오르는 질문들이 있습니다.
- 콘텐츠의 의미론적 중요도와 HTML 태그의 관계는 무엇인가? — H1 태그는 페이지의 최상위 제목을 나타내며, 이는 곧 해당 페이지의 핵심 주제를 의미합니다. 로고가 H1이 될 수 없는 이유는 로고가 사이트 전체의 아이덴티티를 나타낼지언정, 특정 페이지의 핵심 콘텐츠를 대표하지는 않기 때문입니다. 그렇다면 다른 제목 태그(H2, H3 등)는 어떤 기준으로 사용되어야 하며,
<div>나<span>과 같은 일반 태그는 언제 활용하는 것이 적절할까요? 이러한 의미론적 마크업의 중요성을 깊이 이해하는 것은 견고한 웹 개발의 기초가 됩니다. - 검색 엔진 크롤러의 동작 방식과 CSS/JavaScript의 영향은? — 본문에서 CSS로 요소를 숨기는 방법이 SEO에 효과적이지 않았던 이유는 크롤러가 DOM 트리를 기반으로 페이지를 해석하기 때문입니다. 그렇다면 JavaScript를 통해 동적으로 로드되거나 숨겨지는 콘텐츠는 검색 엔진에 어떻게 노출될까요? SPA(Single Page Application)와 같은 최신 웹 기술 환경에서는 이러한 동적 콘텐츠가 SEO에 미치는 영향이 더욱 복잡해지므로, 크롤러의 렌더링 방식과 인덱싱 전략에 대한 이해가 필수적입니다.
- Blogger와 같은 레거시 플랫폼에서의 SEO 최적화 전략은? — Blogger와 같은 특정 플랫폼은 자체적인 템플릿 언어와 제한된 커스터마이징 옵션을 제공합니다. 이러한 환경에서 최신 SEO 모범 사례를 적용하기 위한 현실적인 제약과 극복 방안은 무엇일까요? 예를 들어,
b:tag와 같은 커스텀 태그를 활용하여 HTML 구조를 제어하는 방식은 일반적인 웹 개발과는 다른 접근 방식을 요구합니다. 이러한 플랫폼 특성을 이해하고, 그 안에서 최적의 SEO 전략을 수립하는 능력은 특정 환경에 구애받지 않는 문제 해결 능력을 길러줍니다.
응용 가능한 상황
이 해결책은 H1 중복 문제뿐만 아니라, 웹 페이지의 의미론적 구조를 개선해야 하는 다양한 상황에 응용될 수 있습니다.
# 1. 뉴스 기사 페이지에서 기사 제목만 H1으로 유지하고, 섹션 제목은 H2로 변경
# 이전:
# <h1>[언론사 로고]</h1>
# <h1>[기사 제목]</h1>
# <h2>[관련 기사 섹션 제목]</h2>
# 변경 후:
<div class="site-logo"><img src="logo.png" alt="언론사 로고"></div>
<h1>[기사 제목]</h1>
<h2>[관련 기사 섹션 제목]</h2>
# 2. 쇼핑몰 제품 상세 페이지에서 제품명만 H1으로, 브랜드명은 <p> 태그로 변경
# 이전:
# <h1>[브랜드명]</h1>
# <h1>[제품명]</h1>
# 변경 후:
<p class="product-brand">[브랜드명]</p>
<h1>[제품명]</h1>
# 3. 블로그 목록 페이지에서 블로그 제목은 H1으로, 각 포스트 제목은 H2로 변경
# 이전:
# <h1>[블로그 로고]</h1>
# <h1>[블로그 제목]</h1>
# <h1>[각 포스트 제목]</h1> (잘못된 경우)
# 변경 후:
<div class="blog-logo"><img src="blog-logo.png" alt="블로그 로고"></div>
<h1>[블로그 제목]</h1>
<!-- 각 포스트는 H2로 마크업 -->
<article>
<h2><a href="/post1">[첫 번째 포스트 제목]</a></h2>
<p>[요약]</p>
</article>
<article>
<h2><a href="/post2">[두 번째 포스트 제목]</a></h2>
<p>[요약]</p>
</article>
경우의 수로 보는 이 버그
이 H1 중복 버그는 다음과 같은 환경 조건들의 조합에서 주로 발생합니다.
- 플랫폼의 특성 (P):
- P1: Blogger, WordPress와 같이 템플릿 기반의 CMS를 사용하는 경우 (템플릿 파일 직접 수정 가능)
- P2: 프레임워크(React, Vue, Angular)를 사용하여 컴포넌트 기반으로 개발하는 경우 (컴포넌트 내 H1 중복 가능성)
- P3: 순수 HTML/CSS/JS로 개발하는 경우 (개발자의 실수로 인한 중복 가능성)
- 마크업 방식 (M):
- M1: 사이트 로고를 H1으로 마크업하는 경우
- M2: Hero 섹션 또는 메인 콘텐츠 제목을 H1으로 마크업하는 경우
- M3: 여러 컴포넌트가 독립적으로 H1을 포함하는 경우
- SEO 진단 도구 (S):
- S1: 네이버 서치어드바이저
- S2: Google Search Console
- S3: 기타 SEO 분석 도구 (Ahrefs, SEMrush 등)
이 버그는 주로 (P1 또는 P2 또는 P3) × (M1 & M2) 의 조합에서 재현됩니다. 즉, 템플릿 기반 플랫폼이든, 컴포넌트 기반 프레임워크든, 순수 개발 환경이든 상관없이, 사이트 로고와 메인 콘텐츠 제목을 모두 H1으로 마크업했을 때 이 문제가 발생합니다. 특히, P1 (Blogger) 환경에서 M1 (로고 H1)과 M2 (Hero H1)가 동시에 존재하는 경우는 본문에서 다룬 문제와 정확히 일치하며, 이는 3 × 1 = 3가지의 마크업 오류 시나리오 중 가장 흔하게 발견되는 경우 중 하나입니다. SEO 진단 도구(S1, S2, S3)는 이러한 마크업 오류를 감지하는 역할을 하며, 도구 자체의 종류보다는 마크업의 유효성이 문제 발생의 핵심 조건이 됩니다. 따라서 개발자는 어떤 환경에서든 의미론적 마크업 원칙을 철저히 준수해야 합니다.
문제 상황
내가 운영하는 ToolSignal Pro 블로그의 네이버 서치어드바이저(searchadvisor.naver.com)를 주기적으로 점검하던 중이었습니다. 사이트의 색인 상태와 Meta 정보는 모두 정상으로 통과했지만, SEO 섹션에서 예상치 못한 노란색 경고가 발생했습니다. 구체적으로는 'H1 요소가 2개 이상 발견되었습니다'라는 메시지였습니다. 웹 표준과 SEO 모범 사례에 따르면, 한 페이지에는 핵심 내용을 대표하는 단 하나의 H1 태그만 존재해야 합니다. 이 경고는 내 사이트의 검색 노출 품질 점수에 부정적인 영향을 미칠 수 있음을 의미했습니다. 내가 확인한 두 개의 H1 요소는 (1) 사이트 로고 영역에 있는 'ToolSignal Pro'와 (2) 홈 페이지의 Hero 섹션에 있는 시적인 문구 '지금은 불이 꺼진 게 아니라, 엔진이 과열돼서 식는 시간이다.'였습니다. 이 두 요소가 모두 H1으로 마크업 되어 있었던 것이 문제의 근본 원인이었습니다.
에러 증상
정확한 에러 증상은 네이버 서치어드바이저의 'SEO' 항목에서 노란색 삼각형 경고 아이콘과 함께 'H1 요소가 2개 이상 발견되었습니다'라는 메시지가 출력되는 것이었습니다. 이 경고는 색인 자체에는 영향을 주지 않아 사이트가 검색 엔진에 노출되지 않는 심각한 문제는 아니었지만, 검색 노출 품질 점수에는 분명히 부정적인 영향을 미칠 수 있었습니다. 내가 직접 터미널에서 curl https://[내 사이트 주소] 명령어를 실행한 후 응답 HTML에서 <h1> 태그의 개수를 정규 표현식으로 세어보니, 실제로 두 개의 <h1> 태그가 존재하는 것을 확인할 수 있었습니다. 이는 서치어드바이저의 진단이 정확하다는 것을 뒷받침하는 증거였습니다.
환경
이 문제는 내가 운영하는 블로그 플랫폼인 Blogger 환경에서 발생했습니다. 특히 Blogger의 theme.xml 파일을 직접 수정하여 테마를 커스터마이징하는 과정에서 발생한 마크업 오류였습니다. 네이버 서치어드바이저를 통해 문제를 진단했고, 라이브 사이트의 HTML 소스를 직접 확인하며 원인을 파악했습니다. Blogger는 자체적인 템플릿 언어를 사용하며, b:tag와 같은 커스텀 태그를 통해 HTML 요소를 동적으로 생성합니다. 이러한 환경적 특성 때문에 일반적인 웹사이트와는 다른 방식으로 HTML 구조를 수정해야 했습니다.
시도했지만 실패한 방법
문제를 해결하기 위해 몇 가지 방법을 시도했지만, 모두 만족스러운 결과를 얻지는 못했습니다. 첫 번째 시도는 theme.xml 파일 내의 <h1 id='h1-off'> 태그에 CSS 스타일 position:absolute;top:-9000px;display:none을 적용하여 시각적으로만 숨기는 방법이었습니다. 과거에 이러한 방식으로 시각적 중복을 해결했던 경험이 있었기 때문입니다. 하지만 이 방법은 SEO 크롤러에게는 무용지물이었습니다. 검색 엔진 크롤러는 DOM(Document Object Model)을 직접 파싱하여 HTML 구조를 분석하기 때문에, CSS로 시각적으로 숨겨진 요소라도 DOM 트리에는 여전히 존재하면 H1 태그로 인식합니다. 따라서 이 방법은 SEO 관점에서 H1 중복 문제를 해결하지 못했습니다. 두 번째 시도는 Hero 섹션의 H1 태그를 H2로 강등하는 것이었습니다. 하지만 이는 내 블로그의 디자인 원칙과 충돌했습니다. Hero 섹션의 문구는 페이지의 핵심적인 메시지를 담고 있으며, 콘텐츠의 중요도를 고려할 때 H1 태그를 사용하는 것이 적절하다는 사장님의 최종 디자인 결정이 있었기 때문입니다. 따라서 이 방법은 기술적으로는 가능했으나, 콘텐츠의 의미론적 중요성과 디자인 철학을 훼손하는 결과를 초래하여 채택할 수 없었습니다.
최종 해결
결국 나는 theme.xml 파일의 두 곳을 수정하여 문제를 해결했습니다. 핵심은 사이트 로고 영역의 마크업을 <h1>에서 의미론적으로 더 적절한 <div> 태그로 변경하는 것이었습니다. 페이지의 핵심 메시지는 Hero 섹션의 문구이므로, 이 부분만 유일한 <h1> 태그로 유지하는 것이 SEO 모범 사례와 콘텐츠의 의미론적 중요성을 모두 만족시키는 방법이라고 판단했습니다. 구체적으로, theme.xml 파일 내에서 <h1 id='h1-off'><data:title/></h1>로 되어 있던 부분을 <div id='h1-off'><data:title/></div>로 변경했습니다. 이 코드는 주로 isMultipleItems 페이지(예: 홈, 라벨 페이지)에서 사용되는 로고 영역의 마크업이었습니다. 또한, <b:tag class='blog-title' cond='data:view.isMultipleItems' name='h1'>로 되어 있던 부분의 name='h1'을 name='div'로 수정했습니다. 이 b:tag는 Blogger 템플릿 언어에서 실제 눈에 보이는 로고를 렌더링하는 부분으로, 이 변경을 통해 로고는 더 이상 H1 태그로 인식되지 않게 되었습니다. 이로써 페이지당 단 하나의 H1 태그만 존재하게 되어 네이버 서치어드바이저의 경고를 해결할 수 있었습니다.
사용한 코드 또는 프롬프트
내가 적용한 수정 사항은 theme.xml 파일 내의 특정 라인에서 <h1> 태그를 <div> 태그로 변경하는 것이었습니다. 이는 HTML의 의미론적 구조를 올바르게 재정립하여 검색 엔진 크롤러가 페이지의 핵심 콘텐츠를 정확하게 이해하도록 돕는 중요한 작업입니다. 아래 코드는 수정 전과 후의 theme.xml 코드 스니펫을 보여줍니다. 이 변경을 통해 로고는 더 이상 페이지의 주요 제목으로 간주되지 않고, Hero 섹션의 문구만이 유일한 H1 태그로서 페이지의 핵심 메시지를 대표하게 됩니다.
# theme.xml (라인 4378, 5341, 4382, 5345 부근)
# 이전 (말썽난 코드)
<h1 id='h1-off'><data:title/></h1>
<b:tag class='blog-title' cond='data:view.isMultipleItems' name='h1'>
# 수정 (바로잡은 후)
<div id='h1-off'><data:title/></div>
<b:tag class='blog-title' cond='data:view.isMultipleItems' name='div'>검증 결과 및 현재 상태
수정된 theme.xml 파일을 Blogger에 업로드한 후, CDP(Continuous Delivery Pipeline)를 통해 theme-upload 작업이 verified=true로 성공적으로 완료되었음을 확인했습니다. 라이브 사이트의 최종 크기는 288,663바이트로 변경되었습니다. 나는 라이브 사이트의 홈 페이지, 개별 포스트 페이지, 라벨 페이지에 대해 curl 명령어를 사용하여 <h1> 태그의 개수를 다시 확인했습니다. 그 결과, 홈 페이지에서는 <h1> 태그의 개수가 2개에서 1개(Hero 섹션만)로 줄어들었음을 확인했습니다. 개별 포스트 페이지에서는 원래부터 entry-title이 유일한 H1이었으므로 1개로 유지되었고, 라벨 페이지에서는 H1 태그가 없었으므로 0개로 유지되었습니다. 이로써 나의 수정이 의도한 대로 작동했음을 확신할 수 있었습니다. 현재 상태는 'fixed'이며, 네이버 서치어드바이저에 재검사를 요청하여 경고 메시지가 사라졌는지 최종 확인하는 것을 권장합니다.
같은 문제 겪는 분들에게
네이버 서치어드바이저에서 'H1 요소가 2개 이상 발견되었습니다'라는 경고를 받고 있다면, 가장 먼저 웹 페이지의 HTML 소스를 직접 확인하여 어떤 요소들이 <h1> 태그로 마크업 되어 있는지 파악해야 합니다. 특히 사이트 로고나 Hero 섹션처럼 페이지의 주요 시각적 요소들이 잘못된 의미론적 태그를 사용하고 있을 가능성이 높습니다. 페이지의 핵심 메시지를 담고 있는 단 하나의 요소만 <h1> 태그로 유지하고, 나머지 요소들은 <div>나 <h2> 등 의미론적으로 더 적절한 태그로 변경하는 것이 중요합니다. 시각적으로만 숨기는 CSS 기법은 검색 엔진 크롤러에게는 통하지 않는다는 점을 명심하십시오. HTML의 의미론적 구조를 올바르게 설계하는 것이 장기적인 SEO 성능에 매우 중요합니다. 이 글에서 내가 제시한 theme.xml 수정 방법을 참고하여, 여러분의 웹사이트에서도 유사한 문제를 해결하시길 바랍니다.