SPA에서 SEO 어캐함

원래 SPA는 어떤 URL로 들어와도 똑같은 index.html 하나만 주기 때문에 공유·크롤러 입장에선 전부 같은 페이지처럼 보이는데, 이 코드는 그 순간 index.html을 ‘가짜 SSR’처럼 살짝 바꿔서 URL마다 다른 메타태그를 만들어 주는 트릭이 있다.

유저는 “URL마다 다른 화면”을 보지만, 페이스북/트위터/카카오톡 미리보기 봇, 구글/네이버 같은 크롤러 이 친구들은 대부분 JS를 제대로 안 돌리거나, 돌려도 메타태그는 ‘처음 HTML 기준’으로만 읽는 경우가 많음. 

 

이걸 해결하는 전형적인 방법들

 

SSR/SSG 프레임워크로 갈아타기 (Next.js 등) : URL별로 서버에서 실제 HTML을 만들어 줌

프리렌더링 서비스 사용 (prerender.io 같은 것) : 크롤러가 올 때만 서버가 대신 JS를 돌려서 HTML을 만들어 줌

직접 서버에서 HTML을 조작하는 “미니 SSR 트릭” : 즉 “빌드 결과물” 그대로를 문자열로 받아서, 여기에 메타 태그만 살짝 교체하는 방식, 결과적으로, 이 함수가 리턴하는 HTML은 “처음부터 이 프로젝트 전용 메타를 가진 index.html”이 됨