자바 스크립트 기반 페이지의 SEO 취약성
거의 모든 SPA(Single Page Application)와 로딩 직후 자바 스크립트가 실행되어야 하는 웹 페이지는 SEO(Search Engine Optimization)에 취약합니다.
블레이저 WASM 이 여기에 해당되는데, 웹 크로울러가 기본 블레이저 앱을 방문했을 때, 볼 수 있는 유일한 문자는 index.html 에 포함된 아래가 전부입니다.
index.html 에 메타 태그를 추가하면 조금이나마 개선할 수 있습니다.
메타(meta) 태그 종류 & 사용법 (tistory.com)
블레이저 웹어셈블리의 장점
현재 .net 8.0 기반의 블레이저의 정식 출시가 목전으로, 여기에는 SSR(Server Side Rendering) 모드가 기본 옵션이라, SEO에 취약하지 않습니다.
그런데, 이 모드는 기본적으로 웹(서버)앱을 가정하기에, 호스팅 비용 지출을 전제하는 개발 방식입니다. 비용은 상업 개발 시에는 문제가 되지 않으나, 개인 프로젝트에서는 문제가 크죠.
시중에는 무료임에도 쾌적한 정적 호스팅 서비스가 많은데, Github Pages, Azure Static Webapp, Cloudfare Pages 등이 있습니다. (개인적으로 느끼기에, 클라우드패어 페이지스 무료 티어가 가장 쾌적한 것 같습니다.)
블레이저 WASM은 이러한 무료 호스팅 서비스를 기반으로 개인 프로젝트를 시장 테스트하는데 매우 좋은 선택지라 할 수 있습니다.
그러나, 유일하게 문제가 되는 부분이 SEO입니다.
SEO 최적화
최적화를 개선하는 방법은 크로울러를 위한 정적인 페이지(.html 파일)들을 생성(Pre-rendering)하는 것입니다. 이를 위해서 보통 두 가지 방법이 사용되는데,
빌드 타임 생성 자동화
아래의 글을 참고하세요.
Pre-render Blazor WebAssembly at build time to optimize for search engines (swimburger.net)
예. 저도 읽고 따라하다가 지쳤습니다.
전문 서비스를 이용하는 방법
대표적으로 prerender.io 등을 사용하는 방법인데, 특히 이 사이트는 프레임워크 별로 매우 전문적인 가이드를 제공합니다.
Prerender.io officially maintained middleware
컴포넌트 작성
어떤 방법을 쓰더라도 크로울러를 위한 정적 페이지를 생성할 준비가 되었다면, SEO를 전담할 레이저 요소를 작성해서 페이지 마다 끼워 넣으면 됩니다.
아래의 글을 참고하세요.
Blazor WASM SEO - You have a broken website according to Google! | Luke Parker (Hona)
