검색어 노출을 위한 공부(시맨틱 마크업, ssr, csr)

시맨틱 마크업

HTML 요소가 그 콘텐츠의 의미를 나타내도록 구조화한 것. 시맨틱 마크업을 사용하면 웹 페이지의 내용이 더 의미있게 설명되고, 브라우저나 검색 엔진 혹은 스크린 리더 같은 기계가 페이지를 더 잘 이해할 수 있다.

예시

• <header>, <article>, <section>, <footer> 등의 태그는 콘텐츠 구조를 명확히 함. <header>는 페이지나 섹션의 머리글을 나타내고, <article>은 독립적으로 구분될 수 있는 콘텐츠 블록을 나타냄
• <nav> 태그는 내비게이션 링크를 그룹화.
• <aside> 태그는 주요 콘텐츠와 별도로 관련 정보나 사이드바를 나타냄.
• <main> 태그는 페이지의 주요 콘텐츠를 포함하는 부분을 나타냄.

시맨틱 마크업의 장점

• 접근성 향상: 스크린 리더는 시맨틱 태그를 사용하여 더 나은 내비게이션을 제공.
• SEO 개선: 검색 엔진은 시맨틱 마크업을 통해 페이지의 콘텐츠 구조를 쉽게 파악 가능.
• 유지보수성 향상: 코드가 더 의미 있게 구조화되어 개발자들이 쉽게 이해 및 수정 가능.

CSR 환경에서의 시맨틱 마크업

• 접근성: csr 환경에서도 시맨틱 마크업은 스크린 리더와 같은 접근성 도구에 유용. 웹 페이지가 동적으로 렌더링되더라도, 시맨틱 요소는 콘텐트를 구조화하는데 중요한 정보를 제공함.
• SEO(검색 엔진 최적화): CSR환경에서는 js로 동적 콘텐츠를 로드하지만, 구글과 같은 최신 검색 엔진은 sj를 실행하고 페이지 콘텐츠를 크롤링할 수 있음. 이때, 시맨틱 마크업을 사용하면 검색 엔진이 페이지 구조를 더 잘 이해하고, 콘텐츠를 더 효과적으로 인덱싱할 수 있음.
• 웹 표준 준수 및 코드 유지보수: 시맨틱 마크업을 사용하면 코드 읽기와 유지 보수 측면에서 편리해짐. 타인 혹은 차후 자신이 코드를 읽을 때 구조가 더 명확해지고 의도를 쉽게 파악할 수 있음. 또한, 웹 표준을 따르는 것은 장기적으로 프로젝트의 일관성과 안정성을 높임.
• 결론: CSR에서 시맨틱 마크업이 완전히 의미가 없다고 할 수 는 없음. 웹 접근성, SEO, 코드의 가독성 및 유지보수 측면에서 여전히 중요한 가치를 가지고 있음. 다만, CSR의 한계로 인해 SEO나 성능에 추가적인 고려가 필요할 수 있으며 경우에 따라서는 서버 사이드 랜더링(SSR)이나 정적 사이트 생성(SSG)을 결합하는 방식을 검토하는 것이 좋을 수 도 있음.