[ZIMZIM] SEO를 위해 시맨틱태그를 사용하자

ZIMZIM에는 현재 모두 클라이언트 컴포넌트로 되어있다. 하지만 서버컴포넌트로 변경되면 좋을 컴포넌트를 선별하여 리팩토링 할 예정이기에 시맨틱 태그를 먼저 지정해놓기로 했다.

 

 

시맨틱 태그가 SEO에 미치는 효과

검색엔진의 페이지 이해가 향상되며 페이지의 구조 개선, 접근성 향상 등이 있고 개발자 경험에도 도움이 된다.

기존에 단순 <div>로 되어있던 것을 역할에 따라 main, hedaer, section으로 분류하였다.

 

 

main(mdn)

주요 컨텐츠 영역은 main으로 감싸주었다.

 

header (mdn)

 

section

aria-labelledby(W3C, mdn)

ZIMZIM에는 대시보드에 3개의 차트가 있는데 그 부분을 하나의 section 태그로 묶고 aria-labelledby를 통해 스크린리더로 어떤 목적을 가지고 있는지 명확히 해줬다.

그 외에도 명확한 주제나 제목이 있을 경우 section 태그를 활용했다.