티스토리 북클럽 스킨 h1 태그 2개 오류 해결 방법

티스토리 블로그를 사용자라면 북클럽 스킨을 가장 많이 사용할 것이다. 블로그를 활성화하면 검색 최적화에 맞게 조금씩 수정해야 한다. 그중 "h1 태그가 2개입니다."라는 문제가 발생한다. 북클럽 스킨에서 h1 태그가 2개가 노출되어 좋은 웹문서로 평가받지 못할 수 있는 문제다. 이런 문제가 발생되는 원인과 문제 해결 방법에 대해 소개해 보겠다.

 

목차

티스토리 북클럽 스킨 h1 태그 2개 오류 해결 방법

본문에는 북클럽 스킨의 h1 태그가 2개 설정되어 있는 원인에 대하여 자세히 알아볼 것이다. 또한, h1 태그의 중요성, 중복을 확인하는 방법, 최종적으로 오류를 해결하는 방법을 설정할 것이다. 이미지를 확인하면서 오류를 해결하는 것이 좋다.

 

북클럽 스킨 h1 태그가 2개 설정된 원인

🔽 티스토리 블로그에서 SEO 업데이트에 따라 이전에 제작된 북클럽 스킨은 문제가 될 수 있다. 아직까지 업데이트가 되지 않았지만 사용자가 많아지면서 똑같은 문제를 겪고 있기 때문에 언젠가는 업데이트가 될 것이라고 기대된다. h1 태그가 2개인 이유는 블로그의 타이틀과 게시글의 타이틀이 모두 h1으로 구성되어 있기 때문이다.

 

h1 태그가 중요성

🔽 SEO를 배우면서 중요하게 생각되는 것이 h1 태그라는 사실은 모두가 알고 있다. 그중 대표적인 중요한 이유 3가지를 예로 설명해 보려 한다. 

1. 검색 엔진은 웹페이지 bot을 활용 크롤링 분석한다.
   • 이유는 이러하다. bot을 의미하는 것은 Robot.txt이다. 검색봇이 웹페이지의 허용/비허용 등을 제어, 명령, Html을 분석, 텍스트, 이미지를 분석하는 작업을 한다. 그래서 당연히 bot에게 구조적이고 짜임새가 있는지를 평가받게 되는데 최대한 잘 알아볼 수 있도록 우리는 구성해야 한다.
2. Html 태그, h1~h6 태그는 6단계 위계를 갖는 제목이다.
   • 글의 구성은 번호가 낮을수록 상위에 쓰이는 대제목이라고 표현된다. h1의 경우 글의 제목(타이틀)이며 하나의 웹페이지를 구성하는 것에 가장 큰 제목이라고 볼 수 있다.
   • h1 태그가 2개라면 2개의 큰 제목을 갖고 있는 사이트라고 분석, 어떤 제목이 크고 중요한지를 bot이 파악하기가 어려워진다. 페이지의 목적을 가장 잘 설명하는 큰 제목은 1개를 사용하는 것을 권장한다.
3. 만약, h1 태그가 2개라면 좋은 문서라는 평가를 받지 못한다.
   • 검색 엔진에서 좋은 평가를 받아야 상위에 노출 확률이 올라간다. 특히 수익형 블로그를 운영 중이라면 검색 엔진이 상위노출은 가장 중요한 결과다. h1 태그는 각 페이지에서 하나만 작동하는 것이 SEO에 유리하다.

 

h1 태그 중복을 확인하는 방법

🔽 북클럽 스킨 사용자라면 스킨의 태그는 파악해야 한다. 이미지를 참고하여 개발자 모드에서 수정을 진행한다.

1. 자신의 블로그에 들어가서 F12(개발자 모드)에 접속, [Ctrl]+[f]를 눌러 검색 "<h1>"을 검색하여 2개가 나온다면 h1 태그가 2개로 생겨 있다는 것을 알 수 있다.
   • Window 운영체제: [F12](개발자 모드) 접속 ➜ html 작성된 위치를 포커싱 ➜ [Ctrl]+[f] 눌러 "<h1>"이라고 입력.
   • Mac 운영체제: [Command]+[option]+[i] (개발자 모드) 접속 ➜ html 작성된 위치를 포커싱 ➜ [Command]+[f] 눌러 "<h1>"이라고 입력. 

 

오류 해결 방법

🔽 공통적으로 들어가는 <h1> 태그를 수정하여 해결한다. 이미지를 참고하자.

👉 HTML 변경. <h1> ➜ <div class="blog-header">

<h1>

<div class="blog-header">

1. 티스토리 블로그에서 "스킨 편집" 선택.
2. "Html 편집" 선택.
3. "Html" 선택.
4. "<h1>" 위치로 이동, [Ctrl]+[f]를 눌러 "<h1>"을 찾아 이미지와 같이 변경.
   • <h1> ➜ <div class="blog-header"> 변경

 

👉 CSS 변경. #header h1 ➜ .blog-header

#header h1

.blog-header

1. 티스토리 블로그에서 "스킨 편집" 선택.
2. "Html 편집" 선택.
3. "Html" 선택.
4. "#header h1" 위치로 이동, [Ctrl]+[f]를 눌러 "#header h1"을 찾아 이미지와 같이 변경.
   • #header h1 ➜. blog-header 3곳 변경.
5. "#header h1" 위치로 이동, [Ctrl]+[f]를 눌러 "#header h1"을 찾아 이미지와 같이 변경.
   • #header h1 ➜. blog-header 변경.
6. "#header h1" 위치로 이동, [Ctrl]+[f]를 눌러 "#header h1"을 찾아 이미지와 같이 변경.
   • #header h1 ➜. blog-header 변경.

 

결론

🔽 위와 같이 북클럽 스킨의 h1 태그 2개 노출되는 문제를 해결하였다. 문제가 되는 부분을 수정할 때 꼭 #header h1으로 검색하는 것이 좋다. 총 5개를 수정하여 문제를 해결하는 것에 도움이 되었으면 하는 바람이다. 티스토리 블로그를 운영하는 사용자라면 함께 문제를 해결하고 도움을 주고받는 것은 매우 유익하다.