티스토리 블로그를 네이버 서치어드바이저에 등록해 운영하다 보면 색인은 정상인데 SEO 항목에 경고가 나타나는 경우가 있습니다. 최근 제가 운영하는 티스토리 블로그에서도 <H1> 요소가 2개 이상 발견됐다는 메시지가 표시됐습니다.
처음에는 게시글 작성 방법에 문제가 있는 줄 알았습니다. 하지만 실제 HTML 구조를 하나씩 확인해 보니 원인은 게시글 본문이 아니라 티스토리 스킨의 블로그 제목 구조에 있었습니다. 이번 글에서는 실제로 오류를 확인하고 수정한 과정을 순서대로 정리해보겠습니다.
색인은 정상인데 SEO 경고가 나타난 이유
네이버 서치어드바이저의 색인 상태 확인 화면을 보면 색인과 Meta 항목은 정상으로 표시됐습니다. 그런데 SEO 부분만 경고 표시가 나타났습니다.
상세 내용을 펼쳐보니 한 페이지에서 H1 요소가 두 개 확인됐다는 내용이었습니다. 제가 확인한 블로그에서는 다음처럼 표시됐습니다.
- 블로그 이름
- 전체 글 목록 제목
다른 티스토리 블로그에서도 동일한 현상이 나타났습니다. 즉 특정 게시글 하나의 문제가 아니라 스킨에서 블로그 이름 자체를 H1 태그로 표시하고 있었던 것이 원인이었습니다.
H1 태그가 무엇인지 간단히 알아보기
H1은 HTML 문서에서 가장 중요한 제목을 나타낼 때 사용하는 태그입니다. 게시글 페이지라면 일반적으로 게시글 제목이 대표 제목 역할을 합니다.
그런데 스킨의 블로그 이름까지 H1으로 지정돼 있으면 게시글 제목이나 목록 제목과 함께 여러 개의 H1이 만들어질 수 있습니다. 네이버 서치어드바이저가 바로 이 부분을 확인해 경고를 표시한 것입니다.
티스토리 HTML에서 블로그 이름 구조 찾기
수정은 티스토리 관리자 화면에서 진행했습니다.
블로그 관리 → 꾸미기 → 스킨 편집 → HTML 편집 순서로 이동합니다.
HTML 코드 영역을 클릭한 후 검색 기능을 이용해 다음 부분을 찾습니다.
<header id="header">조금 아래를 살펴보면 블로그 이름을 표시하는 코드가 있습니다. 제가 사용한 스킨에서는 다음과 비슷한 구조였습니다.
<h1>
<a href="https://inf.prosimin.com/">
<s_if_var_logo>
<img src="" alt="정보시민">
</s_if_var_logo>
<s_not_var_logo>
정보시민
</s_not_var_logo>
</a>
</h1>블로그 이름을 H1에서 제외하는 방법
중간에 있는 블로그 링크나 로고 관련 코드는 그대로 두고 바깥쪽 태그만 수정했습니다.
기존 시작 태그
<h1>변경 후
<div class="blog-title">그리고 기존 종료 태그
</h1>을 다음과 같이 변경했습니다.
</div>최종적으로는 아래와 같은 구조가 됩니다.
<div class="blog-title">
<a href="https://inf.prosimin.com/">
<s_if_var_logo>
<img src="" alt="정보시민">
</s_if_var_logo>
<s_not_var_logo>
정보시민
</s_not_var_logo>
</a>
</div>여기서 주의할 점은 다른 H1을 무작정 삭제하면 안 된다는 것입니다. 블로그 이름을 감싸고 있는 H1만 변경해야 합니다.
HTML만 바꾸면 디자인이 달라질 수 있다
HTML을 수정한 뒤에는 CSS도 함께 확인해야 합니다. 기존 스킨은 블로그 제목 디자인을 H1을 기준으로 적용하고 있기 때문입니다.
CSS 편집 화면에서 다음 항목을 검색했습니다.
#header h1찾은 항목은 기존 디자인 값을 그대로 유지하면서 선택자 이름만 변경했습니다.
#header h1
→
#header .blog-title링크 부분도 동일하게 변경합니다.
#header h1 a
→
#header .blog-title a로고 이미지에 적용된 부분이 있다면 다음처럼 수정합니다.
#header h1 img
→
#header .blog-title img모바일용 CSS도 반드시 확인
여기에서 한번 더 확인해야 할 부분이 있었습니다. CSS 아래쪽의 반응형 설정에도 #header h1이 추가로 사용되고 있었습니다.
따라서 PC 화면에 적용되는 CSS만 고치는 것이 아니라 모바일용 미디어 쿼리 영역까지 검색해서 같은 방식으로 변경했습니다.
마지막으로 다시 #header h1을 검색해 검색 결과가 0개인지 확인했습니다.
수정 후 블로그 화면부터 확인
스킨 코드를 변경할 때 가장 걱정되는 부분은 디자인이 깨지는 것입니다. 저도 HTML과 CSS를 수정한 뒤 실제 블로그 첫 화면을 바로 확인했습니다.
블로그 이름의 글꼴과 크기, 메뉴 위치, 게시글 목록이 기존과 동일하게 표시되는지 확인한 뒤 네이버 서치어드바이저에서 다시 수집 요청을 진행했습니다.
네이버 서치어드바이저에서 최종 결과 확인
재수집 후 색인 상태를 다시 검사했습니다. 기존에 표시됐던 <H1> 요소가 2개 이상 발견 항목이 사라졌습니다.
색인과 Meta도 정상 상태를 유지했고, 같은 구조를 사용하던 다른 티스토리 블로그에서도 동일한 방법으로 H1 중복 문제를 해결할 수 있었습니다.
본문에 게시글 제목을 다시 넣어야 할까?
이번 작업을 하면서 기존 게시글도 함께 살펴봤습니다. 티스토리 글쓰기 화면 위쪽에 입력하는 게시글 제목은 그대로 유지해야 합니다.
다만 본문 첫 부분에서 동일한 게시글 제목을 다시 한 번 크게 표시하고 있다면 굳이 반복해서 넣을 필요는 없습니다.
예를 들어 제목 입력란에 이미 경복궁 경회루·향원정 특별관람 예약 방법이라고 입력했다면 본문에서 같은 문장을 다시 제목으로 사용하는 대신 바로 소개 문장으로 시작하는 방식이 더 깔끔합니다.
이후 본문 내용은 제목1, 제목2 등을 활용해 정보의 단계를 구분해 주는 것이 좋습니다.
티스토리 H1 중복 오류 해결할 때 체크할 사항
- 네이버 서치어드바이저에서 실제로 감지된 H1 문구를 먼저 확인하기
- 스킨 HTML에서 블로그 이름을 감싸는 H1 위치 찾기
- 블로그 이름 H1 만 div 등으로 변경하기
- CSS의 #header h1 관련 선택자도 함께 수정하기
- 모바일용 반응형 CSS까지 확인하기
- 적용 후 PC와 모바일 화면이 깨지지 않았는지 확인하기
- 네이버 서치어드바이저에서 다시 수집 요청하기
마무리
네이버 서치어드바이저에 H1 관련 경고가 나타난다고 해서 기존 게시글 전체를 수정할 필요는 없었습니다.
저의 경우 문제의 핵심은 티스토리 스킨에서 블로그명과 콘텐츠 제목이 동시에 H1으로 사용된 것이었습니다. 블로그명을 표시하는 HTML 태그와 이에 연결된 CSS를 함께 정리하자 화면 디자인은 그대로 유지하면서 SEO 경고를 없앨 수 있었습니다.
같은 경고를 보고 있다면 게시글을 먼저 수정하기보다는 서치어드바이저에서 어떤 문구가 H1으로 감지되고 있는지부터 확인해 보는 것이 좋겠습니다. 스킨 구조를 정확히 확인한 다음 필요한 부분만 수정하는 것이 가장 안전합니다.
#티스토리SEO #H1태그 #H1중복 #네이버서치어드바이저 #티스토리검색노출 #네이버SEO #티스토리스킨 #블로그SEO #티스토리HTML #검색엔진최적화