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

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

 

  개설한 지 15일 지난 아잼마의 블로그가 드디어 구글 애그샌스 승인을 받았다. 이로서 블로그를 도전하면서 시작한 1차 작전 “가능하면 빠르게 애드샌스 승인받기”가 이루어졌다. 다른 블로그는 승인을 받는데 3달, 정확하게 말하면 4달에 가까운 3달 걸렸고, 무엇을 어떻게 할 줄 모르는 상태에서 얻어걸린 것이다. 그렇기 때문에 이번 승인의 가치는 15일이라는 1/7의 단기간에 승인을 받았다는 사실보다 승인을 받기 위해 나름 체계적인 노력들을 했고 그것들을 기록으로 남겨 노하우가 되게 했다는 것에 있다. 어쨌든 이제는 2차 작전 돌입이다. 2차 작전은 “구글 노출을 극대화하기”이다. 
  고수들의 조언에 의하면 티스토리 블로그의 성공적인 운영을 위해서는 구글 노출이 가장 중요한 조건이라 한다. 구글에서 블로그의 글들이 지속적이고 상승적으로 노출되어야 한다. 이는 블로그 자체의 가치 향상이라는 측면과 블로그를 통한 수익 창출이라는 측면에서 모두 중요하다. 그러면 어떻게 하면 구글에서의 노출을 극대화할 수 있을까? 아직까지 아잼마는 “블로그 최적화”라 불리는 방법 말고는 찾은 정보가 없다. 아마 수년간 블로그를 운영하고 있는 고수들에겐 무언가 다른 묘책들이 있을지 모르지만 어쨌든 지금 내 눈에는 여기저기를 뒤져보지만 이것만이 눈에 뜨인다. 그래서 오늘도 구글 노출을 위한 최적화 작업을 했다. 승인 이후 구글 노출을 위해 시행한 첫 번째 작업은 H태그이다. 

 

1. H태그 수정 결과 

  H태그를 수정해서 최적화하면 어떤 결과가 생기는가? 이를 이해하기 쉽게 보여주는 것이 라이트하우스의 리포트이다. H태그를 수정 전과 후의 라이트하우스 리포트 결과를 비교해 보면 성능(Performance)에서 진보가 생겼음을 알 수 있다. 

   
  
2. H태그와 html

  점수가 좋아졌다는 것은 좋은 일이지만 도대체 무엇이 좋아진 것인지 아는 것은 더 중요한 일이다. 하지만 7080세대인 아잼마에게 H태그는 처음 접하는 용어이기에 도무지 의미 파악이 안 된다. H태그는 무엇이고, H태그로 인해 블로그의 성능이 향상되었다는 것은 무엇을 의미하는 말인가? 

 

  2-1. H태그는 무엇인가?

  H 태그를 이해하려면 먼저 html을 알아야 한다고 한다. html은 블로거가 블로그와 소통하는 방법으로, 블로그를 사용하기 위한 웹 언어라고 한다. 즉, 블로그를 운영할 때 필요한 언어라는 말이다. 내 의도를 html이란 언어로 블로그에 입력하면 블로그는 그것을 해석해서 내 의도에 따라 편집이 된다. 
  H태그는 블로거가 블로그에게 보내는 신호(명령)의 하나로 글의 제목과 관련된 신호이다. H태그에서 H는 Header를 의미하는 것으로 Header는 정보기술에서 저장되거나 전송되는 데이터 블록의 맨 앞에 위치한 보충 데이터라 한다. 티스토리에서 Header는 h1(가장 큰 제목)부터 h6(가장 작은 제목)까지 6단계가 있다. 

 

  2-2. H태그가 하는 일과 H태그가 바르게 적용된 제목과 소제목의 중요성

  웹 검색 엔진인 웹 크롤러(web crawler)는 수많은 페이지를 방문하여 복사본을 생성하고, 생성된 페이지의 빠른 검색을 위해 인덱싱을 한다고 한다. 이때 웹 크롤러(web crawler)는 페이지에서 가장 중요한 태그를 찾는 데 그것이 'h1 태그'이다. 인덱싱을 위해서는 가장 중요한 'h1 태그'를 HTML 페이지에서 찾고 그곳에 포함된 키워드를 검색엔진에서 사용한다.
  이를 블로그의 입장에서 보면, H태그는 구글 로봇이 가장 중요하게 찾는 포스팅의 핵심을 알려주는 역할을 하는 것이 된다. 달리 말해서 발행한 글이 어떤 주제의 글인지를 구글 로봇에게 알려주는 것이다. 그래서 h1태그의 제목과 실제 본문 내용이 서로 연관되지 않는다면 구글 로봇은 해당 포스팅에 대해 판단할 때 글이 정상적이지 않아 부적합하다고 인식한다. 본문에 아무리 중요한 내용이 포함되어 있어도 h1태그와 글의 내용이 일치하지 않으면 구글 로봇은 h1태그와 글 전체 내용이 다르다 판단해서 부정적으로 본다. 그러므로 H태그가 바르게 적용된 제목(h1)과 소제목들(h2~h6)의 중요성은 결코 무시할 수 없는 사항이고 h1태그와 어울리게 본문 내용을 구성하는 것이 H태그를 통해서 블로그를 최적화하는 가장 기본적인 전략이 된다. 

  이를 조금 더 상세하게 살펴본다. h1태그가 가장 중요하다. h1태그는 반드시 한 개가 있어야 한다. 없으면 안 되고 두 개가 있어도 안된다. 무조건, 반드시 딱 하나만 있어야 한다. 또한 h1태그가 없거나 h1태그가 두 개이거나, 두 개의 다른 h1태그가 있으면 구글 로봇은 포스팅을 보고 혼란을 겪는다. 기준점을 잡아주는 h1태그가 없으면 기준 자체가 없으므로 혼란에 빠지고, 서로 다른 두 개의 h1태그가 있다면 기준점이 서로 달라 글의 내용이 상충한다고 볼 것이다. h1태그로 혼란을 겪은 구글 로봇은 글을 비정상적인 것으로 인식하여 구글에 노출시켜주려 하지 않는 것이다. 따라서 h1태그를 정확하게 설정하여 구글 로봇에게 내 글의 정체를 명확하게 알려주는 글과 그렇지 않은 글 사이에는 엄청난 질적인 차이가 있는 것으로 인식되는 것이다. 그러므로 구글 노출을 목적으로 한다면 아래 표에서 볼 수 있는 것과 같이 H태그가 글쓰기에서 어떤 의미를 가지고 있으며, 어떻게 표기되는지를 정확하게 숙지하고 사용해야 한다. 

3. 티스토리에서 H태그의 올바른 사용법

  티스토리 글에서 H태그를 어떻게 활용하는 것이 올바른 사용방법인지는 두 가지 측면에서 세부적으로 확인할 수 있다. 

  3-1. 티스토리 글 본문에서 H태그의 올바른 사용법 

  티스토리 글의 본문에 기록되는 제목이 h1태그이다. 본문을 작성할 때 사용되는 편집 창 “제목을 입력하세요”에 기록되는 제목과 같은 것이다. 따라서 변칙적으로 글을 쓰지 않는다면 h1태그는 글에서 한 번만 사용된다. 제목란에 제목을 기록했으니 글쓰기 본문에는 제목을 기록하지 않을 수 있다고 생각할 수 있다. 하지만 이것은 본문에 H태그가 h1이 없이 h2부터 사용되게 되는 결과를 만든다. 그래서 어떤 블로거는 제목란의 제목을 본문에도 한번 더 기록하라 조언한다. 그래야만 구글이 원하는 H태그 사용법칙에 따라 좋게 평가된다는 주장이다. 
  말로 하면 복잡한데, 실제 본문의 그림을 보면 이해가 쉽다. 왼쪽 그림이 티스토리 글쓰기 창에서 H태그를 사용한 예이고, 오른쪽 그림은 편집창에 나오는 메뉴를 H태그로 구분한 것이다.

   
  3-2. 글을 작성할 때 H태그의 올바른 사용법

  하지만 H태그의 의미와 용법을 잘 숙지하지 않으면 글을 작성할 때 H태그를 구글 로봇이 싫어하는 방법으로 사용하게 되는 일이 발생한다. 그래서 H태그의 올바른 사용 방법을 기억할 필요가 있다. 
  가장 기본적이면서 중요한 H태그의 용법은 “h1 ⇨ h2 ⇨ h3 ⇨ h4”라는 논리적인 순서대로 사용해야 한다는 것이다. 아래 예와 같이 사용하면 안 된다.

  H태그를 순서대로 사용하는 것은 글을 작성할 때 논리적인 순서를 따른다는 의미도 있지만 구글 로봇에게 글이 주제에 따라 순서와 체계에 따라 작성되었다는 정보를 준다는 의미가 더 크다. H태그를 순서대로 사용되지 않고 뒤죽박죽이면 우리는 글을 읽으면서 논리가 체계적이지 않고 뒤엉켰다 불편해한다. 이와 마찬가지 판단을 구글로봇도 하게 된다. 
  하지만 실제로 H태그가 순서대로 사용되지 않는 경우가 많다. 아잼마는 H태그가 구글로봇에게 정보를 제공한다는 의미를 몰랐기 때문에 엄청난 실수를 저질렀음을 모르고 있었다. 어떤 글에서는 h1과 h2를 같은 크기인 제목 1로 동일하게 사용했다. 심지어 제목 2의 문단을 써가다가 강조하고 싶은 부분을 부각하려고 제목 1로 설정해서 크게 보이기도 했다. 어느 경우에는 제목 1을 여러 번 사용했는데 단순히 그 부분을 강조하기 위해서였다. 이는 H태그의 의미와 용도를 모르고 한글 문서를 작성하듯이 단순히 글자의 크기를 조절하는 것으로 생각했기 때문이다. 아마 구글 로봇인 내 글들을 보면서 논리 체계가 전혀 없이 글을 뒤죽박죽 썼다고 궁시렁했을 것이다. 이 문제는 네이버 웹마스터 도구 검사를 할 때마다 나타난 경고 문구에 있었다. SEO에 “<H1> 요소가 2개 이상 발견”이라는 경고문구가 있었는데 나는 이것이 무엇인지 몰라서 그냥 지나쳤던 것이다. 이를 깨닫고 글로그의 글들을 전부 확인하여 잘못 작성된 H태그를 모두 수정하고 라이트하우스로 그 결과를 측정했던 것이다. 

  3-3. H태그 사용 시 주의사항 정리

  ① h1 태그가 없거나 두 개 이상이면 안 된다. h1 태그는 반드시 제목에 한 번만 사용해야 한다. 
  ② H태그는 순서대로 사용해야 한다. 하지만 h2 - h3 -h4까지 사용한 후 다시 h2를 사용하는 것은 문제없다. 
  ③ 순서가 빠지면 안 된다. 가령 h2를 사용하지 않고 h3부터 사용하는 것은 잘못된 방식이다.
  ④ H태그는 제목을 나타내는 코드이기 때문에 문단의 처음에 배치한다. 꾸미기로 사용하지 않는다.
  ⑤ 지나친 키워드의 사용은 제목을 부자연스럽게 만들 수 있으므로 키워드의 반복 사용은 좋지 않다.
글을 작성할 때 소제목은 h2부터 시작한다.

  이상의 주의사항을 고려하지 않으면 구글에 최적화된 블로그를 만드는 일은 성공적일 수 없다. 반대로 아잼마의 경우와 같이 H태그를 구글 로봇에 맞추어 잘 사용하면 최적화의 완성도가 높아진다. 최적화의 완성도가 높아지면 구글에 노출될 가능성이 많아지고, 그러면 블로그를 방문하는 사람들이 많아지는 효과를 보다 쉽게 얻을 수 있다. 

▼▼ 연관된 글로 가기 ▼▼

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

 

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