춘천 홈페이지 H1·H2·H3 구조를
어떻게 나눠야 할까
- 2026. 05. 06
춘천 홈페이지 제목 태그는
디자인을 위한 장식이 아니라
콘텐츠의 뼈대다.
뼈대가 없으면 아무리 좋은 내용도 흩어진다.
H1·H2·H3는 글의 구조를 잡아주는 골격이다.
이 골격이 명확할수록
읽는 사람도, 검색엔진도
글이 무엇을 말하는지 빠르게 파악한다.
H1·H2·H3를 제대로 나누면
검색엔진도, 사람도
글을 빠르게 이해한다.
처음에는 어렵게 느껴질 수 있지만
원칙을 알고 나면 자연스럽게 적용된다.
글을 쓰기 전에 구조를 먼저 잡는 습관 하나가
SEO 성과와 글 품질을 동시에 끌어올린다.
1. H1은 페이지 전체를 대표한다
H1은
이 페이지가 무엇에 대한 글인지
한 문장으로 말해주는 제목이다.
글 전체를 통틀어 H1은 딱 하나여야 한다.
H1이 여러 개라면 검색엔진은
“이 페이지의 핵심이 무엇인가”를 결정하지 못한다.
주제가 분산된 페이지는 어떤 키워드로도
강하게 노출되기 어렵다.
하나의 H1이 하나의 명확한 주제를 잡아줄 때
나머지 구조가 그 위에 안정적으로 올라간다.
– 페이지당 1개만 사용
– 가장 핵심 키워드 포함
– 추상적인 문구보다 명확한 설명형 문장
예시
❌ “알아두면 좋은 정보”
⭕ “워드프레스 SEO 기본 설정 방법”
H1은
페이지의 정체성이다.
“알아두면 좋은 정보”는 어떤 페이지에든
붙일 수 있는 제목이다.
검색엔진 입장에서는 아무런 주제 정보를 주지 않는다.
반면 “워드프레스 SEO 기본 설정 방법”은
무엇에 대한 글인지, 어떤 사람이 찾을
글인지가 즉시 명확해진다.
H1을 쓸 때는 “내 독자가 검색창에 무엇을
입력했을까”를 먼저 생각하자.
2. H2는 큰 주제의 구분선이다
H2는
H1을 설명하기 위한 큰 단락 제목이다.
H1이 “이 글이 무엇에 대한 것인가”라면
H2는 “그 내용을 어떻게 나눌 것인가”다.
H2는 글 전체의 목차 역할을 한다.
H2만 쭉 읽었을 때 글의 흐름이 이해된다면
구조가 잘 잡힌 것이다.
– H1의 내용을 나누는 역할
– 글의 흐름을 단계별로 정리
– 섹션 단위의 핵심 질문
예시
– 왜 중요한가
– 어떤 문제가 생기는가
– 어떻게 해결하는가
H2만 읽어도
글의 전체 흐름이 보이는 것이 이상적이다.
검색엔진은 H2 태그도 중요한 구조 신호로 읽는다.
각 H2가 독립된 소주제를 담고 있으면
페이지 전체가 얼마나 깊이 있는 정보를 다루는지를
검색엔진이 더 잘 파악한다.
3. 아래 내용을 약 2배 분량으로 확장해드릴게요:
H3는 세부 설명용이다
H3는
H2 아래에서
내용을 한층 더 구체화하고 세분화하는 역할을 한다.
이것은 정보의 위계 구조에서 세 번째 레벨에 해당한다.
H2가 “어떻게 해결하는가”라는 큰 방법론을 제시한다면
H3는 그 해결 방법의 각 세부 단계나 구성 요소를
논리적으로 나누는 역할을 담당한다.
마치 책의 장(Chapter)이 H2라면
절(Section)이 H3인 것과 같은 관계다.
다만 모든 H2 아래에 H3가 반드시 있어야 하는 것은 아니다.
이것은 흔한 오해 중 하나다.
내용이 충분히 단순하고 짧다면 H3 없이 H2 바로 아래에
본문 단락으로만 구성해도 전혀 문제없다.
H3는 필요할 때만 사용하는 것이 자연스럽고 효과적이다.
H3가 특히 유용한 경우는 다음과 같다.
– 구체적인 예시를 여러 개 설명할 때
– 복잡한 과정을 단계별로 분해할 때
– 여러 항목을 체계적으로 정리할 때
– 비교 분석이 필요한 경우
간단히 말해
H2가 질문이라면
H3는 그 답변을 구성하는 세부 요소들이다.
구체적인 예시를 살펴보자.
H2가 “워드프레스 플러그인 설치 방법”이라면
그 아래 H3로 다음과 같이 단계를 나눌 수 있다.
* H3: “1. 관리자 페이지 접속하기”
* H3: “2. 플러그인 메뉴에서 검색하기”
* H3: “3. 설치 및 활성화하기”
* H3: “4. 기본 설정 완료하기”
또 다른 예시로
H2가 “SEO에 효과적인 콘텐츠 유형”이라면
– H3: “가이드형 콘텐츠”
– H3: “비교 분석형 콘텐츠”
– H3: “사례 연구형 콘텐츠”
– H3: “FAQ형 콘텐츠”
이렇게 각 유형을 H3로 구분하여 설명할 수 있다.
글이 길고 정보가 복잡할수록
H3는 독자가 원하는 특정 부분을
빠르게 찾아 이동하도록 도와준다.
특히 목차(Table of Contents) 기능을 사용할 때
H2와 H3가 명확하게 구조화되어 있으면
사용자는 전체 글을 스크롤하지 않고도
필요한 섹션으로 바로 점프할 수 있다.
검색엔진 관점에서도 H3는 의미가 있다.
구글의 featured snippet(강조 스니펫)이나
“People also ask” 섹션에 노출될 때
H3로 잘 정리된 내용이 선택될 가능성이 더 높다.
결국 H3는 선택적이지만 전략적으로 사용하면
독자 경험과 SEO 모두에 긍정적인 영향을 주는 강력한 도구다.
4. 제목은 '깊이 순서'를 지켜야 한다
제목 구조는
계단처럼 내려가야 한다.
HTML 헤딩 태그는 단순히 크기 조절용이 아니다.
문서의 계층 구조를 코드로 표현하는 것이다.
H1이 가장 상위이고 H2, H3로 내려갈수록 하위 개념이 된다.
이 계층을 뛰어넘으면 문서 구조가 무너진다.
* H1 → H2 → H3
* H1 아래 바로 H3 ❌
* H2 없이 H3 사용 ❌
이 순서가 깨지면
검색엔진은 콘텐츠 구조를 제대로 해석하지 못한다.
스크린 리더를 사용하는 사용자에게도 중요한 부분이다.
헤딩 구조가 제대로 되어 있어야 시각 장애가 있는 방문자도
페이지 구조를 이해할 수 있다.
SEO와 접근성을 동시에 챙기는 것이
올바른 헤딩 사용의 목적이다.
5. 제목 안에 제목을 넣지 않는다
한 문장 안에
여러 주제를 넣으면
구조가 흐려진다.
제목 하나에 두 가지 내용이 담기면
검색엔진은 어떤 주제가 핵심인지 판단하기 어렵다.
독자 입장에서도 제목만 봤을 때 이 섹션이
무엇에 대한 것인지
즉시 파악하기 어려워진다.
❌ “속도가 느려지는 이유와 해결 방법”
⭕ H2: 속도가 느려지는 이유
⭕ H2: 속도 개선 기본 방법
제목은
하나의 역할만 하게 만드는 것이 좋다.
“A와 B”나 “A·B·C”처럼 여러 개를 묶은 제목은
각각을 별도의 H2로 나누는 것이 구조적으로 더 강하다.
글이 길어지더라도 각 섹션의 주제가 명확해지기 때문에
독자의 이해도와 검색 성과 모두에 도움이 된다.
6. 키워드는 반복이 아니라 분산이다
같은 키워드를
모든 제목에 반복할 필요는 없다.
예를 들어 “워드프레스 SEO”라는 키워드를
H1, H2, H3 모두에 반복하면
오히려 부자연스럽고 과최적화로 판단될 수 있다.
키워드는 페이지 전체에 자연스럽게 분산되는 것이 좋다.
* H1: 대표 키워드
* H2: 연관 키워드
* H3: 구체 키워드
이렇게 나누면
검색엔진은
페이지 주제를 더 입체적으로 이해한다.
예를 들어 “워드프레스 SEO 설정”이 H1이라면
H2에는 “검색엔진 색인 관리”, “사이트맵 설정”,
H3에는 “Rank Math 플러그인 설치 방법”처럼
같은 주제를 다양한 각도에서 담아내는 것이 효과적이다.
이 구조는 관련 키워드를 함께 노출시키는 데도 유리하다.
7. 디자인과 구조를 분리해서 생각한다
큰 글씨 = H1
작은 글씨 = H3
이렇게 단순하고 직관적으로 생각하면
SEO 구조가 쉽게 깨지고 엉망이 되기 쉽다.
이것은 웹 개발과 SEO에서 가장 흔하게 발생하는 오해 중 하나다.
CSS를 사용해서 글씨 크기를 키우거나 색상을 바꾸고
굵기를 조절하는 것은 순수하게 시각적 처리에 불과하다.
이것은 사람의 눈에 보이는 표현 방식을 결정하는 것이다.
반면 HTML의 헤딩 태그(H1, H2, H3 등)는 문서의
의미적 구조와 위계를 정의하는 것이다.
이것은 검색엔진과 스크린 리더 등 기계가 문서를
이해하는 방식을 결정한다.
이 둘은 완전히 별개의 개념이며 서로
다른 목적을 가지고 있다.
실무에서 자주 발생하는 상황을 보자.
디자이너가 “이 문구를 페이지 상단에 크고
눈에 띄게 강조해 달라”고 요청할 때
경험이 부족한 개발자가 무의식적으로
H1 태그를 사용하면 SEO 구조가 의도와 다르게
엉켜버리는 문제가 발생한다.
결과적으로 중요하지 않은 홍보 문구가
페이지의 핵심 주제로 인식되고
정작 진짜 제목은 H2나 일반 텍스트로 밀려나게 된다.
이런 경우 다음과 같은 요소들은
반드시 제목 태그가 아니어도 된다는 것을 이해해야 한다.
– 디자인용 강조 문구 (예: “당신의 꿈을 현실로”)
* 브랜드 슬로건 (예: “혁신을 넘어 미래로”)
* 섹션 구분용 장식 문구 (예: “Our Services”)
* 감성적 카피 (예: “특별한 하루를 선물합니다”)
이런 요소들은
시각적으로는 크고 강조되어야 하지만
HTML 구조상으로는 div, span, p 태그 등으로 마크업하고
CSS로 원하는 크기와 스타일을 적용하는 것이 정확한 방법이다.
구조를 먼저 → 그 다음 디자인
바로 이 순서가 모든 것의 핵심이다.
이것은 웹 표준과 SEO의 기본 원칙이기도 하다.
올바른 작업 프로세스는 다음과 같다.
1단계: 콘텐츠 구조 설계
먼저 페이지의 정보 위계를 논리적으로 설계한다.
– 이 페이지의 주제는 무엇인가? → H1
– 주요 섹션들은 무엇인가? → H2
– 각 섹션의 세부 내용은? → H3
– 디자인 강조 문구는? → 일반 요소
2단계: HTML 마크업
구조 설계에 따라 적절한 태그로 마크업한다.
이 단계에서는 시각적 디자인을 전혀 고려하지 않는다.
순수하게 의미와 구조만 생각한다.
3단계: CSS 스타일링
각 태그에 CSS 클래스를 부여하고
원하는 디자인을 자유롭게 적용한다.
H1을 작게 만들 수도 있고
일반 div를 H1보다 크게 만들 수도 있다.
이렇게 구조가 먼저 명확하게 잡힌 상태에서
디자인을 입히면 SEO 효과와
시각적 완성도를 동시에 가져갈 수 있다.
검색엔진은 올바른 구조를 읽고
사용자는 아름다운 디자인을 경험한다.
구체적인 코드 예시를 보자.
잘못된 방식 (디자인과 구조 혼동):
“`html
<h1>당신의 꿈을 현실로</h1> <!– 크게 보이게 하려고 H1 사용 –>
<h3>서울 강남 인테리어 전문 업체</h3> <!– 실제 주제는 H3로 밀림 –>
“`
올바른 방식 (구조와 디자인 분리):
“`html
<div class=”hero-slogan”>당신의 꿈을 현실로</div> <!– CSS로 크게 스타일링 –>
<h1>서울 강남 인테리어 전문 업체</h1> <!– 구조상 올바른 H1 –>
“`
이렇게 하면 CSS에서 .hero-slogan을 H1보다
훨씬 크고 화려하게 만들 수 있으면서도
검색엔진은 “서울 강남 인테리어 전문 업체”를
페이지의 핵심 주제로 정확히 인식한다.
또한 반응형 디자인 측면에서도 이 분리는 중요하다.
구조는 동일하게 유지하면서
디바이스 크기에 따라 CSS만 다르게 적용할 수 있기 때문이다.
모바일에서는 H1을 작게, 태블릿에서는 중간,
데스크톱에서는 크게 표현하더라도
HTML 구조는 전혀 변경할 필요가 없다.
접근성(Accessibility) 관점에서도 이 원칙은 매우 중요하다.
시각 장애인이 사용하는 스크린 리더는 시각적 크기가 아니라
HTML 태그의 의미 구조를 읽어준다.
제목 태그가 올바르게 사용되면
스크린 리더 사용자도 페이지 구조를 빠르게 파악하고
원하는 섹션으로 쉽게 이동할 수 있다.
결국 “디자인과 구조의 분리”는
단순한 기술적 원칙이 아니라
SEO, 접근성, 유지보수성, 확장성을 모두 확보하는
현대 웹 개발의 핵심 철학이다.
이 원칙을 지키면
– 검색엔진은 페이지를 정확히 이해하고
– 디자이너는 원하는 시각적 효과를 자유롭게 구현하고
– 개발자는 유지보수하기 쉬운 코드를 작성하고
– 사용자는 아름답고 접근 가능한 페이지를 경험한다
모두가 만족하는 결과를 만들어낼 수 있다.
정리
H1·H2·H3 구조의 핵심은 이것이다.
– H1: 이 페이지는 무엇에 대한 글인가
– H2: 그 내용을 어떻게 나눌 것인가
– H3: 각 부분을 어떻게 설명할 것인가
제목 구조만 정리해도
글의 완성도와 검색 이해도가 함께 올라간다.
글을 쓰기 전 5분만 투자해서
H1 한 줄, H2 목록, H3 세부 항목을 먼저 정리해두자.
그 개요 자체가 이미 SEO 구조를 갖춘 뼈대가 된다.
뼈대가 잡힌 상태에서 본문을 채우는 것이
처음부터 쓰고 나중에 구조를 맞추는 것보다
훨씬 효율적이고 결과도 좋다.
“제목만 읽어도 글이 이해된다면, 구조는 이미 성공이다.”