[PHOBUM] React SEO 적용

2025-01-08 4 분 소요

SEO란?

SEO(Search Engine Optimization)은 웹사이트가 유기적인(무료) 검색 방식을 통해 검색 엔진에서 상위에 노출될 수 있도록 최적화 하는 과정입니다.

그렇다면 React는 왜 SEO에 취약할까?

React가 SEO에 취약한 이유

React는 하나의 html 파일만을 가지고 js를 통해 주소에 맞는 내용을 렌더링 시키는 Single Page App (SPA)를 제공합니다.

그래서 각 페이지에 맞는 적절한 html 파일을 가지고 있지 않기 때문에 검색 엔진 최적화에 불리합니다.

SSR(Server Side Rendering)

SSR은 Server Side Rendering의 약자로 서버측에서 페이지를 렌더링 하는 것입니다.

서버에서 브라우저에 나타낼 html파일을 미리 준비해서 응답을하는 형식입니다.

그러나 SSR 방식의 단점은 일부분의 데이터만 따로 업데이트가 불가능해 페이지 전체를 리렌더링 한다는 점입니다.

일부분의 데이터 변경이 필요한 경우에도 매번 전체 페이지를 새로고침해야한다는 불편함이 있었습니다.

이러한 문제를 해결하기 위해서 등장한것이 CSR과 SPA입니다.

CSR(Client Side Rendering)와 SPA(Single Page Application)

CSR은 Client Side Rendering의 약어로 웹 사이트의 콘텐츠가 사용자의 브라우저(클라이언트)에서 동적으로 생성되어 렌더링 되는 방식입니다.

처음 index.html을 보면 <div id="root">안에서 클라이언트가 동적으로 JavaScript 또는 TypeScript를 통해서 html 문서를 그립니다.

즉, 하나의 html 페이지에서 사용자의 요청에 따라서 콘텐츠가 동적으로 변하고 전체 페이지 새로고침 없이 부분적으로 화면 업데이트가 가능하여 SPA라는 형태를 보이게 됩니다.

이는 전체페이지를 재렌더링 할 필요없이 부분적인 업데이트가 가능합니다.

그래서 페이지를 보는 사용자는 편리하게 웹 사이트를 사용할 수 있습니다.

그러나 CSR 형식은 SEO에 취약합니다.

React의 SEO 최적화 방법

[사용자 친화 웹] React에서 검색엔진 최적화(SEO)하는 방법들

위 블로그를 참고하자면 크게 7가지가 있습니다.

robots.txt 설정

구글 웹 크롤러 봇에게 수집 정보를 알려주는 robots.txt 파일을 설정해줍니다.

React에선 public 폴더내에 작성합니다.
pre-render(SSR/SSG)

SSR인 Next.js 사용하거나 react-snap 라이브러리를 사용해서 빌드 될때 미리 렌더링을 합니다.

SSG(Static Site Generation / Static Rendering)
배포 시점, 즉 빌드 시에 정적 파일을 생성하는 방식
meta tag

title, namge, content 등의 meta tag를 설정하는 방법입니다.

React는 설정할 수 있는 정적 페이지가 index.html하나 이므로 react-helmet라이브러리를 사용해서 페이지별 메타태그를 변경할 수 있습니다.
올바른 Status Code 사용

200, 404 등 올바른 HTTP status code를 사용해야합니다.
올바른 URL 사용

페이지별로 링크되는 fragment(#) 사용을 지양합니다.
링크에 <a href> 사용

해당 태그가 없으면 구글이 URL을 크롤링하지 못합니다.
click이나 hover등의 유저의 이벤트 결과로 컨텐츠가 나타나는 경우 검색에서 제외될 가능성 높음

대신에 Modal이나 Tabs등을 사용합니다.

SEO 적용 참고

https://velog.io/@parallelkim/%EB%A6%AC%EC%95%A1%ED%8A%B8-SEO%EC%97%90-%EA%B4%80%ED%95%9C-%EB%AA%A8%EB%93%A0-%EA%B2%83

https://lasbe.tistory.com/179

https://3d-yeju.tistory.com/70

Open Graph(OG) 메타 태그

OG 메타 태그는 소셜 미디어에서 웹 페이지가 공유될 때 미리보기 정보를 제공하는 데 사용됩니다.

일반 메타 태그와 작성방법이 거의 유사합니다.

<meta property="og:title" content="미리보기 제목">

<meta property="og:description" content="미리보기 설명">

<meta property="og:image" content="미리보기_이미지_경로.jpg">

<meta property="og:type" content="website">

<meta property="og:locale" content="Ko_KR">

…

sitemap.xml

사이트맵은 검색 엔진 크롤링 로봇에게 웹 사이트에서 크롤링 해야할 URL을 전달하는 역할을 합니다.

사이트 맵은 해당 사이트의 URL 모두 XML 파일 형식으로 포함하는데 웹 사이트 운영자는 각 URL과 추가 정보로서 이 URL 콘텐츠의 최종 업데이트 시점 및 업데이트 빈도, 그리고 다른 URL대비 상대적인 중요도 정보를 담을 수 있습니다.

최적화를 위해서 sitemap.xml을 생성하는 과정은 두가지입니다.

리액트 앱에서 동적 URL 목록 생성(리액트 라우터를 사용하는 경우)
sitemap.xml 파일 생성 및 서버에 배포

동적으로 URL을 추출하는 방법은 대규모 프로젝트에서 주로 사용하는데 페이지 수가 많거나 동적 라우팅을 사용하는 경우에 유용합니다.

리액트 앱에서 동적 URL 목록 생성

리액트 앱에서는 보통 라우터를 사용해서 페이지를 구성합니다. 이 때, 동적으로 생성된 URL을 수집해야하기 때문에 URL 목록을 자동으로 생성하는 방법이 필요합니다.

React Router 사용 시, 라우팅된 페이지의 URL 목록을 추출하기

라우터 정보를 기반으로 URL 목록 생성

react-router-dom에서 사용하는 라우팅 정보를 수집해서 sitemap.xml파일을 생성합니다.

react-router-config를 사용해서 모든 라우트의 정보를 가져올 수 있습니다.
동적으로 URL을 추출하여 XML 파일 생성

이를 바탕으로 사이트의 모든 URL을 동적으로 추출한 후에 XML 형식으로 변환합니다.

**sitemap-generator **

URL 목록 추출하고 sitemap.xml 파일을 자동 생성하려면 sitemap-generator패키지를 사용하거나 sitemap.js를 직접 구현합니다.

Sitemap.xml 생성

리액트 프로젝트에서는 빌드 후 sitemap.xml 파일을 자동으로 생성하고 이를 서버에 배포할 수 있습니다. 이를 위해서 서버 사이드 sitemap.xml 을 동적으로 생성하는 작업을 해야합니다.

sitemap 패키지 설치

npm install sitemap
yarn add sitemap

sitemap.js파일

src디렉터리 안에 generateSitemap.ts 파일으 생성하고 여기에 sitemap을 생성하는 코드를 작성합니다.

// src/generateSitemap.ts
import { createWriteStream } from 'fs';
import { SitemapStream, streamToPromise } from 'sitemap';
import path from 'path';

// 사이트의 기본 URL 설정
const baseUrl = 'https://www.yoursite.com';

// URL 목록 배열 (수동으로 추가하거나, 동적으로 추출할 수 있습니다)
const urls = [
  { url: '/', changefreq: 'daily', priority: 1.0 },
  { url: '/about', changefreq: 'weekly', priority: 0.7 },
  { url: '/contact', changefreq: 'weekly', priority: 0.7 },
  // 동적으로 라우터에서 URL을 추출하거나 다른 방법으로 목록을 만들어야 합니다.
];

// sitemap.xml 파일 생성
async function generateSitemap() {
  // SitemapStream을 사용해 XML 파일 스트림 생성
  const sitemapStream = new SitemapStream({ hostname: baseUrl });

  // URL 목록을 SitemapStream에 추가
  urls.forEach((urlObj) => {
    sitemapStream.write(urlObj);
  });

  // sitemap.xml 파일로 스트림을 작성
  sitemapStream.end();

  // 파일을 생성하고 출력
  const sitemapPath = path.resolve(__dirname, '../public/sitemap.xml');
  const writeStream = createWriteStream(sitemapPath);
  streamToPromise(sitemapStream.pipe(writeStream)).then(() => {
    console.log('sitemap.xml 파일이 생성되었습니다!');
  });
}

generateSitemap();

baseUrl: 사이트의 기본 URL을 입력합니다. 예를 들어 https://www.yoursite.com과 같은 형식입니다.

urls 배열: 사이트에 포함된 페이지들의 URL 목록을 수동으로 입력하거나 동적으로 추출합니다. 각 URL에는 changefreq와 priority와 같은 SEO 관련 속성도 포함할 수 있습니다.

sitemap.xml을 public 폴더에 저장

sitemap.xml파일을 public폴더에 생성해서, 배포된 웹사이트에서 접근할 수 있도록 합니다.

빌드 후에 실행

yarn bulid명령어로 프로젝트를 빌드하고, generateSitemap스크립트를 실행해서sitemap.xml을 자동으로 생성하도록 설정할 수 있습니다.

# 빌드 후에 sitemap을 생성하는 명령어
yarn build && ts-node src/generateSitemap.ts

자동화

package.json에 postbuild 스크립트를 추가하면, yarn bulid 후 자동으로 sitemap.xml을 생성할 수 있습니다.

서버에 배포

최종적으로 public/sitemap.xml파일이 생성되면, 이 파일을 서버에 배포해야합니다.

일반적으로 이 파일을 웹사이트 루트에 배포됩니다.

배포 후에는https://www.yoursite.com/sitemap.xml 주소에서 sitemap.xml 파일을 확인할 수 있습니다.

리액트 프로젝트는 빌드 후 public 디렉토리에 있는 파일들이 자동으로 웹사이트의 루트 디렉토리로 배포됩니다. sitemap.xml 파일도 이 과정에서 함께 배포됩니다.

Google Search Console에 제출

Google Search Console에 로그인합니다.
사이트 선택 후 Sitemaps 메뉴로 이동합니다.
sitemap.xml 파일의 URL을 입력하고 제출을 클릭합니다.

Twitter Facebook LinkedIn

Eon's Box