3 min read · 746 words
#540
이 글은 Blogger 라벨 페이지에서 H1 태그 중복으로 인해 SEO와 사용자 경험 사이에서 고민하는 분들을 위한 기록입니다. visually-hidden CSS 기법을 활용하여 이 문제를 깔끔하게 해결하는 방법을 바로 제시합니다.
문제 상황
내가 운영하는 블로그의 라벨 색인 페이지에서 H1 태그가 시각적으로 중복되어 나타나는 문제가 발생했습니다. 특히, 'AI 파헤치기'와 같은 라벨명을 가진 페이지에서, 페이지 상단에 라벨명이 두 번 표시되는 현상이었습니다. 이는 네이버 SEO 가이드라인에 따라 H1 태그를 페이지당 하나로 유지하기 위해 내가 추가했던 커스텀 H1 태그와, 기존 테마의 라벨명 표시 요소가 충돌하면서 발생한 것이었습니다. 시각적으로 불필요한 중복은 사용자 경험을 저해할 수 있다는 사장님의 피드백을 받아 해결책을 모색하게 되었습니다.
에러 증상
라벨 페이지 상단에 동일한 라벨명이 두 번 노출되는 것이 주된 증상이었습니다. 예를 들어, 'AI 파헤치기' 라벨 페이지에 접속하면, 페이지 제목 영역에 'AI 파헤치기'라는 텍스트가 큰 글씨로 한 번 나타나고, 그 아래에 다시 'AI 파헤치기'라는 텍스트가 화살표 아이콘과 함께 또 나타나는 식입니다. 이는 DOM 상으로는 H1 태그가 하나였지만, 시각적으로는 두 개의 라벨명이 중복되어 보이는 상황이었습니다.
환경
내가 겪은 문제는 Blogger 플랫폼의 커스텀 테마 환경에서 발생했습니다. 구체적으로는 `theme.xml` 파일을 직접 수정하여 SEO 최적화를 진행하는 과정에서 발생한 것이며, CDP(Content Delivery Platform)의 `html_edit` 기능을 활용하여 특정 HTML 요소를 동적으로 변경하는 로직이 관련되어 있었습니다. 특히 네이버 검색엔진 최적화(SEO)를 위해 H1 태그를 페이지당 하나로 명시적으로 지정하려는 노력이 이 문제의 원인이 되었습니다.
시도했지만 실패한 방법
이 문제를 해결하기 위해 몇 가지 방법을 시도했지만, 각각의 방법은 다른 문제를 야기하거나 근본적인 해결책이 되지 못했습니다.
첫 번째 시도는 내가 추가했던 커스텀 H1 태그(`sess145-label-h1`)를 통째로 삭제하는 것이었습니다. 하지만 이 방법은 네이버 SEO에서 H1 태그가 사라져 검색 엔진 최적화에 악영향을 줄 위험이 있었기 때문에 포기했습니다. H1 태그는 페이지의 핵심 주제를 검색 엔진에 알리는 중요한 요소이므로, 이를 제거하는 것은 바람직하지 않다고 판단했습니다.
두 번째 시도는 기존 테마에서 라벨명을 표시하던 `queryMessage` 스팬(span) 태그를 H1 태그로 직접 교체하는 것이었습니다. 그러나 이 방법은 해당 스팬 태그에 적용되어 있던 다른 CSS 스타일이나 JavaScript 의존성과의 충돌을 일으킬 가능성이 높았습니다. 기존 테마의 복잡한 구조를 건드리는 것은 예상치 못한 부작용을 초래할 수 있어, 보다 안전한 방법을 찾아야 했습니다.
최종 해결
내가 최종적으로 선택한 해결책은 기존의 `sess145-label-h1` H1 태그는 그대로 유지하되, 이 태그에 `visually-hidden` CSS 스타일을 적용하여 시각적으로만 숨기는 것이었습니다. 이 방법은 DOM 상에는 H1 태그가 여전히 존재하여 Google 및 네이버 SEO에서 페이지의 핵심 H1 태그로 인식되도록 하면서도, 사용자에게는 중복된 라벨명이 보이지 않도록 하는 두 마리 토끼를 잡는 전략입니다. `visually-hidden` 스타일은 요소를 화면 밖으로 이동시키거나 크기를 1px로 줄여 시각적으로는 보이지 않게 하지만, 스크린 리더와 같은 보조 기술에는 여전히 접근 가능하게 하여 웹 접근성 측면에서도 문제가 없습니다. 내가 이 방법을 통해 SEO와 시각적 깔끔함이라는 상충되는 요구사항을 동시에 만족시킬 수 있었습니다.
사용한 코드 또는 프롬프트
내가 적용한 코드는 CDP의 `html_edit` 기능을 활용하여 특정 H1 태그의 인라인 스타일을 변경하는 방식입니다. 기존에 H1 태그에 적용되어 있던 시각적인 스타일을 `visually-hidden` 속성으로 대체하여, DOM에는 존재하지만 화면에는 보이지 않도록 처리했습니다.
# Blogger theme.xml 또는 CDP html_edit 스크립트
# 이전 (말썽난 코드)
h = h.replace(
"<h1 class='sess145-label-h1' style='font-size:22px;font-weight:700;color:#333;margin-bottom:10px;'>",
"<h1 class='sess145-label-h1' style='position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)'>"
)
# 수정 (바로잡은 후)
h = h.replace(
"<h1 class='sess145-label-h1' style='font-size:22px;font-weight:700;color:#333;margin-bottom:10px;'>",
"<h1 class='sess145-label-h1' style='position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)'>"
)
# 참고: 검색/아카이브 페이지의 H1은 별도 처리 없이 visible 유지됩니다.검증 결과 및 현재 상태
수정된 코드를 배포한 후, 라벨 페이지에 대한 라이브 fetch 테스트를 진행했습니다. 그 결과, DOM 상의 H1 태그 개수는 여전히 1개로 유지되어 SEO 측면에서는 문제가 없음을 확인했습니다. 동시에, `visually-hidden` 스타일이 성공적으로 적용되어 라벨 페이지 상단에 중복되던 라벨명 중 하나가 시각적으로 사라지고, 기존 테마의 `queryMessage` 요소만 단독으로 표시되는 것을 확인했습니다. 내가 테스트한 모든 9가지 페이지 유형에서 H1 태그가 정확히 1개로 유지되는 것을 확인했으며, 현재 이 문제는 완전히 해결(fixed)된 상태입니다.
같은 문제 겪는 분들에게
Blogger나 다른 CMS 환경에서 라벨(또는 카테고리) 색인 페이지의 H1 태그 중복 문제로 인해 SEO와 시각적 사용자 경험 사이에서 고민하고 계신다면, `visually-hidden` CSS 기법을 활용하는 것을 강력히 추천합니다. 이 방법은 DOM 구조를 크게 변경하지 않으면서도 검색 엔진 최적화와 사용자 인터페이스의 깔끔함을 동시에 확보할 수 있는 매우 효과적인 해결책입니다. 특히, 기존 테마의 복잡한 CSS/JS 의존성 때문에 직접적인 HTML 구조 변경이 어려운 경우에 유용합니다. 내가 제시한 코드 스니펫을 참고하여 H1 태그에 `position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)`와 같은 스타일을 적용해 보십시오. 이 CSS 속성들은 요소를 시각적으로 숨기지만, 검색 엔진 크롤러나 스크린 리더에게는 여전히 내용을 전달합니다.