React SPA는 사용자에게 빠르고 유연한 화면을 제공하지만, 검색 봇과 광고 심사 봇이 처음 받는 HTML이 비어 있으면 문제가 될 수 있다. 브라우저에서 JavaScript가 실행된 뒤에는 글이 보이더라도, 초기 HTML에 제목과 본문이 충분히 없으면 콘텐츠 품질을 제대로 전달하지 못할 수 있다.

이 글은 프론트엔드 기술 블로그 SEO 기본 점검표의 구현 편이다. React 기반 기술 블로그에서 정적 HTML을 준비하는 이유와 확인 기준을 정리한다.

초기 HTML에 본문이 있어야 하는 이유

검색 엔진은 JavaScript를 실행할 수 있지만, 모든 상황에서 즉시 완전하게 렌더링한다고 가정하면 위험하다. 특히 애드센스 심사처럼 사이트 품질을 빠르게 확인하는 과정에서는 초기 HTML의 제목, 설명, 본문, 내부 링크, 정책 페이지 링크가 중요할 수 있다.

그래서 SPA 블로그라도 글 상세 페이지는 사전 렌더링으로 HTML 파일을 만들어 두는 편이 안전하다. 사용자는 React 앱을 그대로 사용하고, 봇은 본문이 들어 있는 정적 HTML을 먼저 받을 수 있다.

페이지별 메타 태그를 만든다

사전 렌더링을 할 때는 본문만 넣는 것이 아니라 title, meta description, canonical, Open Graph 태그도 페이지별로 바꿔야 한다. 글 상세 페이지라면 Article 구조화 데이터도 함께 넣을 수 있다.

const articleSchema = {
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": post.title,
  "datePublished": post.date,
  "dateModified": post.updated
};

구조화 데이터는 순위를 보장하는 장치가 아니라 페이지 내용을 명확히 설명하는 신호다. 제목과 날짜, 작성자, 대표 이미지가 실제 본문과 일치해야 한다.

사이트맵은 생성 결과와 함께 갱신한다

글을 추가했는데 사이트맵에 빠져 있으면 검색 엔진이 새 URL을 발견하는 데 시간이 걸릴 수 있다. 반대로 사이트맵에는 있는데 실제 페이지가 없으면 품질 신호가 나빠질 수 있다. 빌드 과정에서 posts 데이터와 정책 페이지 데이터를 읽어 사이트맵을 생성하면 누락을 줄일 수 있다.

이 구조는 글이 늘어날수록 중요해진다. 앞으로 고품질 글을 추가할 때마다 HTML과 사이트맵이 함께 갱신되면 운영 부담이 줄어든다.

내부 링크도 정적 HTML에 들어가야 한다

React 앱 안에서만 보이는 내부 링크보다, 사전 렌더링된 HTML에도 들어간 링크가 더 명확하다. 글 본문 안의 관련 글 링크, 푸터 정책 페이지 링크, 자료실의 대표 가이드 링크가 모두 정적 HTML에 포함되어야 한다.

예를 들어 이 글은 애드센스 승인 전 점검표와 기술 블로그 SEO 점검표로 연결된다. 사용자는 운영 기준을 이해하고, 검색 봇은 주제 구조를 따라갈 수 있다.

정리

React SPA에서 SEO와 애드센스 심사를 고려한다면 초기 HTML을 비워두지 않는 것이 좋다. 사전 렌더링된 본문, 페이지별 메타 태그, Article 구조화 데이터, 사이트맵, 정적 내부 링크를 함께 준비하면 사이트가 더 안정적으로 읽힌다.

사전 렌더링 결과를 직접 열어 확인한다

React 화면에서 글이 잘 보인다고 해서 사전 렌더링 HTML도 완성됐다고 볼 수 없다. 빌드 후 생성된 dist/post/slug/index.html 파일을 직접 열어 title, description, canonical, 본문 첫 문단, 내부 링크, 푸터 정책 링크가 들어 있는지 확인해야 한다. 애드센스 심사처럼 자동화된 확인 과정에서는 이 초기 HTML 신호가 중요할 수 있다.

특히 글 데이터가 JavaScript 배열에 있고 빌드 스크립트가 이를 읽어 HTML을 만드는 구조라면, 새 글이 추가될 때마다 사이트맵과 정적 HTML이 함께 갱신되는지 확인해야 한다. 누락된 URL이나 빈 HTML은 사이트 품질을 약하게 보이게 한다.

SPA 메타 태그와 정적 HTML 메타 태그를 맞춘다

React 앱에서는 Helmet 같은 도구로 메타 태그를 바꿀 수 있다. 하지만 사전 렌더링 스크립트가 별도로 HTML을 생성한다면 두 곳의 값이 어긋날 수 있다. 예를 들어 React 화면의 제목은 새 글 제목인데, 정적 HTML의 title은 홈 제목으로 남아 있으면 검색 봇이 페이지를 잘못 이해할 수 있다.

가장 안전한 방식은 같은 글 데이터에서 React 렌더링과 사전 렌더링이 모두 값을 가져오게 만드는 것이다. 이 사이트의 경우 posts 데이터에서 제목, 설명, 날짜, 본문, 관련 글을 읽어 HTML과 사이트맵을 함께 생성한다.

관련 글도 빌드 시점에 결정되게 한다

관련 글을 단순히 최신 글 3개로 보여주면 독자에게도 검색 봇에게도 주제 구조가 명확하지 않다. 이미지 압축 글은 오류 처리, 벤치마크, Canvas 리사이즈 글로 연결되고, SEO 글은 애드센스 점검표와 SPA 사전 렌더링 글로 연결되는 편이 자연스럽다. 그래서 관련 글은 가능하면 수동 맵 또는 주제 기반 규칙으로 결정하는 것이 좋다.

이 방식은 내부 링크를 억지로 늘리는 것이 아니라 정보 구조를 보여주는 일이다. 애드센스 승인 관점에서도 같은 주제 안에서 깊이 있는 글들이 서로 연결되어 있으면 사이트의 전문성이 더 분명해진다.

정리 전에 실제 검사 항목을 남긴다

  • 빌드 후 글 상세 HTML에 본문이 들어 있는지 확인한다.
  • 각 글의 canonical URL이 사이트맵 URL과 일치하는지 확인한다.
  • Article 구조화 데이터의 제목, 날짜, 이미지가 실제 글과 일치하는지 확인한다.
  • 본문 내부 링크와 관련 글 링크가 정적 HTML에도 포함되는지 확인한다.
  • 푸터의 정책 페이지 링크가 모든 주요 페이지에 노출되는지 확인한다.