[SPA SEO] SPA에서의 SEO 문제

지난 SEO에 대한 이야기를 이어서

2023.01.12 - [Front-End/관련 지식들] - [Front-End] SEO의 개념과 중요성

[Front-End] SEO의 개념과 중요성

SPA에서 SEO에 대한 문제에 대해 이야기해보자

 

먼저 SPA에 대해 알아보자

SPA란?

SPA(Single Page Application)는 이름 그대로 최초로 가져온 하나의 페이지만을 사용하는 애플리케이션을 의미한다. 

 

고전적으로 사용하던 MPA(Multi Page Application)의 경우 최초로 받은 정적 페이지에서 클릭을 통해 다른 게시글로 이동하게 되면 페이지의 형식이 같더라도 이동하는 게시글의 정적인 전체 페이지를 가지고 온다. 그러나 SPA의 경우 최초 페이지에서 js, css, html을 모두 가지고 온 후 다른 게시글로 이동하면 그 변경된 부분만 가지고 와서 페이지를 동적으로 수정한다. 

여기서 SPA와 MPA의 장단점을 비교해보자

 

---

SPA

  장점

• 페이지 로딩 속도가 빠르다(변경된 부분만 가지고 오기 때문)
• 페이지 로딩 속도가 빠르기 때문에 사용자에게 좋은 경험(빠른 속도)를 제공할 수 있다

  단점

• 초기 로딩 속도가 느리다(모든 데이터를 가지고 와야하기 때문)
• SEO에 취약하다(아래 설명)

MPA

  장점

• 초기 로딩 속도가 빠르다(서버에서 렌더링된 데이터를 가지고 오기 때문)
• SEO에 강하다

  단점

• 페이지 로딩 속도가 느리다(전체 페이지를 가지고 와야하기 때문)
• 페이지를 가져오는 과정에서 깜빡거림이 발생한다
• 변경되지 않은 부분도 가지고 오기 때문에 성능이 저하될 수 있다.
• 프론트와 백엔드가 합쳐진 형태를 가지고 있기 때문에 서비스의 규모가 커질 경우 관리가 힘들어질 수 있다.

---

요즘 들어 많이 사용되고 있는 React나 Vue.js, Angular 는 SPA 라이브러리/프레임워크 이고 효율성이나 사용자 경험때문에 SPA를 많이 사용하고 있다. 

 

그러나 SPA의 경우 SEO 적용이 어렵다는 장점이 있다. 왜일까?

SPA가 SEO 적용이 어려운 이유

1. SPA는 하나의 페이지를 자바스크립트를 통해 여러 페이지로 만든다.

대부분의 SPA가 클라이언트에서 자바 스크립트를 렌더링하는 방식(CSR)을 사용하고 있다. 그래서 자바스크립트를 읽지 못하는 검색엔진의 경우 크롤링이 어려울 수 있고 자바스크립트를 읽는 경우에도 서버 쪽에는 렌더링되지 않은 자바스크립트를 가지고 있기 때문에 검색엔진에서 자바스크립트 파일을 가지고 와 렌더링하는 과정에서 많은 시간이 소요될 수 있다.  

 

2. 페이지가 하나이기 때문에 동일한 meta 데이터를 가지고 있다.

이전 게시글에서 각 페이지마다 구체적인 설명을 하는 meta 데이터를 가지고 있어야 한다고 했다. 

그러나 SPA에선 하나의 페이지(하나의 html)을 가지고 작동하기 때문에 만들어진 페이지들이 동일한 meta 데이터를 가지고 있다 그래서 우선순위가 많이 낮아질 수 있다.

 

3. 크롤러에겐 하나의 페이지로 인식될 수 있다. 

SPA의 경우 페이지 이동을 html을 통해 하지 않고 자바스크립트를 통해 한다. 그래서 하나의 페이지에 들어가 그 html 페이지에 등록된 url을 대기열에 저장하고 다시 저장된 url을 가지고 탐색하는 크롤러의 특성 상 전체 페이지를 탐색하지 못하는 경우가 발생한다. 

 

쉽게 생각하면 대부분의 SPA는 클라이언트에서 렌더링이 진행되기 때문에 렌더링 전에는 html에 body만 있는 깡통 페이지여서 크롤링 때 크롤링이 어렵다.

 

그러면 SPA에 SEO적용을 할 수 있는 방법으론 무엇이 있을까?

SEO 문제 해결 방법

SEO를 해결할 수 있는 방법은 여러 방법이 있다(SSR, 동적 렌더링, Histort API 등..)

 

이중 SSR에 대해서 이야기 해보겠다. 

 

2023.01.12 - [Front-End/관련 지식들] - [SPA SSR] SSR을 통한 SEO 문제 해결 / 언제 쓸까?

 

 

 

---

 

참고자료

https://hanamon.kr/spa-mpa-ssr-csr-%EC%9E%A5%EB%8B%A8%EC%A0%90-%EB%9C%BB%EC%A0%95%EB%A6%AC/

https://www.ascentkorea.com/seo-for-spa/

https://seunghyun90.tistory.com/92

https://velog.io/@kimtaeeeny/SPA-%ED%94%84%EB%A0%88%EC%9E%84%EC%9B%8C%ED%81%AC%EB%9D%BC%EC%9D%B4%EB%B8%8C%EB%9F%AC%EB%A6%AC-React-Vue-Angualr-FE-study7