블로그 SEO 최적화 - 2개 이상 h1 태그가 존재한다면?

SEO - 분명히 조치했는데도 h1 태그가 2개 이상 존재한다고 뜬다면?

MS Bing 웹마스터툴즈로 SEO 검사를 했습니다.

한 개의 글에 여러 개의 h1 태그가 있어 SEO 관점에서 개선이 필요하다는 피드백을 받았습니다.

권고에 따라, 글을 에디트하고 분명히 h1 태그가 한 개만 존재하도록 조치를 완료했는데, 다시 SEO 검사를 해보니 여전히 h1 태그가 2개 이상 존재한다고 뜨는군요.

이럴 때는 어떻게 조치하면 좋을까요?

 

h1 태그는 왜 중요한가?

사람들이 글을 읽을 때는 문맥으로 판단하지만, 구글 크롤러가 글을 읽어서 판단할 때는 기계적으로 구조를 파악하게 됩니다.

h1 태그는 글의 구조의 시작을 알려주는 시작점이기 때문에 중요합니다.

 

 

 

 

h1 태그는 왜 하나만 쓰기를 추천하나?

하나의 글에서, 하나의 주제에 집중하는 것이 좋은 글이라고 판단할 것입니다.
그런데, 여러 개의 h1 태그가 혼재한다면, 주제가 여러 개의 글이라고 오인될 가능성이 있을 것입니다.

물론, 요즘에는 구글 알고리즘이 충분히 스마트하므로, 여러 개의 h1 태그가 있다하더라도 자체적으로 잘 판별한다고는 합니다.

만약 나의 글이 충분히 길고, 잘 구성되어 있다면 여러 개의 h1 태그가 있어도 무방할 것입니다.

그러나, MS Bing 웹마스터툴즈 등에서는 기본 원칙에 따라 글 한 개에는 h1 태그가 하나만 사용하는 것을 권고하고 있습니다.

 

티스토리에서 h1 태그는 왜 두 개 이상 감지될까?

분명히 글을 편집해서 내 글에 h1 태그가 하나만 존재하도록 잘 편집했음에도 불구하고, MS Bing 웹마스터툴즈로 SEO 보고서를 추출해 보면, 여전히 h1 태그가 두 개 존재한다고 리포트가 뜹니다.

상세 내역을 클릭해서 확인하면,

<h1 class="jb-site-title"><a href="/"><span class="jb-site-title-text">everydayminder</span></a></h1>

와 같이, 타이틀에 h1이 걸려있는 것을 확인할 수 있습니다.

무시해도 좋겠지만, 그래도 위와 같은 이유를 알게 된 이상 찜찜해서 원인을 파악하고 해결하고자 들여다 보게 되었습니다.
티스토리의 대부분의 스킨들은, 블로그 타이틀에 h1 태그를 붙입니다.

따라서, 글의 메인에 h1을 붙여줘도 보통은 두 번째의 h1으로 인식되게 됩니다.
즉, 글에 기본적으로 h1이 두 개가 존재하는 글이 됩니다.

 

h1 태그가 하나만 감지되도록 하려면?

조치를 하려면, 둘 중 하나겠죠?

1. 블로그 타이틀을 h1에서 다른 것으로 바꾼다.
2. 본문의 h1을 h2 이하로 바꾼다.

그러나, 방법2를 택하면 의미가 없겠죠. 글의 제목에 h1을 주지 못하는 선택이니까요.
따라서, 블로그 타이틀을 h1에서 h2-h6 등으로 바꾸거나, p 태그로 바꿔줍니다.

이 때, 태그 변경 후 영향받는 CSS까지 함께 바꿔줘야 합니다. 그래야, 화면이 깨지지 않습니다.

제가 실제로 적용한 내용은 아래와 같습니다. (JB-167 스킨 기준)

html 스킨 편집 화면에서, ##title## 를 검색합니다.

<h1 class="jb-site-title"><a href="https://luran.me/"><span class="jb-site-title-text">everydayminder</span></a></h1>

저는, 아래와 같이 h1 태그를 p 태그로 바꿨습니다.

<p class="jb-site-title"><a href="https://luran.me/"><span class="jb-site-title-text">everydayminder</span></a></p>

기존에 제목 타이틀이 h1의 속성을 따라 화면을 장식했을 것이므로, 이와 동일한 내용을 복사해 CSS탭내, p 태그에도 영향을 주도록 기록합니다.

    p.jb-site-title { margin: 15px 0px; font-size: 1.5em; }
    p.jb-site-title span.jb-site-title-image img { width: 80px; vertical-align: initial; }
    @media ( min-width: 768px ) {
        p.jb-site-title { margin: 20px 0px; font-size: 2.0em; }
        p.jb-site-title span.jb-site-title-image img { width: 100px; }
    }
    @media ( min-width: 1024px ) {
        p.jb-site-title { margin: 40px 0px; font-size: 2.0em; }
        p.jb-site-title span.jb-site-title-image img { width: 120px; }
    }

 

 

 

 

제대로 작업되었는지 확인하려면?

MS Bing에서 다시 검사해 봅시다.

사전에 인덱스가 되어 있는 화면에서는 캐시되어 있으므로 반영되기 까지 시간이 걸릴 것입니다.

라이브 URL 기능을 활용하여 검사해 보면, 기존에 뜨던 경고 메시지가 사라진 것을 확인할 수 있습니다.