블로그 최적화 - “<H1> 요소가 2개 이상 발견” 경고문구 해결하기

블로그 최적화 - “<H1> 요소가 2개 이상 발견” 경고문구 해결하기 

 

  아잼마는 일전에 H태그의 중요성을 깨닫고 블로그의 모든 글을 샅샅이 뒤져서 잘못된 H태그를 수정하고 그 과정과 결과를 “H태그가 바르게 적용된 제목과 소제목의 중요성과 H태그의 올바른 사용법”이라는 글에 정리를 했다. 이것으로 블로그의 글들이 보다 구글 SEO에 적합하게 최적화된 것을 구글 라이트하우스를 통해 검증했었는데 며칠 전 네이버 서치 어드바이저(NAVER Search Advisor)로 블로그 URL을 검사하다 생각하지 않은 황당한 결과를 보고 멘붕에 빠진 경험을 했다.

1. “<H1> 요소가 2개 이상 발견”되었다는 경고 문구

  그것은 아직도 내 블로그에 H태그 문제가 있는데, 블로그의 글 전체에 <H1> 태그 오류가 있다는 경고였다. 분명히 전에 H태그를 살펴보면서 h1태그도 하나하나 모두 점검을 했었다. 그런데 전체 글에 h1태그 문제가 있다니 전혀 이해할 수 없는 문구였다. 

  게다가 더 헷갈리게 만드는 “2개의 인스턴스를 확인했습니다”라는 문구가 보였다. “인스턴스”란 단어는 금시초문이다. 어쨌든 2개 인스턴스에 <H1> 요소가 2개 이상 발견되었다는 말과 아잼마의 글 모두에 <H1> 태그의 문제가 있다는 말이 서로 합리적으로 매칭이 되지 않아 머리가 더 복잡해졌다. 검색을 해보니 인스턴스라는 용어는 “데이터들의 묶음”이라는 의미인 것 같다. 그러면 2개의 데이터 묶음에 <H1> 요소가 2개 이상 발견된다는 말이 된다. 여기까지 검색을 하다가 머리가 아파서 며칠 쉬었다.
  며칠 후 다시 이것을 조사해 보고 “<H1> 요소가 2개 이상 발견”된다는 에러 메시지는 티스토리 블로그의 글에 “h1 제목이 두 개 이상”이라는 의미임을 확인할 수 있었다. 하지만 분명한 것은 내가 작성한 모든 글에는 h1 제목이 한 개뿐이다. 그런데 h1 제목에 대한 문제가 2개의 인스턴스에 그리고 전체에 있다니... 도무지 이해도 해결책도 찾지 못하고 씨름을 하다가 하루를 까먹었다.

  그 후 어떤 글에서 “<H1> 요소가 2개 이상 발견” 문구의 의미를 알 수 있게 되었다. 결론은 사용중인 스킨이 "북클럽"일 경우 티스토리 블로그의 전체 제목이 h1으로 잡혀 있어서 그렇다(스킨마다 블로그 전체 제목이 h1으로 잡혀 있는 경우가 다르다). 

  "블로그 타이틀"과 "본문 타이틀" 2개가 모두 <H1> 태그로 잡혀 있었기 때문에 블로그 전체 글 모두에 <H1> 요소가 2개 이상 발견되었다 경고가 된 것이다. 그러면 “2개의 인스턴스를 확인했습니다”라는 문구는 어떤 것을 말하는가? 이것은 우선 “<H1> 요소가 2개 이상 발견” 문제를 해결하고 살펴본다.

2. “<H1> 요소가 2개 이상 발견” 문제 해결 : 블로그 타이틀의 h1태그 지우기

  h1태그가 두 개가 있으면 안 되기 때문에 이 문제를 해결하려면 두 개의 h1태그 중 하나를 지우면 된다. 그러면 어떤 h1태그를 지우면 되는가? 블로그 본문에 있는 제목(타이틀)은 반드시 있어야 하는 것이므로 지우면 안 된다. 그렇다면 삭제해야 하는 것은 블로그 제목의 h1태그이다. 문제는 이것도 지우면 안 되는 것이 아닌가? 검색을 해보니 제목의 h1태그는 지우는 것이 아니라 바꾸면 되는 것이었다. 이를 <p> 태그로 바꾸기라고 한다. 
  <p> 태그를 검색해 보니 블로그에는 <h> 태그와 <p> 태그 말고 <span> 태그와 <div> 태그도 있었다. <p> 태그는 paragraph의 약자로 문단을 구분하는 태그이다. 문단을 구분하는 역할을 하기 때문에 항상 글의 시작과 끝에 위치하는 것이라 한다. 더 깊은 내용은 잘 모르니 생략하고 어쨌든 블로그 타이틀의 h1태그는 p태그로 바꿀 수 있고, 그러면 “<H1> 요소가 2개 이상 발견” 문제가 해결된다. 
 
  이제 블로그 타이틀의 h1태그를 p태그로 바꿔본다.
 

  1) 블로그 관리에 들어가 “꾸미기 ⇨ 스킨편집 ⇨ html 편집으로 이동한다. 

  블로그의 관리창에 들어가는 가장 쉬운 방법은 블로그 홈에서 “q”를 누르면 곧바로 관리창으로 이동한다. 

  2) html 편집창에서 <h1>과 </h1>을 찾아 <p>과 </p>으로 변경한다. 

  어떤 블로거의 글을 보면 아래와 같이 html 편집창에서 ctrl+f 를 눌러 '##_title_##'을 검색하고, h1 2개를 p로 수정하라 기록되어 있다. 

  하지만 아잼마의 블로그에서는 ctrl+f 를 눌러 '##_title_##'을 검색했는데, 왜 그런지 모르지만 검색 결과가 하나도 나오질 않았다. 그래서 궁여지책으로 자연인의 방식으로 <h1>과 </h1>을 찾아 <p>과 </p>으로 바꾸었다. 

  3) css 창에서 3개의 h1을 p로 변경한다.

  다음에는 css 창으로 가서 h1을 p로 바뀌어 주어야 한다. 앞의 작업을 하고 이 작업을 하지 않으면 내 블로그의 제목이 아주 작게 나오고, 블로그의 제목의 h1태그도 없앨 수 없다고 한다.
  앞에서 언급한 어떤 블로그의 조언을 보면 css 창으로 가서 ctrl+f 를 눌러 'header' 검색하여(또 다른 블로거는 'header h1'으로 검색하라고 한다) 3개의 h1을 p로 변경해야 한다고 되어있다. 하지만 아잼마의 블로그에는 아무것도 검색되지 않았다. 그래서 가장 믿을만한 내 눈으로 다시 검색해서 찾아 바꾸었다.

  아잼마의 생각에는 <H1> 요소가 2개 이상 발견되는 “2개의 인스턴스"가 h1을 p로 바꾸어준 html과 css 두 개를 말하는 것이 아닌가 생각한다. 

3. 결과 확인 : 네이버 서치 어드바이저에서 URL 재검사

  우여곡절 끝에 작업을 수행한 후 성공적인 작업이었는지를 확인하는 것은 필수이다. 네이버 서치 어드바이저에 가서 URL 검사를 다시 실시하면 작업의 성공 여부를 확인할 수 있다. 실시 결과는 성공적이다. “<H1> 요소가 2개 이상 발견”되었다는 경고 문구를 담고 있는 SEO가 사라졌다. 

 
  “<H1> 요소가 2개 이상 발견” 문제는 구글 SEO와 연관된 문제이기에 구글 노출과 직결된 문제이다. 블로그의 글에 h1태그가 두 개가 있으면 구글봇은 어떤 것을 글의 제목으로 잡아야 할지 헷갈릴 것이고, 그러면 내 블로그의 글들을 모두 논리적이지 않고 혼잡한 것으로 평가해서 구글 노출에서 제외할 것이다. 또한 네이버 서치 어드바이저에서도 이 문제를 거론하는 것은 네이버에서도 노출에 장애가 된다는 말이 되어 이중 삼중의 문젯거리가 되어 버린다. 그러므로 반드시 해결해야 할 블로그 최적화의 문제이다. 
  아잼마는 이 문제를 처음 본 것이 아니다. 이미 본일이 있지만 해결책은 고사하고 문젯거리가 무엇인지도 몰랐기 때문에 계속해서 지나치고 있었다. h1태그를 알고 나서 “<H1> 요소가 2개 이상 발견”이 h1태그의 문제라고 판단할 수 있었고, h1태그로 이것저것 해결 방법을 찾다가 겨우 해결할 수 있었다. 블로그 운영은 계속적인 배움의 여정이라는 사실을 다시 한번 더 느끼며 이젠 쉬러 간다. 

 

 

 

▼▼ 연관된 글로 가기 ▼▼

H태그가 바르게 적용된 제목과 소제목의 중요성과 H태그의 올바른 사용법

 

▼▼ 티스토리 블로그 최적화 ▼▼

티스토리 블로그 최적화하기 - 최적화 두 가지 방법, 블로그 최적화 확인 방법