본문 바로가기
블로그 관리

구글 SEO 최적화를위한 H 태그 사용법 정리하기

by 브래드파파 2023. 7. 19.

구글 상위노출에 성공하기 위해서 글을 작성하는 동안 우리가 노력할 수 있는 최소한의 요소가 몇 가지 있습니다. 바로 H 태그와, 글의 구성 등이 이에 해당합니다. 이 요소들을 어떻게 활용하여 우리가 추구하는 구글 상위 노출에 한 걸음 더 다가갈 수 있는지 이번 포스트에서 알아보겠습니다.


*목차*

1. H 태그란?

2. H 태그 수정하기

3. 글 작성 예시

4. 사진 설정

5. 글 작성 시 주의 사항

6. 마치며


 

1. H 태그란?

1.1. 왜 H 태그를 써야 할까요?

  • 모든 사이트에는 검색엔진 (봇) 이 존재합니다. 이 검색엔진이 우리의 포스트를 잘 긁어갈 수 있게 (크롤링) 글을 잘 편집해서 작성해야 합니다. 이러한 작업을 SEO 최적화라고 말하며, 이를 위해 글 작성 시 봇 이 글을 이해하는데 반드시 필요한 H 태그라는 것을 사용하여 글을 작성해야 합니다. 따라서 우리는 H 태그로 설정된 문장이 제목, 소제목으로 사용되어야 하며, H1부터 하위 H5, 6까지 부연 설명해 나간다는 생각으로 글을 작성하시면 됩니다.

 

1.2. H 태그 종류 및 설명

  • H1 태그
    • 글쓰기 창을 보면 가장 먼저 보이는 "제목을 입력하세요" < 이 부분이 H1 태그가 되어야 합니다. H1 태그는 SEO에서 가장 중요하며, 크롤링을 하는 봇에게 해당 포스트에 대한 일차 설명을 한다는 의미로 생각하시면 될 것 같습니다.
    • 따라서, 한 포스트 내에서 H1 태그가 여러 개가 존재할 경우 봇은 이 글을 비정상적으로 판단할 확률이 높기 때문에 H1 태그는 포스트 제목으로 꼭 한 개만 사용사용되어야 합니다. 그리고 그 이하 본문 내용들은 모두 이 H1 태그에 작성된 주제와 그 내용이 일맥상통해야 합니다.
  • H2 태그
    • 티스토리 글쓰기 상단 메뉴 중 제목 1로 사용할 수 있으며, 본문의 소제목으로 사용하여 작성합니다.
  • H3, 4 태그
    • 티스토리 글쓰기 상단 메뉴 중 제목 2, 제목 3에 해당하며, H2의 하위 항으로 작성 또는 H2를 남발하여 사용하는 것은 바람직하지 않기 때문에 H2, 3, 4와 같은 H 태그는 포스트 내용 중 새로운 문단을 이끄는 소제목으로 작성하는 게 바람직합니다.
  • 티스토리에서는 H4 태그까지만 기본적으로 제공됩니다. 따라서 H5, H6 태그는 포스트 중 오른쪽상단에 위치한 HTML 모드를 켜서 내가 원하는 제목 앞뒤로 "<h5> 제목 </h5>" 또는 "<h6> 제목 </h6>" (큰따옴표는 작성하지 않으셔야 합니다.)으로 수정해 주시면 H5, 6 태그로 설정이 됩니다. 

 

 

2. H 태그 수정하기

2.1. H 태그의 가독성 높이기

  • H 태그는 하위 순번으로 내려갈수록 글씨 크기가 작아집니다. 특히 H5, 6은 본문 글씨보다 더 작아지기 때문에 H 태그를 이용해 소제목을 작성하려는 우리는 해당 H 태그의 글씨 크기를 조절하여 가독성을 높여줘야 합니다. 이 작업을 하기 위해서는 스킨 편집의 HTML 편집에 위치한 CSS를 편집해야 합니다.

 

2.2. H 태그 글씨 크기 수정 단계

  • 블로그 관리 → 스킨편집 → HTML 편집 → CSS 편집 
  • 북클럽 스킨 기준으로  CSS 편집창에서 Ctrl-F를 통해 Entry Contents를 검색합니다. (다른 스킨의 경우 다른 H 태그를 검색해 보면 H1부터 H4까지 모여있는 부분을 확인할 수 있습니다. 이 부분의 글씨크기를 조절해 보시면 됩니다.)
  • 아래쪽에 H1 ~ H4 태그에 대한 정보가 작성돼 있습니다.
  • H5, H6 정보가 없기 때문에 H4의 정보를 긁어서 복사한 후 H4 밑에 붙여 넣기 해줍니다.
  • H5, H6의 정보를 H4와 같이 정렬해 줍니다.
  • H 태그 정보중 글씨 크기에 해당하는 font-size를 1.0 em 은 16 px 임을 참고하여 글씨 크기 조절합니다.
  • 바로 적용하지 마시고 왼쪽에 보이는 사이트 창을 새 로고 침 하여 어떻게 표현되는지 확인합니다.
  • 적절한 크기를 선정한 후 적용을 누르시면, 모든 포스트에 일괄 적용됩니다.(소급적용됨.)
  • 우리는 H 태그를 소제목으로 사용하고 가독성을 높이는 게 목적이므로 H2 ~ H6의 글씨 크기는 동일하게 설정합니다.
  • H1의 글씨크기는 모든 H 태그 중 가장 크게 설정되어있어야 합니다.

 

3. 글작성 예시

3.1. 문단형 글을 작성하기

  • 글은 왼쪽 정렬상태에서 소제목과 본문 내용으로 구성된 문단형 글을 작성해야 합니다. H 태그의 설정은 아래의 예시와 같이 적용하여 글을 작성해 주시면 됩니다.

 

3.1. H 태그 적용 예시

  • 1) 제목 (H1 태그)
  • 2) 디스크립션 작성 (본문 1or 2 이용, 대략 2~3줄 작성)
  • 3) 소제목 1 (제목 1, H2 태그)
    •   3-1) 본문 1 or 2 이용하여 내용작성
  • 4) 소제목 2 (제목 2, H3 태그)
    •   4-1) 본문 1 or 2 이용하여 내용작성
  • 5) 소제목 3 (제목 3, H4 태그)
    •   5-1) 본문 1 or 2 이용하여 내용작성
  • 6) 소제목 4 (HTML에서 H5 태그로 수정)
    •   6-1) 본문 1 or 2 이용하여 내용작성
  • 7) 소제목 5 (HTML에서 H6 태그로 수정)
    •   7-1) 본문 1 or 2 이용하여 내용작성

 

 

4. 사진 설정
  • 최소 필요 개수만 첨부하기 (사진이 없는 게 제일 바람직합니다.)
  • 사진 첨부파일 이름도 주제에 맞게 변경해 줍니다.
  • 사진 클릭해서 나오는 오른쪽 상단 나사모양 클릭해서 첨부된 사진 설명해 줍니다.(alt tag 입력 작업)
  • 사진 설명 코멘트 작성해 줍니다. (썸네일용은 작성하지 않음)

 

 

5. 글 작성 시 주의사항
  • H 태그를 순차적으로 사용하며, 문단형식의 글을 작성하는 것이 구글 노출에 유리합니다.
  • 글을 구성하는 소제목을 모두 H2 태그로 구성하셔도 됩니다. 다만 소제목에 따른 내용이 이전 내용과 확실하게 별도의 내용으로 구성되어야 바람직합니다.
  • 글쓰기 옵션 중 리스트 이용 시 Tab 키를 이용하면 상위, 하위 내용으로 구분해서 내용을 작성할 수 있습니다.
  • 티스토리에서 제공하는 H 태그는 H1(제목으로 수정하면 안 됨)부터 H4까지입니다. 

 

6. 마치며

  • 아직 블린이에 불과한 제가 아는 얄팍한 지식을 바탕으로 작성된 글입니다. 하지만 조금이나마 다른 분들에게 도움이 됐으면 좋겠다는 마음으로 이번 포스트를 끝내도록 하겠습니다. 앞으로 블로그를 운영하면서 더 많이 알아가고, 알게 된 내용을 바탕으로 이 글을 지속적으로 업그레이드해 나가도록 하겠습니다.
  • 함께보면 좋은글 : 2023.07.19 - [각종 정보] - 웹사이트 상위 노출을위한 티스토리 블로그 설정하기