SEO 최적화

SSR: 

 서버사이드 렌더링 방식이다. 

JS를 이용한 렌더링이 아니므로 SEO가 최적화 되어있다, HTML에 모든 컨텐츠가 저장되어있다.

 

CSR:

클라이언트 사이드 렌더링 방식이다.

HTML을 그리는 역할을 클라이언트가 JS로 수행을 한다.

 

여기서 발생하는 문제가 

SEO는 HTML에서만 컨텐츠를 수집을 한다.

그러다 보니 CSR은 빈페이지로 인식이 된다.

 

이렇다 보니 CSR이 SEO 최적화의 문제가 있는 것이지 CSR이 SEO가 안된다는 것은 잘못된 표현이다.

 

구글봇 같은 경우는 JS를 지원하여 검색엔진을 JS로도 가능하게 하였고

네이버 같은 경우도 JS를 지원하여 가능하기는 하지만 많은 리소스들이 사용됨으로 인해서 SSR을 더 권장한다.

 

이외에도 리액트나 vue.js같은 경우도  next.js 프레임 워크를 이용해서  SSR을 지원하여 SEO를 최적화 할수있다.

 

그외의 방법으로는 검색엔진은 HTML에 title이나 meta tag를 통해서 파싱하여 정보를 수집하기에 CSR에

메타태그 설정과 타이틀을 잘 적어주면 충분히 검색엔진에서도 최적화를 발휘할수 있지 않을까 생각해본다.

 

그예로 description,og태그를 읽고 페이지의 이미지와 title, description을 보여주는 것을 확인 할수있다.

twitter태그도 비슷한데 twitter전용으로 있는 메타 태그이다.

 

vue.js에서 가장 위에 검색된 페이지들은  html에서 seo를 거친 페이지들이다 .

그래서 이방식은 SSR은 다르지만 미리 정적으로 HTML을 만들어놓고 요청시  JS를 같이 보내는 식으로 구성을 한다.