구글 블로거 개별 포스팅의 제목, 부제목, 소제목에 적용되는 H 태그 정리

구글 블로그인 블로거로 포스팅하다 보면 다소 헷갈리는 부분이 에디터 상단 메뉴 중 단락 형식을 누르면 나오는 H 태그 중 소 제목들에게 어떤 태그부터 적용해야 할지 잘 모른다는 점입니다. 보통 구글 블로거의 기본 테마들 중 하나를 사용한다면 제목 태그에는 h3가 적용되어 있었습니다. 이 이야기는 포스팅 내용 중 가장 큰 제목은 h4 태그인 소 제목부터 만 사용해야 한다는 결론입니다.

 

 

웹 페이지의 제목 부분을 드래그한 상태에서 마우스 우클릭 후 검사를 선택하면 우측의 코드 창에서 볼 수 있습니다.

아래의 데모 페이지 제목 부분을 마우스로 드래그한 다음 마우스 우클릭 검사를 선택합니다.

그러면 우측으로 나오는 코드 영역에서 보이듯 기본 블로거 테마들은 제목을 h3 태그로 설정하고 있다는 것을 알 수 있습니다.

 

 

즉, 구글 블로거의 제목 태그를 기본 테마 기준으로 정리하면 이론상 다음과 같습니다.

 

• 주 제목 : h3 태그를 사용합니다.
• 제목 : h4 태그를 사용합니다.
• 부제목 : h5 태그를 사용합니다.
• 소제목 : h6 태그를 사용합니다.

 

이 이야기는 기본 테마를 사용할 경우에는 포스팅에 한 개 밖에 존재하지 않는 글 제목이 h3 태그를 사용하므로 글 내용에서 나오는 첫 번째 목차는 무조건 제목을 선택해야 하고 제목은 h3 태그보다 낮아야 하므로 h4 태그를 사용해야 합니다.

 

하지만 실제에서는 주 제목은 h3, 글 내용의 첫 번째 제목은 h4가 아니라 h2로 적용되는 이상한 모습을 보여 줍니다.

 

아래의 이미지는 글 내용 중의 제목들 태그를 살펴본 이미지 입니다.

역시, 마우스 우 클릭을 통해 검사에서 살펴보았습니다.

 

 

 

코드의 내용을 종합하면 개별 포스팅의 주 제목은 h3, 글 내용 중의 제목과 부제목은 h2와 h3로 나오는 이상한 모습을 보여주게 됩니다.

 

 

 

결론적으로 기본 테마에서 h 태그를 맞추려면 개별 글의 제목(h3) 아래에 본문 중의 목차는 소제목(h4) 만을 사용하던가 아니면 글 제목을 h3 태그가 아닌 h1 태그가 적용되도록 변경해야 합니다.

 

개별 포스팅의 개별 글 주 제목에 h1 태그를 적용하려면 블로거 관리 페이지의 테마에서 Html 편집으로 들어갑니다.

Ctrl+A를 눌러 코드 전체를 선택한 다음 Ctrl+F를 누르고 가장 상단에 entry-title이라고 입력한 다음 엔터 키를 누릅니다.

 

 

 

이렇게 하면 해당 부분을 볼 수 있는 데, h3로 시작하고 닫히는 부분 두 곳의 h3를 둘 다 h1으로 변경해 주고 저장해 줍니다.

 

 

이제 온라인상의 실제 페이지로 이동한 다음 글 제목을 선택한 다음 우클릭 후 검사를 진행해 코드를 살펴보면 h1 태그로 변경된 것을 확인할 수 있습니다.

 

 

 

이렇게 되면 글 내용의 본문 내에서 목차들을 주 제목 바로 아래의 제목부터 부제목, 소제목 모두를 사용하더라도 자연스럽게 h1, h2, h3, h4로 흘러가는 것을 확인할 수 있습니다.

 

 

이상으로 구글 블로거의 기본 테마를 사용할 경우에 제목 태그들을 정리하는 방법에 관하여 알아보았습니다. 기본 테마가 아닌 외부에서 제작된 테마들의 경우에는 처음부터 포스팅 제목에 h1 태그를 부여하여 나오는 경우가 많습니다.