네이버서치어드바이저 '<H1> 요소가 2개 이상 발견' 해결 방법

네이버 서치어드바이저 검색엔진 최적화(SEO) 기본 가이드 중에는 H1 요소를 문서 당 하나로 권장하고 있습니다. 그런데 이것이 잘 지켜지지 않게되면 그 문서는 '<H1> 요소가 2개 이상 발견'이라고 진단되고, 이것은 네이버 검색로봇이 이해하기 어려운 구조의 문서라는 의미가 됩니다.
이럴 때 어떻게 해결할 수 있는지 제가 사용한 방법을 소개해보겠습니다.
 

≣ 목차

1. <H1> 요소란
2. 네이버 서치어드바이저 사이트 진단
3. <H1> 요소가 2개 이상 발견 해결 방법
   1. HTML 수정
   2. CSS 수정
4. 적용여부 확인 방법

 

<H1> 요소란

우리가 티스토리에서 글을 작성할 때 보면 아래처럼 문단 모양을 선택할 수 있습니다.

제목 1~3, 본문 1~3까지로 구성되어 있는데요, 이는 단순 글씨 크기 차이가 아닙니다.
 
제가 지금 쓰고있는 글도 HTML 모드로 열어보면

이렇게 H와 P태그로 구성되어 있는 것을 볼 수 있습니다.
 
이렇듯, 제목은 H~로 시작하는 태그명인데요,
우리가 선택할 수 있는 제목 문단의 이름을 태그로 나타내보면
제목 1 > H2
제목 2 > H3
제목 3 > H4
입니다.
 
H1은 그럼 무엇일까요?
네이버 서치어드바이저의 SEO 가이드에서는 이렇게 이야기하고 있습니다.

H1 요소는 콘텐츠를 나타내는 제목을 말하는 것입니다.
 

네이버 서치어드바이저 사이트 진단

제 티스토리 사이트는 네이버 검색엔진에 어떻게 평가되고 있을지 궁금하여 네이버 서치어드바이저 사이트 진단을 해보았습니다.
(네이버 서치어드바이저 접속 > 리포트 > 사이트 진단)

 
접속하였더니 유형별 진단정보 중

'<H1> 요소가 2개 이상 발견'이 된 URL이  9개나 있었습니다.
 
그중 하나의 URL을 검사해 보니

 제 블로그 이름과 게시물 제목이 각각 H1 태그로 확인되었습니다.
 

<H1> 요소가 2개 이상 발견 해결 방법

저는 현재 티스토리 북클럽 스킨을 사용하고 있습니다. 알아보니 이 북클럽 스킨이 블로그 이름도 H1 태그로 선언되어 있기 때문에 검색엔진에서 H1 요소가 2개로 검출되는 것이었습니다.
 
이 문제를 해결하기 위해서는 스킨 설정을 간단하게 바꿔주어 해결할 수 있습니다.
제가 처리한 방법을 소개해보겠습니다.
 
우선 스킨편집 메뉴로 들어가서 html 편집을 클릭합니다.

 
여기서 각각 HTML과 CSS을 일부 수정해 주면 되는데요,
우선 HTML부터 수정하겠습니다.
 

HTML 수정

HTML 탭에서 키보드 'Ctrl+F' 키를 눌러 '##_title_##'을 검색합니다.

그럼 이처럼 h1으로 선언되어 있는 것을 확인할 수 있는데요, 이것을 아래와 같이  p태그로 변경하여 '적용' 버튼을 눌러 저장합니다.

 

CSS 수정

CSS 탭을 클릭하여 마찬가지로 '키보드 'Ctrl+F' 키를 이용해 '#header h1'을 검색합니다.

검색해서 나오는 항목 모두 p로 변경하여 적용합니다.

 

적용여부 확인 방법

위처럼만 설정을 변경해 주면 완료입니다. 이걸 적용한 뒤 내 게시물에서 직접 잘 적용되었는지 확인할 수 있습니다.
 
크롬 기준입니다.
아무 게시물이나 들어간 뒤 키보드 'F12'를 눌러주세요.
그럼 개발자 도구가 우측에 활성화됩니다.
새로고침(F5)을 한번 눌러주세요.
 
그리고 Ctrl+F키를 이용해 'h1'태그를 확인해 줍니다.

이렇게 확인해 보면 h1 태그는 게시물 이름에만 적용이 되어있는 것을 확인할 수 있습니다.

읽어주셔서 감사합니다.