티스토리 북클럽 스킨 h1 두 개 발생하는 문제 해결 및 SEO 개선 방법

티스토리 북클럽 스킨에서 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 편집 버튼을 눌러줍니다.

그림 1. 스킨 편집 화면에서 html 편집버튼 위치
그림 1. 스킨 편집 화면에서 html 편집버튼 위치

아래에 형광펜으로 색칠해 놓은 h1 보이시나요? 블로그 링크와 블로그 타이틀이 들어가는 구간이죠. 라인 수는 각자 다를 수 있습니다.

그림 2. id="header" 내의 h1 태그 찾기
그림 2. id=”header” 내의 h1 태그 찾기

h1을 아래와 같이 div class=”blog-header”로 변경해 줍니다. </h1>도 </div>로 변경해 주셔야 합니다. html은 기본적으로 열고 닫고를 잘 해 주어야 하거든요. 당연히 검색엔진의 봇들도 html 규칙을 잘 지키는지 봅니다. 그리고 블로그 타이들이 들어가는 이곳이 아닌 다른 곳을 수정하면 엄한 곳에 수정사항이 생기니 주의해서 작업하세요.

그림 3. 북클럽 스킨 H1 태그 1개를 div class="blog-header"로 변경하기
그림 3. 북클럽 스킨 H1 태그 1개를 div class=”blog-header”로 변경하기

이제 HTML 수정은 끝났습니다. 상단의 CSS 탭을 선택합니다. Ctrl + F를 눌러서 검색창을 열고 #header h1이라고 입력하면, 5개가 검색됐다고 나옵니다. 5군데를 모두 고쳐주셔야 합니다.

그림 4. CSS에서 #header h1 찾기
그림 4. CSS에서 #header h1 찾기

#header h1을 #header .blog-header로 바꿔주시면 됩니다. #header h1이 아닌 다른 곳에 있는 h1을 고치면 안됩니다. 주의해서 작업하세요.

그림 5. CSS에서 #header h1을 #header .blog-header로 고치기
그림 5. CSS에서 #header h1을 #header .blog-header로 고치기

이제 3개를 고쳤으니 2개 더 남았죠. 찾아보겠습니다. 네 아직 2개 더 남아있다고 나오죠. 이번에는 @media screen의 max-width:1080px 아래의 #header h1을 #header .blog-header로 변경해 줍니다.

그림 6. @media screen max-width:1080px의 #header h1 찾기
그림 6. @media screen max-width:1080px의 #header h1 찾기
그림 7. @media screen max-width:1080px의 #header h1을 #header .blog-header로 변경하기
그림 7. @media screen max-width:1080px의 #header h1을 #header .blog-header로 변경하기

마지막으로 1개 더 찾아보겠습니다. 역시 1개가 남아있습니다.

그림 8. @media screen max-width:767px의 #header h1 찾기
그림 8. @media screen max-width:767px의 #header h1 찾기

이번엔 max-width:767px의 #header h1을 #header .blog-header로 변경해 줍니다.

그림 9. @media screen max-width:767px의 #header h1을 #header .blog-header로 변경하기
그림 9. @media screen max-width:767px의 #header h1을 #header .blog-header로 변경하기

다 됐습니다. 길고 긴 작업하느라 정말 고생 많으셨습니다. 이제 마지막으로 화면 우측 상단에 있는 적용 버튼 눌러서 적용해 주시면 북클럽 스킨의 H1 태그는 페이지에 하나만 유지하게 됩니다.

사실 blog-header라는 이름은 여러분이 원하는 이름으로 알아보기 쉽게 바꿔서 사용하셔도 됩니다. 대신 위에서 blog-header로 고쳤던 부분에 모두 적용해 주셔야 합니다.

티스토리 블로그에서 북클럽 스킨 사용하는데 H1 TAG가 여러개라고 하여 문제를 겪으신 분들께 도움이 되길 바랍니다.

같이 읽으면 좋은 글

블로그 등록하기 – 구글 서치 콘솔, 네이버 서치 어드바이저, 다음 검색

블로그를 만들었다면 세상에 나의 블로그를 알려야겠죠?
알리지 않으면 사람들이 찾아오기 힘듭니다.

구글, 네이버, 다음에 자신의 블로그를 등록하면 됩니다.
그래야 구글, 네이버, 다음의 봇들이 여러분의 블로그를 탐색하고 정보를 노출시켜 줍니다.

우선 구글 서치 콘솔에서 블로그를 등록할 수 있습니다.
아래 주소로 들어가서 로그인을 하신 후, “시작하기” 버튼을 누릅니다.

https://search.google.com/search-console/about

좌측 상단의 속성추가 버튼을 누르면 아래와 같은 창이 뜹니다. 이곳에 자신의 웹페이지 주소를 적어주면 됩니다. 방식은 도메인, URL 단위로 원하는 곳에 입력해서 처리하시면 됩니다.


네이버 서치 어드바이저에도 블로그를 등록합니다.
아래 주소로 들어가면 네이버 서치 어드바이저로 갑니다.

https://searchadvisor.naver.com/

우측 상단에 “웹마스터 도구” 버튼을 누릅니다.

“사이트 등록”에 자신의 블로그 URL을 적어주면 됩니다.

아래 사이트 목록에 추가되면, 해당 URL을 선택한 후, 관련 설정을 할 수 있습니다.


이제 마지막으로 다음에도 등록해야겠죠.

다음 검색 등록 페이지에 접속합니다.

https://register.search.daum.net/index.daum

신규등록하기 버튼을 눌러줍니다.

검색등록 선택에서 블로그 등록을 선택하신 후, 블로그 URL를 적어주시면 됩니다.

도움이 되셨길 바랍니다.

구글 애드센스 핀번호 인증(PIN)

구글 애드센스로 수익화를 꿈꾸는 분들이 반드시 거쳐가야 하는 과정 중 하나입니다. 수익이 USD 10을 초과하면, 구글 애드센스의 이용자 현지 주소 인증을 하게 됩니다. 구글에서 PIN번호가 적힌 우편물을 보내주면, 해당 PIN번호로 애드센스 핀번호 인증을 해야 합니다.

애드센스 핀번호 인증에 필요한 우편물 수령

구글에서 안내하는 공식문서의 절차대로, 오늘 드디어 아래와 같이 종이 우편물로 된 구글 애드센스 주소 인증 편지가 도착했습니다. 12월 6일 발송 후, 14일이 지난 12월 20일에 받았습니다. 2~4주 정도 걸릴거라고 했는데, 정확히 2주가 걸렸습니다.

그림 1. 구글 애드센스 핀번호 인증용 우편물
그림 1. 구글 애드센스 핀번호 인증용 우편물

편지를 열어보면 아래 내용과 같이 상세한 설명과 함께 PIN 번호가 적혀있습니다.

그림 2. 구글 애드센스 PIN 번호
그림 2. 구글 애드센스 PIN 번호

구글 애드센스 PIN 번호 인증

구글 애드센스에 들어가서, 아래의 6자리 인증 PIN 자리에 입력해 주고 제출버튼 누르면 끝납니다.

그림 3. 구글 애드센스 PIN 인증 화면: 본인 확인
그림 3. 구글 애드센스 PIN 인증 화면: 본인 확인

난생 처음 애드센스 주소 인증이라는 걸 경험하다보니, 처음에 이게 뭐지? 주소 인증이라고? 어떻게 되는 거지? 했는데, 결국 알아보고 기다려본 후 알게된 내용입니다.

정리하면, 구글 애드센스 주소 인증을 할 때가 되면 드디어 수익이 USD 10을 넘겼구나 싶은 마음으로 PIN이 담긴 우편물을 기다렸다가, 우편물이 도착했을 때 PIN 번호를 사용해서 인증하면 됩니다.

구글 애드센스로 주소 인증 처음 해 보시는 분들께 도움이 되길 바랍니다.

같이 읽으면 좋은 글