티스토리 h태그 설정 하는 법

안녕하세요. 저번 포스팅에 이어 블로그 키우기 콘텐츠로 인사드리는 샤를입니다. 오늘은 지난 포스팅 말미에 미리 예고드린 h태그에 대해 설명드리려고 합니다. 특히 티스토리 블로그 최적화를 위한 꿀팁이지만 매우 쉬운 방법인 만큼 천천히 읽어봐 주세요!

---

티스토리 H태그 설정 및 사용 하는 법

 

 

---

h태그는 무엇인가요?

h태그는 Heading의 약자로 일반적으로 제목을 나타내는 html 태그입니다. 일반적인 p태그나 span태그와 달리 h태그로 묶여 있는 문장은 글자의 크기가 커지고 굵게 강조되는데 p태그나 span태그가 본문 작성 시 표기하는 태그라면 h태그는 제목 작성 시 사용되는 태그가 되겠습니다. 더 나아가 h태그는 검색 엔진 최적화를 위해 사용되는 태그인데 블로그 글을 작성할 때 해당 요소를 고려하여 작업을 하면 전체적인 콘텐츠 구성뿐만 아니라 최적화 작업까지 한 번에 생각할 수 있습니다.

 

 

참고로 저희가 현재 사용 중인 티스토리의 경우 화면 좌측 상단 문단 모양에 있는 제목 1, 제목2, 제목3이 H태그인데 이름만 봐서는 H1태그가 제목1, H2태그가 제목 2로 생각할 수 있지만 실제 HTML 모드로 확인해보면 제목 1은 H2태그, 제목 2는 H3태그, 제목 3은 H4태그로 표현되고 있어요. (하나씩 밀려셔 표현되고 있다고 생각하면 좋을 것 같아요) 그러면 이 기세를 이어 H태그 사용 시 고려해야 하는 요소는 무엇이 있는지 다음 단락에서 설명드릴게요.

 

---

 

H태그 사용 시 고려 사안

H태그를 사용해야 할 때 고려해야 하는 사안은 여러 개가 있지만 저는 그중에 제일 중요하다고 생각되는 2가지 포인트만 설명드리려고 해요.

 

1) H1태그는 꼭 한 번만 사용하기

H1태그는 검색엔진 최적화 시 자신이 발행하고자 하는 포스팅 주제를 구글 봇에게 알려주는 태그로써 블로그 포스팅 제목 입력시 한 번만 적용해야 하는 태그입니다. 다시말해 H1 태그는 블로그 본문 영역에서는 사용하지 말아야 하며 만약 제목에 한 번, 본문에 한 번 총 2번을 사용할 경우 검색엔진 최적화시 구글 봇이 이해하기 어려운 구조로 인식되겠습니다. 그러면 현재 운영 중인 제 블로그를 예시로 들어 한 번 확인해 보겠습니다.

 

※ H1 태그 개수 확인하는 법
1. 크롬 브라우저 개발자 도구(f12)를 실행 한 뒤 Ctrl + F를 누른 뒤 <h1>을 검색
2. H1태그의 개수 확인하기

예시로 공유드린 상단 이미지의 경우 총 2개의 H1태그가 사용되었지만 1번 H1태그는 해당 포스팅에서 사용된 태그가 아닌 전체 블로그의 제목이므로 개수에 포함되지 않으며, 2번 '연금저축계좌 2월 ETF 포트폴리오' 포스팅 제목만 H1태그로 사용된 것을 알 수 있었습니다. 실제 티스토리의 대부분 템플릿의 경우 제목 영역이 H1태그로 지정되어 있으며 약 5% 정도만 H2태그로 지정되었으니 템플릿 사용 전 한 번 확인해 보시는 것을 권유드릴게요.

 

 

2) H태그는 순서대로 사용하기

H1태그는 포스팅 제목에서 사용되는 태그라면 포스팅 본문은 H2부터 H6까지 사용하실 수 있는데 해당 태그를 사용 시 순서대로 사용하는 것을 원칙으로 생각하시면 좋을 것 같아요. 포스팅 제목인 H1태그 다음 본문의 소제목을 작성할 때 H3나 H4태그를 사용하신 다면 H2 태그를 건너뛴 체 사용한 셈이므로 구글 봇의 입장에서는 헷갈려 할 수 있습니다. 

 

위의 예시 이미지를 보시면 포스팅 본문의 '그런데 본문의 제목을 H3태그로 사용한다면' 텍스트를 제목 2로 설정하였는데, 제목 2는 서두에서 말씀드렸듯이 H3태그가 되겠습니다. 구글 봇의 입장에서는 H1태그부터 순서대로 작성된 포스팅이 올바른 포스팅으로 인식 하므로 특별한 이유가 없다면 H1태그 부터 순서대로 사용하시는 것을 권유드리겠습니다.

 

 ※ 여기서 잠깐
만약 제목 1의 글씨 크기가 너무 커서 제목 1을 사용하지 않고 제목 2를 사용하셨더라면 제목 1의 크기를 제목 2의 크기와 동일하게 설정하실 수 있어요!

1. 관리 → 꾸미기 → 스킨 편집 → HTML 편집 클릭
2. CSS 클릭 후 Entry Content 검색
3. 원하는 h태그의 크리 조절 하기

 

 

---

 

h태그 관련 최종 정리

자신의 포스팅의 h태그가 적절히 사용되었는지 확인을 위해 간단하게 표를 그려 보았어요. 표를 보시고 자신의 블로그 점검을 간단히 해보는 것을 권유드릴게요.

 

등급	평가 항목
Excellent	포스팅의 제목 영역만 h1 태그를 사용하고 있으며, h1부터 h6까지 순서대로 사용하고 있음
Not bad	포스팅의 제목 영역은 h1 태그를 사용 하였지만, h1부터 h6까지 순서대로 사용하고 있지 않음
.......	복수개의 h1태그를 사용하고 있으며, h1부터 h6까지 순서대로 사용하고 있지 않음

 

---

 

오늘의 포스팅 마무리

이제 3일 뒤면 우리나라 20대 대통령을 선출하는 중요한 날이 다가오고 있어요. 선거라고 쓰고 악인 전이라고 읽는다고 하지만 선거를 하지 않으면 저희의 소중한 권리를 스스로 포기하는 것 이기에 꼭 선거는 하셨으면 좋겠습니다. 다음에도 도움이 되는 포스팅으로 돌아오겠습니다!