SPA 웹사이트를 위한 SEO 체크리스트

SPA 웹사이트를 위한 SEO 체크리스트

지난번 포스팅한 ‘SPA기반 웹사이트의 SEO’에서는 SPA(Single Page Application, 단일페이지애플리케이션)가 무엇이고 어떻게 동작하며, SPA를 구축하기 위한 프레임워크, 그리고 SPA가 SEO와 어떤 관계가 있는지를 중심으로 알아보았습니다. 이전 포스팅에서 SSR, 즉, 서버사이드렌더링과 history API 등 SEO문제 해결방안에 대해 간략하게나마 소개하였지만, 이번 글에서는 우리 SPA 웹사이트를 구축하기 전과 후에 어떻게 검색엔진최적화를 해야하는지 조금 더 알아보겠습니다.

웹사이트 구축 전

1. SSR (Server-Side Rendering, 서버사이드 렌더링)

검색엔진최적화를 위해 SSR은 웹사이트 구축 시에 가장 기본적으로 적용하는 것이 좋습니다. 검색엔진은 결국 서버에서 렌더링된 페이지를 확인합니다. 서버에서 이미 렌더링된 HTML이 검색엔진에게 보여진다면 검색엔진은 각 페이지의 내용을 확인한 후 검색결과에 반영할 것입니다.

2. 프래그먼트 사용금지와 History API 사용

검색엔진은 #가 포함된 URL을 별개의 페이지로 인식하지 않습니다. SPA로 구축된 웹사이트가 종종 #를 사용해서 프래그먼트로 각 페이지 URL이 구성되어있는 경우가 있습니다. 마치 한 페이지 내에서 이동하는 링크와 같은 것이지요. SPA가 Single Page App, 즉, ‘단일’페이지인 만큼 각 페이지의 URL구분을 주기위해 #를 사용한 Hash방식을 이용하는 것은 자연스러운 생각의 흐름이지만 SEO적으로는 불리한 접근입니다.
대신, History API를 사용하여 각 페이지별로 각각의 개별 URL이 존재하도록 설정하는 것이 검색엔진에게 다른 페이지임을 알려주어 색인될 수 있게 하는 좋은 방법입니다.

3. <a href=””>태그를 사용한 내비게이션

<a href=””>에서 “” 안에 #, #none, javascript:;, javascript:void(0);를 사용하여 내비게이션 하는 경우가 있습니다. 이런 방식을 사용하는 이유는 실제로 HTML을 통해 페이지를 이동하는 것이 아니라 “data-” 속성을 이용해서 자바스크립트를 호출하여 데이터를 불러오기 위해 기존의 a태그의 href속성을 무력화하기 위해 사용합니다. SEO를 위해서 위와 같은 방식으로 내비게이션하는 것은 지양해야합니다. 검색엔진은 페이지를 크롤링할 때, <a>태그의 href 속성을 타고 이동합니다. Javascription:void(0);형태로 href 경로가 설정되어있다면, 검색엔진에서 data-속성의 자바스크립트를 실행해서 확인해야하지만, 이것은 검색엔진에게 친화적이지 않습니다. 대신 <a href=”https://www.ascentkorea.com”>과 같이 사용하는 것이 좋습니다.

또한 일부 SPA웹사이트는 <a>태그를 사용하지 않고 <div>, <span>태그를 사용하여 내비게이션 하기도 합니다. 이러한 태그 또한 검색엔진이 인식할 수 없는 링크이기 때문에 사용하지 않는 것이 좋습니다.

내비게이션을 위한 링크는 <a href=””>형태를 사용하시기 바랍니다.

웹사이트 구축 후

1. Status Code

단일페이지어플리케이션(SPA)에서 종종 페이지가 존재하지 않는데 status code를 200으로 반환하는 경우가 있습니다. 이러한 경우에 status code를 반환하는 것은 검색엔진에게 혼동을 주어 없는 페이지가 검색엔진에 노출될 수 있습니다. (일반적으로 구글서치콘솔에서는 soft404를 반환하여 색인하지 않습니다.) 실제 존재하지 않는 페이지라면 적절한 status code를 반환하도록 설정하는 것이 좋습니다.

2. 사이트맵 제출

특히 SPA에서 sitemap.xml을 제출하는 것을 가장 중요합니다. 다시 말해, 검색엔진 크롤러가 알아서 페이지를 가져가도록 두게 되면 페이지가 색인되지 않는 경우가 종종 발생합니다. 그 이유는 일반적으로 SPA 웹사이트는 무한 스크롤 방식을 사용하여 스크롤을 내려야 콘텐츠가 서버로부터 해당 링크를 가져오기 때문입니다. 검색엔진은 직접 스크롤을 해서 모든 링크를 가져오는 수고로움을 감당하지 않으며, 처음에 렌더링된 페이지를 확인하고 다음 페이지로 넘어가게 됩니다. 따라서, 우리 웹사이트에 어떤 페이지가 있고 그 페이지가 색인되어야 한다면 반드시 sitemap을 생성하고 제출해야합니다.

3. 기본적인 SEO 설정

SPA에서도 MPA와 동일한 검색엔진최적화 시책이 적용됩니다. SEO 진단을 위해 Screaming Frog를 사용할 때 주의할 점은 있지만, 결국, Title, description, h-tag 등 기존 MPA 방식의 웹사이트에서 중요한 것은 여전이 중요합니다. 구체적인 SEO방법과 관련된 자세한 내용은 블로그:리스닝마인드에서 확인하세요.

마치며

검색자(잠재고객)의 검색에 잘 노출될 수 있도록 검색엔진에게 페이지의 내용을 잘 알려주는 것이 테크니컬 SEO라고 한다면 SPA이든 MPA이든 최적화의 원리는 동일할 것입니다. 검색엔진이 Crawling(크롤링)하고 Indexing(색인)하고 Ranking(랭크)하는 모든 과정을 우리가 원하는 내용으로 잘 수행할 수 있도록 검색엔진에게 신호를 보내는 것이 중요합니다. 이러한 관점에서 검색엔진을 이해한다면 SPA웹사이트에서 발생하는 SEO문제는 많은 부분이 해결될 수 있을 것이라고 생각됩니다.