오늘은 H 태그에 대해서 말씀드리겠습니다. 보통 전문적으로 티스토리 블로그를 운영하시는 분들은 HTML을 다루실 줄 알아서 H 태그가 뭔지 아시겠지만 모르시는 분들은 모르실 수도 있습니다. 그런 분들을 위해 H 태그의 뜻과 활용하는 사용법, 그리고 부제로 본문 크기 변경하는 방법과 이유에 대해서 포스팅해보겠습니다.
H 태그 뜻
H 태그는 제목을 뜻합니다. 포스팅의 제목, 그리고 티스토리 블로그 글쓰기 하실 때 상단에 보이는 사진 업로드하는 곳 옆에 제목 1,2,3 모두 H 태그입니다. 포스팅 작성하실 때 쓰시는 제목이 H1 태그라고 하고 본문에서 사용하는 제목 1,2,3은 차례대로 H2,3,4라고 부릅니다.
저희가 티스토리 블로그 하면서 HTML이나 CSS를 다 알 필요는 없지만 기본적인 건 알아야 합니다. 그렇다고 이번 포스팅에서 HTML에 대해서 심화적인 내용을 다루는 것이 아니기 때문에 가볍게 읽어주시면 좋겠습니다.
H태그의 중요성
일단 이 H 태그중에서 H1 태그가 제일 중요합니다. 정답부터 말씀드리면 H1 태그는 한 개가 꼭 있어야 됩니다. 없어도 안되고 두 개가 있어도 안됩니다. 내 포스팅에서 어떤 내용을 말해 줄 것인지, 즉 키워드의 기준을 잡는 곳이 바로 H1 태그 즉 제목에 있습니다.
많은 분들이 포스팅 작성하기 전에 다양한 키워드 도구로 키워드를 선별하고 그 키워드를 이용해 제목을 만들고 있습니다. 제목은 내가 어떤 내용을 말해줄 것인지를 검색자나 사용자에게 말해줄 수 있는 제일 첫 번째로 눈에 보이는 것들이기 때문에 어느 포털 사이트에서든 H1 태그, 제목은 상당히 중요합니다.
예시
커피를 테이크아웃 했다고 가정을 해보겠습니다. 아메리카노를 테이크 아웃했습니다. 그럼 당연히 내용물은 아메리카노가 들어있겠죠. 그런데 뚜껑(제목)에 아메리카노가 아닌 우유라고 적혀 있는 겁니다. 실제로 내용물이나 컵은 아메리카노가 분명히 맞습니다. 그런데 구글은 안에 들어있는 아메리카노(본문)를 먼저 보지 않고 뚜껑에 있는 우유(제목)를 가장 중요하게 생각합니다. 내용물에 아무리 많은 아메리카노(본문)가 들어가 있어도 로봇은 '아메리카노 아닌데 이거 우유인데'라고 판단을 합니다. 그래서 뚜껑이 우유라고 되어 있는 걸 보고 내용을 봤더니 내용이 자꾸 아메리카노이기 때문에 이상한 페이지라고 생각하고 뒤로 밀어버릴 수도 있습니다.
또 다른 경우로 컵 안에 아메리카노가 담겨 있습니다. 그런데 이번엔 뚜껑이 없는 겁니다. 우리, 사람들은 뚜껑(제목)이 없어도 내용물을 보고 '아 아메리카노구나' 할 수 있지만 구글 로봇은 그걸 모릅니다. 모르기 때문에 내용물을 보기 전에 뚜껑이 있는지 없는지 계속 찾는 겁니다. 그럼 구글 로봇, SEO가 상당히 혼란스러워하겠죠.
마지막 세 번째 경우로는 뚜껑이 두 개인 경우입니다. 뚜껑 하나에는 우유라고 적혀있고 또 다른 하나는 에이드라고 적혀있는 겁니다. 그럼 구글 로봇은 내용물을 보기 전에 뚜껑 두 개에서 왔다 갔다 하면서 우유인지 에이드인지 고민하다 뒤로 밀어버릴 수도 있습니다.
포스팅 제목(뚜껑입니다.)이 있고 본문에 제목 1,2,3 이 있습니다. 우리가 생각했을 때 본문에 있는 제목 1 이 H1 태그라고 생각하시는 분들이 상당히 많습니다. 하지만 본문에 있는 제목 1은 H2 태그입니다.
H2,3,4 태그 활용하는 방법
위의 사진처럼 포스팅 제목, 그리고 본문에 제목 1부터 3까지 차례대로 정리가 되어 있는데 많은 분들이 본문 제목 사용하실 때 한 가지만 사용하시는 분들이 계십니다.
- 구글 로봇이 헷갈려할 수도 있다
본문에 똑같은 H 태그가 있는 것은 사실 큰 문제가 되지는 않습니다. 하지만 SEO가 봤을 때 조금 헷갈려 할 수도 있습니다. 우리는 구글 로봇이 나의 웹사이트 혹은 페이지를 수집할 때 최대한 헷갈려하지 않게 구성을 해놔야 상위에 노출하기 위해 도움이 되길 원하기 때문에 본문의 H 태그도 순서대로 넣어주시는 것이 좋습니다.
제목과 본문 폰트 크기 변경하는 방법
우리가 다양한 포스팅을 작성하다 보면 본문 안에서 H 태그를 여러 번, 많이 사용해야 할 때가 있습니다. 그런데 저는 H 태그를 순서대로 사용하는 것이 좋다고 말씀드렸습니다. 제목 1을 우선으로 사용하고 제목 2도 사용하고 제목 3까지 사용했다고 가정하고 발행을 하시게 되면 제목의 크기가 모두 달라 가독성이 떨어질 수도 있습니다. 그리고 제목 3의 경우 본문 폰트 크기와 비슷하게 될 때가 있습니다. 이럴 때 H 태그의 크기를 변경해주시면 됩니다.
스킨 편집 → HTML 편집
- 스킨 편집창에서 CSS 편집
- 12줄에 위치해 있는 Entry Content를 복사해 검색(Ctrl+f)
- 중간쯤에 위치한 Entry Content h2부터 h4 font-size 00em 부분을 변경하겠습니다.
- H1은 포스팅 제목이기 때문에 변경할 필요 없습니다.
- font-size 00em 부분에 00에 원하시는 사이즈를 h2~h4까지 통일
- Entry Content a 아래 부분에 Entry Content p가 본문의 폰트 크기
- 본문의 폰트 크기도 변경하실 분들은 변경하셔도 됩니다.
여기까지 제목과 본문 폰트 크기 변경하는 방법과 H태그의 중요성과 활용방법, 그리고 H태그가 무엇인지 뜻까지 알아보았습니다. html 기준으로 말씀을 드리려고 하다 보니 내용이 다소 이해가 안 되는 부분도 계실지 모르시겠지만 H 태그는 어렵게 생각하지 않으셔도 됩니다. H 태그는 그냥 단순히 제목을 뜻하는 태그 이름이기 때문에 포스팅 제목과 본문의 제목 1부터 제목 3까지를 순서대로 구성만 해주신다면 구글 로봇이 헷갈려하지 않고 나의 페이지를 원활하게 수집해할 겁니다. 감사합니다.
댓글