이한빈
시멘틱 마크업이란?
시맨틱 마크업은 HTML 요소를 사용하는 방식으로, 단순히 시각적 목적이 아닌 요소의 의미를 잘 나타내도록 작성하는 방식을 말함.
예를 들어, <div>와 <span> 같은 비시맨틱 태그가가 아닌, <header>, <footer>, <article>, <section> 같은 시맨틱 태그를 사용하여 문서 구조와 콘텐츠의 역할을 명확하게 하는 것
그렇다면 왜 중요할까?
첫째, 접근성을 개선하기 위함. 시맨틱 요소들은 스크린 리더와 같은 접근성 도구에서 콘텐츠의 구조를 더욱 잘 해석할 수 있게 해 주어 시각장애인이나 노인 등 다양한 사용자층이 사이트를 효과적으로 탐색할 수 있게 한다. 이러한 요소를 올바르게 사용하면, 더 많은 사람들에게 접근 가능한 웹 환경을 제공할 수 있다.
둘째, SEO(검색 엔진 최적화)에 유리합니다. 검색 엔진은 HTML의 시맨틱 구조를 통해 페이지의 구성을 파악한다. 그렇기에 시맨틱 마크업을 적절히 적용하면, 검색 엔진이 페이지를 올바르게 파악할 수 있고, 그에 따라 검색 결과에서 페이지가 더 잘 노출될 가능성이 높아진다.
CSR(Client Side Rendering)에서도 시맨틱 마크업이 SEO에 영향을 미칠까? 🤔
CSR 환경에서는 시맨틱 마크업이 SEO에 주는 영향이 다소 제한적일 수 있지만, 여전히 중요한 역할을 한다.
CSR에서는 대부분의 콘텐츠가 클라이언트 측에서 렌더링되기 때문에, 검색 엔진이 페이지를 크롤링할 때 페이지의 초기 콘텐츠만 인식할 가능성이 크다. 그렇더라도 최근 검색 엔진들은 JavaScript 렌더링을 지원하는 방향으로 진화하고 있으며, 페이지의 시맨틱 구조를 어느 정도 파악할 수 있다. 따라서 시맨틱 마크업을 제대로 적용하면 CSR에서도 검색 엔진이 콘텐츠의 중요한 부분을 더 쉽게 인식하게 되어 검색 결과에 긍정적인 영향을 미칠 수 있다.