heading 태그가 필요한 이유
효과적으로 정보를 전달하기 위해 문서에는 논리적인 구조가 필요하다.
웹 페이지도 정보를 전달하기 위한 문서의 한 형태이기 때문에 전달하려는 정보나 메시지를 효과적으로 전달하기 위해 논리적인 구조가 필요하다.
HTML에도 이런 논리 구조를 반영할 수 있도록 태그가 필요한데, 바로 <h1> ~ <h6>와 같은 표제 요소가 이를 위해 준비되어 있는 태그다.
검색 엔진이 각 표제 레벨에 따라 부여하는 가중치는 다르기 때문에 웹 페이지의 어떤 토픽에 어떤
단어에 어떤 표제 레벨을 부여하는 지는 상당히 주의를 기울여야하는 작업이라고 할 수 있다.
heading태그의 중요성
사이트 내의 모든 페이지는 유니크한 h 태그 구조를 가져야한다.
그렇기에 h태그는 페이지의 테마를 검색엔진에게 전달하는 중요한 역할을 담당.
타이틀 태그와 함께 h 태그는 검색 결과의 랭킹에 영향을 주는 중요한 랭킹 팩터.
올바르게 heading 태그 사용하기
1. 페이지당 한개의 h1을 사용하기
- 사이트의 톱페이지의 경우라면 사이트 타이틀에, 언론사의 기사 페이지라면 기사의 타이틀에, 그리고 상품 카탈로그 페이지라면 상품명에 h1을 부여하는 것이 가장 일반적인 h태그 설정법
- HTML5에서는 한 페이지 안에 여러개의 섹션이 있는 페이지의 경우 각 섹션별로 h1을 사용할 수 있도록 허용하고 있지만 검색엔진최적화의 입장에서는 이것을 추천하기는 어렵다. SEO의 현장에서는 이런 이유로 한 페이지의 복수의 h1을 사용하라고 권하는 경우는 존재하지 않는다.
2. 논리적 구성에 어긋난 사용을 지양하기
- 페이지의 논리적 구성과 관계없이 검색엔진에게 해당 웹 콘텐츠의 유입 키워드로 강조하고 싶은 키워드에 h 태그를 부여하는 행위와 특정 키워드를 방문자들이 보기에 눈에 띄게 만들고 싶어서 h 태그를 부여하는 행위는 둘다 해서는 안되는 행위다.
3. h요소의 순서를 지켜서 사용하기
- 중요성의 순서대로 h1~h6까지 지정한다.
- 단순히 규칙을 위한 규칙이 아니라 웹 페이지의 콘텐츠가 논리적인 구성을 가지게 하기 위해 정해진 규칙.
- 비 논리적인 구성의 h태그 구성을 가지게되면 SEO 측면에서 마이너스 평가를 받게 된다.
4. 섹셔닝 엘리먼트에 필수로 사용하기
- sectioning element 내에는 반드시 heading태그를 작성해야 한다.
- sectioning elements : 하나의 단원을 여는 것 → 단원에는 주제에 대한 제목이 있다
<section>, <nav>, <aside>,<article>- 보여지지 않아야하더라도 작성하고 안보이게 스타일링한다.
heading태그의 잘못된 사용법
- 사이트 내의 모든 페이지의 h1을 기업 로고에 부여
- 여러 페이지의 h2~h6 태그를 모두 동일하게 부여
사이트 로고, H1으로 쓰는 것이 시맨틱 면에서 과연 적절할까?
제공자의 입장에서 로고는 매우 중요한 정보이지만 이 문서를 읽는 사람의 입장에서는 그리 중요한 정보는 아닌 것이다. W3C 명세에서 <H1>에 대해 문서의 최상위 제목(주제)을 위한 요소라고 설명한다. 말인 즉슨, 현재 문서(페이지)의 내용 전체에 아우르는 주제 혹은 제목이 <H1>이라는 것.
#프론트엔드