☘️ SSR 도입하기
모든 자바스크립트 파일을 받아서 렌더링을 하는 CSR과는 달리 SSR은 JS를 차순을 두어 렌더링을 진행하게 된다.
그런데 이러한 특성 때문에 CSR 성질을 띄는 일반적은 SPA 개발에서는 SEO를 제대로 활용하기 어렵고 SSR을 적절히 섞어서 개발해야 SEO를 할 수 있다.
CSR로 개발하면 초기 HTML 파일이 비어있기에 크롤러가 서버에 접속해서 해당 html의 정보를 획득하기가 어려워진다.
하지만 SSR을 활용하면 검색엔진들이 이미 서버쪽에서 만들어진 HTML을 크롤링 가능하기에 검색에 유리하다
☘️ 시멘틱 태그
Semantic Tag 는 HTML 태그로써, 컨텐츠의 의미를 정의하는 태그이다.
검색엔진이 해당 컨텐츠를 잘 인식하기 위해서는 HTML태그를 정확히 활용하여 해시태그 하듯 컨텐츠의 정보를 잘 나타내는 것이 중요하다고 한다.
<div>, <span> 과 같은 태그들은 의미를 담지 않고, 그냥 무언가 나누는 (divide)것을 목적을 둔 비의미적 HTML 태그는 시멘틱 태그가 아니다.
<header> : 페이지 또는 섹션의 소개를 주체로 페이지의 주제를 내용으로 설정해놓으면 된다.
<nav> : 말그대로 네비게이션 링크에 사용이 된다. <header> 스코프 내로도 작성 가능하지만 따로 분리되어 사용도 가능
<main> : 페이지의 본문을 포함하며, 페이지당 이 태그는 단 한번만 사용되어야 한다.
<article> : 해당 페이지나 사이트와는 독립적인 컨텐츠를 사용할 수 있는 태그며, 아마 재사용 가능한 구간에 사용이 되는 것 같은데, 예로들면 해당 페이지는 외부와 구분되어 단독으로 사용되는 것이 중점이면 그 태그를 사용하면 될 것 같다. (블로그 포스트, 신문기사)
<section> : 비슷한 주제의 주변 컨텐츠들을 그룹으로 묶는 태그.
<aside> : 사이드바같은 형식에 많이 사용되는 태그이다.
<footer> : 하단의 연락처 정보나 저작권, 혹은 해당 회사의 위치 정보가 될 수도 있는 정보들을 페이지 하단에 작성할 수 있는 태그.
💫💫 시멘틱 태그에 스타일을 적용하면 안된다 !!
검색 엔진은 시멘틱 태그를 사용하여 웹 페이지의 구조를 이해합니다.
스타일을 시멘틱 태그에 적용하면 검색 엔진이 웹 페이지의 구조를 이해하는 데 어려움이 있습니다.
스타일을 시멘틱 태그에 적용하면 웹 페이지의 로딩 속도가 느려질 수 있습니다.
스타일을 시멘틱 태그에 적용하면 웹 페이지의 유지 관리가 어려워질 수 있습니다.
위와 같은 이유에 따라 시멘틱 태그엔 별도로 스타일을 적용하지않을 것 !!
