[리팩토링] Advent Calendar 검색엔진 최적화(SEO)

1. 검색엔진 최적화를 하게 된 계기

앞서 번들 최적화 리팩토링을 진행하면서 Lighthouse 점수를 보았을 때, SEO 점수가 낮았음
크롬 비밀모드에서 메인화면 데스크탑으로 결과를 다시 측정했을 떄 아래와 같이 SEO 점수가 다른 점수에 비해 떨어지는 것 한 번 더 체크

이를 다음 과제로 생각하고 검색엔진 최적화에 대해 자세히 살펴보게 됨.

2. 원인분석

1) meta-description 누락 (score: 0)

• 모든 페이지에 <meta name="description"> 태그 없음
• 검색엔진이 페이지 설명을 가져올 수 없는 상태

2) robots.txt 유효하지 않음 (score: 0)

• /robots.txt 경로에 파일이 없어 SPA fallback으로 index.html이 반환됨
• Lighthouse가 HTML을 robots.txt로 파싱 → "Syntax not understood" 오류

3. 해결 방안

1) 모든 페이지에 meta-description 추가하기

어떤 방법으로?

• React19에서 meta 태그를 직접 컴포넌트에 추가하여 설정할 수 있어서 해당 방법으로 페이지별 설명추가

2) robots.txt 추가

• public 폴더에 robots.txt 추가

4. 목표 설정

• lighthouse 점수 높이기(현재 83점)

5. 해결 방안 적용

1) meta-description 모든 페이지에 추가

• index.html에 사이트 전체 description 추가
• React19에서 제공하는 meta 태그를 추가하여 페이지별로 추가
• 프로젝트 디테일 페이지는 설명에 프로젝트별 타이틀을 동적으로 설명 추가

2) robots.txt 추가

• public 폴더에 아래 내용이 작성된 robots.txt 추가

User-agent: *
Allow: /

6. 결과

• Lighthouse 83 → 100으로 점수 개선

7. 새로운 이슈 발견

이슈1: SPA로 비어있는 HTML을 먼저 받고 JS가 실행되면서 동적으로 내용을 채우면서 봇이나 크롤러가 인식하지 못하는 경우 발생

SEO에 관련해서 찾다가 CSR 방식으로 개발된 페이지들은 빈 페이지로 인식한다는 내용을 발견
SPA로 비어있는 HTML을 먼저 받고 JS가 실행되면서 동적으로 내용을 채우기 떄문임
실제로 해결 방안 적용 후 소스를 확인하니 아래와 같이 확인

페이지 진입 후 바로

• 처음에는 아래와 같이 index.html에 적용된 meta 태그만 보였음
  

페이지가 모두 뜬 후

• 페이지별로 return문에 설정한 meta 태그가 뜸
  

이슈2: 이슈1이 원인으로 카카오톡등 소셜 공유시 index.html에 적용된 미리보기만 적용된다고 함

• 앞선 이슈1과 동일하게 빈페이지로 받기 때문에 각 페이지 커스텀으로 미리보기 적용 불가

그렇다면 Lighthouse 점수가 오른 이유는?

• Lighthouse는 JS를 실행한 상태에서 측정하기 때문에, React 19의 head 태그 호이스팅이 정상 반영

이슈의 결론

• CSR은 구글은 JS로 렌더링하는 사이트도 크롤링할 수 있게끔 개선했으나 html의 컨텐츠만 수집하는 웹크롤러나 봇도 있어 SEO에 불리함
• Lighthouse는 JS를 실행한 상태에서 측정하기 때문에 실제 SEO 성능과 다를 수 있음

8. 이슈에 대한 대응

찾아본 해결하는 방법

1. Pre-rendering 라이브러리 도입

1) 상세 내용

• react-snap 라이브러리를 통해서 해당 라우팅 경로를 지정해주는 방법

2) 한계

• SSR이 나오면서 업데이트 지원이 잘 안된다는 글을 보았는데 지금 현재 환경에서 문제 없을지 확인이 필요함

2. Next.js 와 같은 SSR 지원 프레임워크 전환

1) 상세 내용

• Next.js로 마이그레이션하게 되면 SSR을 활용할 수 있어 설정이 쉬움

2) 한계

• 마이그레이션을 해야 한다.....

결론

1. 일단 react-snap과 같은 라이브러리를 도입할 수 있는지 지금 현재 개발 환경과 충돌이 없는지 확인 필요

2. React로 SSR을 구현하는 방법을 찾았는데 한 번 시도해 볼 필요가 있을 같음

3. 앞선 2가지 방법으로도 어렵다면 마이그레이션도 고려해보기

이슈에 대해 찾아보면서 느낀 점

일단 해당 이슈를 통해 왜 CSR의 SEO가 불리한지 구체적으로 알게 되었고 웹사이트의 특성에 따라 CSR, SSR 전략을 세워야함을 직접적으로 느낌.
CSR은 실시간으로 데이터가 오고가는 사이트에 적절하고 SSR은 SEO가 중요한 서비스에 적절함을 배웠음.
내가 만든 서비스를 생각해보면 친구와 공유하는 형태라 SNS 미리보기 지원 등의 SSR이었을 때 더 잘 맞는 서비스임을 깨달음.
아마도... 추후에는 Next.js로 마이그레이션을 진지하게 고민할 것 같음.
하지만 무작정 도입이 아니라 지금처럼 여러가지의 경우의 수를 보면서 근거가 타당할 때 의사결정을 할 것이고 그 전에는 현재의 사이트를 유지보수하면서 계속 만질 예정!

참고

• React 19 공식 문서
• robots.txt 설정하기
• robots.txt 10분 안에 끝내는 총정리 가이드
• 검색엔진 최적화(SEO) 기본 가이드
• 검색엔진최적화(SEO)에서 CSR을 선호하지 않는 이유
• React의 SEO 최적화 방법: React-Helmet-Async & Prerender
• 리액트 SEO에 관한 모든 것
• SEO 망치는 웹사이트, 혹시 CSR 때문? SSR로 바꾸면 벌어지는 일
• Vite 7 써봤더니, 빌드가 이렇게 빠를 수가
• [html]기본 SEO / [react] SEO pre-rendering 방식으로 먹이기
• React로 Next.js 처럼 Server-side-rendering 구현하기