효과적으로 정보를 전달하기 위해 문서에는 SEO최적화된 논리적인 구조가 필요합니다. 좋은 내용일 지라도 1천 단어 이상의 글을 하나의 덩어리로 써버리면 읽는 사람의 입장에서는 글을 이해하기가 녹록하지 않습니다.
그래서 저는 글을 쓰면서 메인 주장을 담은 문단에 대제목을 그리고 이를 뒷바침하는 작은 주장이나 관련 근거를 다룬 문단에 중제목 등을 붙이는 방법으로 글의 논리적인 구조를 만듭니다.
웹 페이지도 정보를 전달하기 위한 문서의 한 형태이기 때문에 전달하려는 정보나 메시지를 효과적으로 전달하기 위해 논리적인 구조가 필요합니다. 따라서 웹 페이지 HTML에도 이런 논리 구조를 반영할 수 있도록 태그가 필요한데, 바로 ~ 와 같은 표제 요소가 이를 위해 준비되어 있는 태그입니다.
웹페이지의 논리구조를 나타내는 H태그 요소
HTML 문서의 논리구조를 나타내는 H태그(heading）요소가 h1〜h6 요소입니다. 하나 하나가 주제를 나타내는 블록 요소로, “H” 뒤에 이어지는 숫자는 주제의 단계를 나타냅니다.
h1은 제1 레벨 주제, h2는 제 2레벨 주제입니다. 단 검색 엔진이 각 주제 레벨에 따라 부여하는 가중치는 다르기 때문에 웹 페이지의 어떤 토픽에 어떤 단어에 어떤 주제 레벨을 부여하는 지는 상당히 주의를 기울여야하는 작업이라고 할 수 있습니다.
H1 태그
H1 태그는 웹 페이지의 주요 제목을 정의합니다. 한 페이지에는 하나의 H1 태그만 사용해
야 하며, 페이지의 콘텐츠와 목적을 명확하게 전달해야 합니다.
H2 태그
H2 태그는 H1 태그 다음으로 중요한 제목을 나타냅니다. 웹 페이지 내에서 여러 개의 H2
태그를 사용할 수 있으며, 섹션의 제목으로 사용됩니다.
H3~H6 태그
H3~H6 태그는 H2 태그 다음으로 낮은 수준의 제목을 나타냅니다. 보조적인 제목이나 세
부 항목을 표시하는 데 사용됩니다.
h1〜h6 요소를 사용하여 웹 문서가 다루고 있는 정보의 구조를 명확하게 표현할 수 있습니다. h1 요소를 뿌리라고 하고, 뿌리에서 나온 줄기를 h2 요소로 보고, 줄기에서 나온 가지를 h3 요소로 가지에서 나온 잔가지를 h4 그리고 그 잔가지에서 나온 잎을 h5라 할 수 있는데 이 처럼 웹 문서의 표제는 보다 중요한 부분부터 순서대로 계층 형태로 전개하는 구조를 가집니다.
이 표제 요소들은 웹 문서구조를 표현하는 HTML의 성격을 잘 나타내주는 요소라고 할 수 있습니다.
h1〜h6 각각의 요소에 설정하는 내용은 그 뒤에 따라 나오는 단락의 내용을 종합하는 것이 어야합니다. 어떤 웹 페이지의 표제가 잘 정리되어 있다면 독자들은 대 표제(h1)부터 중 표제(h2) 정도만 한번 훑어보는 것만으로도 웹 페이지의 내용을 대략 이해할 수 있어야 합니다.
좀더 복잡한 구조의 문서라면 좀더 작은 단위의 표제(h3 ~ h4) 정도의 내용을 보는 것으로 전체 맥락을 쉽게 이해할 수 있게 됩니다.
이렇게 만들어진 표제가 잘 정의된 문서들은 자연스럽게 논리전개가 명확하게 되어 유저에게도 검색엔진에게도 이해하기 쉬운 문서가 됩니다.
티스토리나 워드프레스의 경우 자동 목차 만들기를 통한 목차를 사용하는것이 굉장히 좋습니다. 자동목차 만들기 OR 가독성 좋은 서식을 만들기는 검색시 잘나와있으니 혹시라도 안되시는 분은 개인적으로 연락주시면 도움을 드리겠습니다.
