티스토리 북클립 스킨 h1 태그 중복 문제 해결 방법: 2개 이상의 h1 태그

티스토리 블로그를 하다 보니 이것저것 알아볼 부분도, 문제를 해결해야 하는 부분도 늘어나는 것 같습니다. 얼마 전 Bing에서 사이트 검사를 했는데 2개 이상의 h1 태그가 문제된다는 항목을 보았습니다. 이것은 티스토리 블로그를 하시는 분들이 가장 많이 사용하는 북클립 스킨에서 일어나는 현상이라고 합니다.

 

그렇다면 h1 태그가 중복되면 무엇이 문제이기에 수정해야 하는 걸까요?

 

h1 태그는 제목역할을 하는 태그입니다. 이러한 h1 태그가 2개 이상일 경우 검색엔진들이 웹페이지를 크롤링하고 분석할 때 블로그의 제목이 2개라고 인식하게 되어 어떤 것이 중요한지 파악하기 어려워집니다. 그렇기에 검색엔진에 블로그를 명확하게 설명하고 검색엔진에서 좋은 평가를 받기 위해서는 h1 태그를 1개만 넣는 것이 바람직합니다. 간단하게 수정할 수 있는 방법이 있으니 아래 설명드리겠습니다.

 

h1 태그 중복 문제 해결 방법

1. 블로그관리 홈 > 꾸미기 > 스킨 편집 버튼을 클릭합니다.

2. 스킨 편집 화면에서 html 편집 버튼을 클릭합니다.

 

h1 태그 중복 문제 해결

 

3. 윈도우: ctrl + f, 맥: command + f를 눌러서 <h1>을 검색합니다.

 

h1 태그 중복 문제 해결

 

4. h1 태그를 p 또는 div 태그로 바꿔줍니다.

5. 바꾼 태그에 class를 넣고 적용 버튼을 클릭합니다.

 

마크업에 익숙하신 분들은 원하시는 태그로 넣어주시면 되지만 처음 접해보신다면 둘 다 크게 상관없으니 편하게 p를 사용하시는 걸 추천드립니다. 대신, 태그만 넣기에는 혹여나 있을 코드 충돌을 예방하기 위해 class를 추가로 넣어줬습니다. class는 원하시는 걸 넣어도 되지만 전체 페이지에서 중복이 없는 class명을 선택합니다. 저는 header-title을 넣어줬습니다.

 

h1 태그에 넣을 class

 

6. CSS 탭으로 이동하여 #header h1을 검색합니다.(검색결과 총 5개)

7. 5개의 검색결과에서 h1 부분을 class 명으로 수정 후 적용 버튼을 클릭합니다.

 

class를 css에 넣을때는 .을 이름 앞에 붙여줍니다. 예시는 #header .header-title입니다.

 

h1 태그 수정

 

8. 적용 후 포스팅 된 게시글에서 개발자 도구를 열어 h1을 검색합니다.

 

개발자도구 단축키(윈도우: ctrl + f12, 맥: command + option + i)를 누르면 화면이 나옵니다. 검색결과 h1 태그가 1개만 나오는 것을 확인할 수 있습니다.

 

티스토리 h1 태그 중복 문제 해결

 

충돌 없이 간단하게 h1 태그가 2개 이상 나오는 중복 현상을 해결할 수 있습니다. 복잡해 보이지만 차근차근하다 보면 크게 어려운 부분이 없으니 오늘 소개드린 방법으로 티스토리 h1 태그 중복 문제를 해결하시길 바랍니다.

 

 

함께 보면 좋은 글

• 티스토리 모바일 구글 애드센스 배너 광고가 잘리거나 안 보일때 해결 방법
• 티스토리 직접유입과 기타유입은 무엇인가?
• 티스토리 조회수와 방문자수 차이점
• 티스토리 스팸 댓글 휴지통 보내기 사용하는게 좋을까?