오늘은 블로그를 운영하는 많은 분들이 겪어봤을 것으로 생각되는 문제에 대해 다뤄보겠다.
참고로 나는 이 문제에 대해서 다른 블로거들이 내놓은 해결 방법과는 다른 방법으로 해결했다.
티스토리 블로거들의 경우에는 블로그 이름에 사용되는 h1 태그를 아무런 의미도 없는 p 태그로 고쳐버리는 방법으로 해결하는 것을 보았다.
이건 SEO 측면에서 그렇게 좋은 해결 방법은 아니다.
참고로 지금부터 소개할 방법은 티스토리 블로그에는 적용할 수 없는 방법이고, 무료 블로그 중에는 구글 블로그에서만 적용할 수 있는 방법이니, 구글 블로그를 운영하는 분들 중에서 같은 문제를 겪고 있는 사람들은 다른 글이 아닌 이 글을 봐줬으면 좋겠다.
네이버 서치 어드바이저에서 'H1 요소가 2개 이상 발견'이라는 문제가 떴다
검색을 통해 이 글을 보러 온 분들도 이 문제 때문에 여기에 왔을 거다.
네이버 서치 어드바이저에서 '<H1> 요소가 2개 이상 발견'이라는 문제가 떠있다.
이 문제가 왜 생기는 것인지 아래의 이미지들과 함께 살펴보자.
블로그가 열려있는 브라우저에서 [F12] 키를 눌러 개발자 도구를 열고 블로그의 이름이 표시되는 부분에 어떤 태그가 사용되고 있는지 확인해 보자.
<h1> 태그가 사용되고 있다.
이번에는 포스트의 제목에 어떤 태그가 사용되고 있는지 확인해 보자.
역시 마찬가지로 h1 태그가 사용되고 있다.
네이버 서치 어드바이저에서 '<H1> 요소가 2개 이상 발견'이라는 문제가 떴을 때부터 이 두 부분에서 h1 태그를 사용하고 있을 거라고 확신했다.
한 페이지에서 H1 요소가 2개 이상 사용되고 있는 이유
h1 태그는 페이지의 가장 중요한 제목을 의미한다.
블로그의 가장 첫 페이지 같은 경우는, 블로그 이름이 이 페이지를 대표하는 가장 중요한 주제라고 볼 수 있다.
따라서 블로그 이름을 h1 태그로 감싸는 것이 검색 엔진에게 블로그의 정체성을 가장 잘 전달하는 방법이다.
그런데 또 개별 포스트 페이지에서는 포스트 자체가 페이지의 중심이므로, 포스트 제목을 h1으로 설정하는 것이 가장 합리적이다.
이때 블로그 이름은 부가적인 요소가 되므로, h2와 같이 한 단계 낮은 제목 태그를 사용하는 것이 SEO 원칙에 부합하다.
그래서 블로그의 첫 페이지에서는 블로그 이름을 h1 태그가 감싸는 채로 놔두고, 개별 포스트 페이지에서는 블로그의 이름을 감싸는 태그가 h2 태그로 동적으로 바뀌도록 하면 된다.
처음에도 말했지만, 이 방법은 구글 블로그에서는 가능하지만 티스토리 블로그에서는 불가능하다.
상황에 따라 동적으로 h1과 h2를 선택하도록 하자
구글 블로그 관리 페이지에서 '테마' > 'HTML 편집'으로 이동한다.
먼저 [ctrl + F] 키를 누르고 data:blog.homepageUrl을 검색한다.
그중에서 위의 이미지에 표시한 부분을 삭제하고 다른 코드를 넣을 건데, 주의할 점이 있다.
이미지에 캡처한 부분과 똑같은 코드가 다른 곳에도 있다.
하나는 <head> 태그 안에 있고, 다른 하나는 <body> 태그 안에 있는데, head 태그 안의 코드는 건드리지 말자.
body 태그 안에 있는, 즉 동일한 두 코드 중에 더 아래쪽에 있는 코드에서 이미지에 표시한 부분을 삭제하자.
그리고 그 자리에 아래의 코드를 넣자.
<!-- 수정 -->
<b:if cond='data:view.isHomepage'>
<h1>
<a expr:href='data:blog.homepageUrl'><data:title/></a>
</h1>
<b:else/>
<h2>
<a expr:href='data:blog.homepageUrl'><data:title/></a>
</h2>
</b:if>이 코드는 b:if 조건문을 사용하여 data:view.isHomepage (메인 페이지)일 때만 <h1> 태그를 사용하고, 그 외의 경우에는 <h2> 태그를 사용하도록 하는 코드다.
이제 마지막으로 CSS 코드도 추가하면 끝이다.
[ctrl + F] 키를 누르고 .main-logo h1을 검색한다.
그리고 이 CSS 코드를 main-logo 클래스의 h2에서도 사용할 수 있도록 이미지와 같이 코드를 추가한다.
.main-logo h1,
.main-logo h2{ /* 추가 */
font-family:'Georgia',serif;
font-size:47px;
color:$(main.color);
line-height:60px;
margin:0
}
.main-logo h1 a,
.main-logo h2 a{ /* 추가 */
color:$(main.color)
}정확한 위치에 코드를 알맞게 추가했다면, 블로그 첫 페이지에서는 블로그 이름에만 h1 태그가 사용되고, 개별 포스트 페이지에서는 포스트 제목에만 h1 태그가 사용되고 블로그 이름은 h2 태그가 사용된다.
응원이나 피드백이 담긴 댓글은 제가 계속 블로그를 해나갈 수 있는 원동력이 됩니다. 😊
지인에게 보여주고 싶은 글이었다면 URL을 복사해서 메신저나 소셜 미디어에 공유해 주세요.
0 Comments
댓글 쓰기
🔸 댓글은 블로그 운영자의 승인 후에 블로그에 표시됩니다.
🔸 비로그인 방문자 분께서는 '익명'보다 이름/URL로 댓글을 남겨주시면 감사하겠습니다. (URL은 생략 가능합니다.)
🔸 구글 로그인 방문자는 '알림 사용'에 체크를 하시면, 남겨주신 댓글에 대한 답글 알림을 메일로 받아볼 수 있습니다. 📩