제목 구조, 링크 이름, title 속성 바로 알기

페이지의 목차는 H1–H6로 만들고, 링크는 목적이 드러나는 이름을 제공합니다. title 속성은 보조 설명일 뿐 보이는 텍스트나 alt를 대신하지 못합니다.

09 / 10 · 12분 · 난이도: 초급 · 핵심: H1–H6 · 링크 이름 · title

시각적으로 글자를 크게 만드는 것과 HTML 제목으로 표시하는 것은 다릅니다. 제목 요소는 사람과 보조기술, 검색 시스템이 문서의 구조를 훑을 수 있게 만드는 의미 표지입니다.

H1–H6는 문서의 목차입니다

h1은 페이지 전체의 주제를, h2는 주요 장을, h3는 그 하위 절을 표현합니다. 숫자는 글자 크기가 아니라 계층입니다. 디자인 크기는 CSS로 조정하세요.

<h1>Meta Checker 사용 가이드</h1>
  <h2>메타데이터 확인</h2>
    <h3>제목과 설명</h3>
    <h3>Canonical URL</h3>
  <h2>이미지 확인</h2>
    <h3>alt와 파일 크기</h3>

H1 개수에만 집착하기보다 전체 구조가 페이지 내용을 자연스럽게 설명하는지 보세요. 빈 제목, 디자인을 위한 단계 건너뛰기, 모든 문장을 제목으로 만드는 패턴이 더 큰 문제입니다.

Meta Checker로 제목 구조 확인하기

Meta Checker 콘텐츠 탭의 긴 제목 구조와 빈 제목 문제를 표시한 화면
콘텐츠 탭은 H1–H6를 실제 문서 순서와 들여쓰기로 보여 줍니다.
  1. 1전체 제목 구조를 위에서 아래로 읽어 페이지 목차처럼 자연스러운지 확인합니다.
  2. 2텍스트가 없는 제목은 콘텐츠와 접근성 양쪽에서 의미가 없으므로 제거하거나 이름을 제공합니다.

콘텐츠 탭의 제목 구조를 엽니다

H1부터 H6까지 순서대로 표시됩니다. 항목을 누르면 실제 페이지의 해당 제목 위치로 이동할 수 있습니다.

페이지 주제와 H1을 비교합니다

<title>, H1, 본문 첫 문단이 서로 다른 주제를 말하지 않는지 봅니다.

계층이 갑자기 건너뛰는지 봅니다

H2 아래에 바로 H4가 반복된다면 CMS 블록이나 디자인 컴포넌트의 태그를 확인합니다.

빈 제목과 너무 긴 제목을 고칩니다

제목은 해당 절의 내용을 예고하는 짧고 구체적인 문장이어야 합니다.

“여기”, “더 보기”가 반복되거나 아이콘만 있는 링크는 목적을 알기 어렵습니다. 링크 텍스트, aria-label, 링크 안 이미지의 alt 중 하나로 이동 목적이 명확하게 전달되어야 합니다.

Meta Checker 링크 진단에서 전체 링크 통계와 이름 없는 링크 문제를 표시한 화면
링크 탭에서 내부·외부 링크 수와 이름 없는 링크를 찾습니다.
  1. 1전체·내부·외부·문제 링크 수로 페이지 구조를 빠르게 파악합니다.
  2. 2아이콘만 있고 텍스트, aria-label, 이미지 alt가 없는 링크는 목적이 없는 것으로 표시됩니다.
<!-- 나쁨: 목적을 알 수 없는 아이콘 링크 -->
<a href="/search"><svg aria-hidden="true">…</svg></a>

<!-- 개선: 접근 가능한 이름 제공 -->
<a href="/search" aria-label="사이트 검색">
  <svg aria-hidden="true">…</svg>
</a>

title="…" 속성은 무엇인가요?

HTML의 title 속성은 요소에 추가 설명을 붙입니다. 데스크톱에서 마우스를 오래 올리면 툴팁으로 보일 수 있지만, 터치 화면에는 hover가 없고 키보드·보조기술 지원도 일관적이지 않습니다. 그래서 중요한 정보나 링크 이름을 title 속성에만 넣으면 안 됩니다.

이름이 비슷한 것역할
<title>페이지 제목</title>문서의 공식 제목, 브라우저 탭과 검색 제목의 주요 신호
<h1>화면 제목</h1>본문에서 보이는 최상위 제목
title="추가 설명"요소의 보조 정보; 핵심 이름을 대체하지 않음
alt="이미지 설명"이미지를 볼 수 없을 때 전달할 텍스트 대체
현재 Meta Checker의 링크 진단은 title 속성 존재 여부를 점수화하지 않습니다.대신 링크 텍스트, aria-label, 이미지 alt를 기준으로 실제 이름이 있는지 확인합니다. title은 필요할 때만 보조적으로 사용하세요.

개선 체크리스트

  • H1이 페이지의 주제를 분명히 말한다.
  • H2–H6가 자연스러운 목차 계층을 만든다.
  • 빈 제목 요소가 없다.
  • 모든 링크의 이동 목적을 텍스트나 접근 가능한 이름으로 알 수 있다.
  • 중요한 정보를 title 속성에만 숨겨 두지 않았다.
  • 이미지 링크의 alt가 목적지를 설명한다.

더 읽기