오늘 4편에서는 웹사이트의 인상을 결정짓는 가장 중요한 요소, 바로 [제목 태그(H1~H6)]를 정복해 보겠습니다. 이 태그는 단순히 글자를 크게 만드는 도구가 아닙니다. 구글 로봇에게 "내 글의 핵심은 이거야!"라고 속삭이는 아주 전략적인 도구랍니다.
제목 태그란 무엇인가요?
HTML에서는 제목을 표현할 때 'Heading'의 약자인
<h> 태그를 사용합니다. 이 태그 뒤에는 1부터 6까지 숫자가 붙는데, 숫자가 작을수록(h1) 가장 중요하고 큰 제목을 의미합니다. 마치 군대의 계급처럼 엄격한 위계질서가 있다고 생각하면 쉬워요.<h1>: 우리 집 대문 (가장 중요)<h2>: 큰 방 이름 (중간 중요)<h3>: 서랍장 이름 (조금 중요)<h4>~<h6>: 아주 세세한 부분들 (거의 안 쓰임)
왜 숫자를 나눠서 써야 할까요? (SEO의 비밀)
<h1>을 남발하는 것이죠. 하지만 이건 아주 위험한 행동입니다.구글이나 네이버 같은 검색 로봇은 우리 웹사이트에 방문했을 때 제목 태그를 보고 글의 구조를 파악합니다.
h1 태그는 한 페이지에 딱 '한 번'만 쓰세요. 이것은 글의 '전체 제목'입니다. 만약 한 집에 대문이 두 개라면 손님이 헷갈리겠죠? 검색 로봇도 마찬가지입니다. h1이 여러 개면 "이 글의 진짜 주제가 뭐야?"라고 의심하며 점수를 깎아버립니다.
계단을 건너뛰지 마세요. 제목을 쓸 때는 순서가 중요합니다.
<h1>다음에 갑자기<h3>로 넘어가면 안 됩니다. 큰 제목(<h1>) 아래에는 소주제(<h2>)가 오고, 그 소주제 안에서 더 자세한 설명이 필요할 때<h3>를 쓰는 방식이어야 합니다.
직접 따라 하는 실습: 위계질서 잡기
index.html 파일을 다시 메모장으로 열어보세요. 내용을 싹 지우고 아래처럼 한번 입력해 볼까요?저장하고 브라우저로 열어보세요! 글자 크기가 계단처럼 차례대로 작아지면서, 글 전체의 구조가 한눈에 들어오지 않나요? 이렇게 쓰면 독자도 읽기 편하고, 구글 로봇도 "와, 이 글은 정말 체계적으로 잘 썼네!"라며 칭찬해 줄 거예요.
경험담: 제가 처음에 실수했던 것
저도 처음엔 "와! h1으로 쓰니까 글씨가 엄청 크고 멋진데?" 하면서 모든 소제목을 다 h1으로 도배했던 적이 있습니다. 결과는 어땠을까요? 당연히 검색 결과에서 제 글은 안드로이드 저 멀리 사라졌고, 한참이나 늦어졌습니다.
제목 태그는 '디자인'을 위한 도구가 아니라 '구조'를 위한 도구라는 점을 꼭 기억하세요. 글씨 크기를 조절하는 건 나중에 배울 'CSS'라는 친구가 담당할 테니, 지금은 "h1은 왕, h2는 신하, h3는 병사"라는 계급 체계만 확실히 지켜주세요.
초보를 위한 마지막 꿀팁
h1 태그에는 꼭 핵심 키워드를 넣으세요. (예: '김치찌개 레시피')
제목 태그 안에는 너무 긴 문장을 쓰지 마세요. 핵심만 짧고 굵게!
h4부터는 사실상 블로그에서 쓸 일이 거의 없습니다. h2와 h3만 잘 써도 충분히 훌륭한 글이 됩니다.
핵심 요약
제목 태그는
<h1>부터<h6>까지 있으며, 숫자가 작을수록 중요합니다.<h1>은 글의 주제이며, 한 페이지에 반드시 단 하나만 사용해야 합니다.제목 태그는 글씨 크기를 키우는 용도가 아니라, 글의 구조(목차)를 잡는 용도입니다.
<h1>-><h2>-><h3>순서로 계층을 지켜 쓰는 습관이 구글 승인의 지름길입니다.
[다음 편 예고]
<p> 태그를 쓰는 것의 엄청난 차이를 알려드릴게요!오늘 배운 대로라면, 여러분이 쓰려는 블로그 글의
<h1> 제목은 무엇이 될까요? 댓글로 한번 연습해 보세요!