HTML5 기초 <h> 태그란, 시맨틱 웹과 SEO의 기본

시멘팁 웹

시맨틱 웹(Semantic Web)이란 시맨틱 태그를 이용하여 웹 페이지를 의미있는 데이터 조합으로 만들도록 하는 웹으로 검색엔진의 크롤링을 돕는다.

간략히 하면 논리적인 구조이고 구글링 잘되는 좋은 웹이란 뜻입니다😓

이 글에서 다룰 헤딩태그도 시맨틱 태그 중 하나입니다. HTML5와 SEO의 단짝친구입니다.

https://www.w3schools.com/html/html_headings.asp

<h1></h1>같은 헤딩태그입니다.

제목태그란?

제목태그(헤딩태그,heading tag)는 h1부터 h6까지 총 6개가 있습니다.
h는 heading, 머릿말 또는 제목을 의미하며 뒤에 숫자는 제목의 계층구조를 의미합니다.
그렇다면 h1은 대제목이고 h6은 제일 하위 소제목이 됩니다.

태그 글씨 크기 = 구조

user agent stylesheet는 크롬의 내장CSS

브라우저 별로 헤딩태그는 글씨 크기가 다릅니다.

크롬 브라우저는 태그의 글씨크기가 font-size: 2em으로 지정되어 있습니다.

크기는 직접적으로 ❌중요도❌를 의미하지 않습니다.

웹사이트나 글의 논리적인 ⭐️계층구조⭐️를 보다 더 가시적으로 보여주기 위함일 뿐입니다.
글씨크기는 CSS를 이용하여 원하는 사이즈로 수정할 수 있습니다.

예시

블로그의 글과 대표적인 웹사이트 네이버의 제목태그 구조를 살펴 보겠습니다.

지금 보고 계시는 글입니다.
이 글의 구조는 이렇게 되어 있습니다. 책의 목차와 같죠?

검색엔진은 이런 구조에 기반하여 검색목록에 글을 노출 시킵니다.

그런데 캡쳐하고 보니 h2 건너뛰고 h3가 있네요? 어디갔죠..

어느 순간 저도 마크다운 문법으로 seo 생각안하고 글쓰다보니 블로그 글들의 제목 구조가 엉망입니다ㅋㅋ

수정해야 겠습니다.

네이버 제목태그 구조

사진에 표시된 H3 급상승검색어는 클릭해야 보입니다

전체적인 네이버 메인 웹페이지의 제목구조

우리나라의 대표적인 웹사이트인 네이버의 구조입니다.
그렇다면 모든 웹사이트가 저렇게 따라야 될까요? 아닙니다.
제목태그는 사이트의 기획 목적과 비즈니스 방향에 따라 설정해야 합니다.

서울시 제목태그 구조

좀 더 이해를 돕기 위해 헤딩태그가 더 많은 서울시 사이트도 아래 참고해 보세요.

https://www.seoul.go.kr/

크롬 앱 추천

다른 곳들은 제목태그 구조가 어떻게 되어 있을지 궁금합니다.

개발자도구(window F12)를 열어서 하나하나 확인해보는 노가다 방법이 있습니다.

(개발자도구에서 ctrl+f로도 검색 가능합니다 ^^)

하지만 인생 뭐하나 쉽지 않은데, 이거까지 어렵게 가지 맙시다.

크롬 앱 headings map을 설치하면 한 번에 구조를 보여줍니다.

h1에는 사이트의 제목?

웹사이트들의 제목구조를 보거나, 마크업하다 보면 의문이 듭니다.

h1에는 무조건 사이트의 제목? 로고?를 넣는게 맞는가? 많은 사이트들이 그렇거든요.

이 또한 마냥 그렇지 않습니다. 좀 더 심화되는 내용이기에 다른 글에서 다뤄 보겠습니다.