티스토리 북클럽 스킨에서 H1 태그 두 개 나와서 SEO 관련 문제를 겪는 분들 계시죠? 북클럽 스킨 H1 태그가 2개 생기는 원인과 해결 방법까지 모두 알려드리겠습니다.
목차
북클럽 스킨 H1 태그가 2개인 원인
북클럽 스킨에서 H1 태그가 2개 나오는 것은, 버그로 보입니다. 명백하게 스킨 제작 단계에서 H1 태그와 관련한 SEO 이슈를 고려하지 않고 만들어서 생긴 부분인데, 아직도 해당 문제를 겪는 분들이 계신 걸 보면 티스토리에서 딱히 개선을 하고 있지는 않은 것 같습니다. 혹시 모르죠 운이 좋으면 티스토리에서 업데이트를 해서 문제를 해결해 줄 수도 있습니다.
그나저나 도대체 H1 태그는 무엇이며 왜 2개 이상이 되면 안되는 것인지, 그 이유를 알아보도록 하겠습니다.
H1 태그가 2개 이상이 되면 안되는 이유
기본적으로 검색 엔진들은 웹 페이지를 Bot이 크롤링해서 분석합니다. 당연히 Bot이 HTML을 분해해서 분석합니다. 이 페이지의 구조가 잘 만들어졌는지, 짜임새가 있는지 분석하고 평가합니다.
HTML 태그에서 H1~H6 태그는 6단계의 위계를 갖는 제목을 의미합니다. 그런데 h1이 2개라면 무슨 일이 생길까요? 원래 하나의 웹 페이지는 하나의 큰 제목 하에 구성돼야 합니다. 그런데 2개의 제목으로 구성된 것으로 파악합니다. 그러면 첫번째 H1 태그가 더 이 페이지를 잘 설명하는 태그인지, 아니면 두번째 H1 태그가 더 중요한지 크롤러는 파악하기 어려워집니다. Mozilla의 <h1>–<h6>: HTML 구획 제목 요소 Document에서도 페이지의 목적을 가장 잘 설명하는 H1 태그는 1개를 사용할 것을 권장하고 있습니다.
쉽게 말해서 검색엔진은 H1 태그가 1개가 아닌 문서에게 좋은 점수를 주지 않습니다. 즉, 좋은 문서가 아니라는 말이죠.
결론적으로 H1 태그가 여러 개인 문서는 검색 엔진에서 좋은 평가를 받을 수 없습니다. 따라서 H1 태그가 2개 이상 사용되면 해당 페이지는 검색 결과에 노출될 확률이 줄어듭니다. 특히 수익형 블로그를 하고 있고, 검색엔진의 검색에서 뒤로 밀리지 않고 싶다면, 최소한 H1 태그는 해당 페이지에서 하나만 작동하도록 해야 합니다.
그러면 이제 문제점을 파악했으니, 해결방법을 확인하고 아래의 가이드를 따라 직접 수정해 보시기 바랍니다.
해결방법 가이드
티스토리 블로그 관리자 페이지에서 스킨 편집으로 들어갑니다.
오른쪽 화면에서 HTML 편집 버튼을 눌러줍니다.
아래에 형광펜으로 색칠해 놓은 h1 보이시나요? 블로그 링크와 블로그 타이틀이 들어가는 구간이죠. 라인 수는 각자 다를 수 있습니다.
h1을 아래와 같이 div class=”blog-header”로 변경해 줍니다. </h1>도 </div>로 변경해 주셔야 합니다. html은 기본적으로 열고 닫고를 잘 해 주어야 하거든요. 당연히 검색엔진의 봇들도 html 규칙을 잘 지키는지 봅니다. 그리고 블로그 타이들이 들어가는 이곳이 아닌 다른 곳을 수정하면 엄한 곳에 수정사항이 생기니 주의해서 작업하세요.
이제 HTML 수정은 끝났습니다. 상단의 CSS 탭을 선택합니다. Ctrl + F를 눌러서 검색창을 열고 #header h1이라고 입력하면, 5개가 검색됐다고 나옵니다. 5군데를 모두 고쳐주셔야 합니다.
#header h1을 #header .blog-header로 바꿔주시면 됩니다. #header h1이 아닌 다른 곳에 있는 h1을 고치면 안됩니다. 주의해서 작업하세요.
이제 3개를 고쳤으니 2개 더 남았죠. 찾아보겠습니다. 네 아직 2개 더 남아있다고 나오죠. 이번에는 @media screen의 max-width:1080px 아래의 #header h1을 #header .blog-header로 변경해 줍니다.
마지막으로 1개 더 찾아보겠습니다. 역시 1개가 남아있습니다.
이번엔 max-width:767px의 #header h1을 #header .blog-header로 변경해 줍니다.
다 됐습니다. 길고 긴 작업하느라 정말 고생 많으셨습니다. 이제 마지막으로 화면 우측 상단에 있는 적용 버튼 눌러서 적용해 주시면 북클럽 스킨의 H1 태그는 페이지에 하나만 유지하게 됩니다.
사실 blog-header라는 이름은 여러분이 원하는 이름으로 알아보기 쉽게 바꿔서 사용하셔도 됩니다. 대신 위에서 blog-header로 고쳤던 부분에 모두 적용해 주셔야 합니다.
티스토리 블로그에서 북클럽 스킨 사용하는데 H1 TAG가 여러개라고 하여 문제를 겪으신 분들께 도움이 되길 바랍니다.
안녕하세요 알려주신 방법으로 문제가 해결되었는데
작성된 글을 눌렸을때 글상단에 제목(blog-header)왼쪽 끝단으로 쏠려버리는 현상이 발생하는데
도움주셨으면 좋겠습니다. (pc화면입니다.)
댓글로는 한계가 있으니 메일 드리겠습니다.