React에서 SEO 최적화하기

김선은·2024년 6월 24일

웹 바이탈 체크 및 SEO 최적화 시도

웹 바이탈을 라이트하우스로 체크하면서 접근성과 검색엔진 최적화 점수가 각각 85점과 73점으로 낮았습니다. 이왕이면 좋은 점수를 받고 싶어서 개선을 위해 SEO의 궁금한 점을 간략히 소개하고 검색엔진 최적화를 시도한 방법들을 정리합니다.

1차적으로 index.html의 메타태그 추가와 React-Helmet-asnyc 라이브러리로 추가 적용으로 라이트하우스 점수는 91점이 되었습니다.

HTML에 메타 태그 설정

메타 태그로 사이트의 기본 정보를 설정합니다. 특히 Title과 Description은 필수적입니다.

모든 페이지에 범용적인 제목을 설정합니다.
개별 페이지마다 설정이 필요하면 react-helmet-async 라이브러리를 사용할 수 있습니다.

index.html의 head 태그

title 태그 설정하기 (70자 미만 권장)
meta 태그 추가하기
description은 160자 미만 권장
OG 태그는 소셜 미디어의 링크 미리보기 정보 설정

  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Sun Coffee</title>
    <meta name="description" content="하루의 시작은 커피로!" />
    <meta property="og:type" content="website" />
    <meta property="og:title" content="Sun Coffee" />
    <meta property="og:description" content="하루의 시작은 커피로!" />
    <meta property="og:locale" content="ko_KR" />
    <!-- 이미지의 경우 크기 지정 가능 -->
    <meta property="og:image" content="https://www.image.com" />
    <meta property="og:image:width" content="200" />
    <meta property="og:image:height" content="200" />
  </head>

React Helmet asnyc

HTML 문서의 head 태그를 관리합니다. 페이지 별로 제목, 설명, 키워드, og태그 등을 설정할 수 있습니다.

og 태그: 소셜미디어 미리보기 정보를 설정합니다.

sitemap

웹 사이트 내의 링크들의 우선 순위를 알려주고 사이트의 구조를 생성해 크롤러에게 알려줍니다.
sitemap.xml으로 유용한 메타데이터를 추가하여 사용할 수 있습니다.

자세한 설명을 볼 수 있는 링크
https://www.sitemaps.org/ko/protocol.html

사이트맵 설정 방법들

동적 라우트를 사용하는 프로젝트에는 라이브러리를 이용해 자동으로 사이트맵 생성하기

1. React Router Sitemap 라이브러리

라이브러리를 설치하여 동적 사이트맵 생성
사이트맵 생성기 파일 작성과 스크립트 실행의 방식
동적 라우트를 사용해 사이트맵을 자동으로 생성할 때 유용한 방법

npm install react-router-sitemap

2. Next.js 프레임워크

정적 사이트맵을 생성하는 데 유용한 내장 기능과 플러그인을 제공
next-sitemap 설정 파일 작성과 스크립트 실행의 방식

npm install next-sitemap

3. 직접 사이트맵 작성 or 사이트맵 생성 도구 사용

직접 루트 디렉토리에 sitemap.xml 파일 작성
정적인 사이트에 유용
사이트맵 생성 사이트

예시:

<!-- public/sitemap.xml -->
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
    <loc>https://yourdomain.com/</loc>
    <lastmod>2023-01-01</lastmod>
    <changefreq>monthly</changefreq>
    <priority>1.0</priority>
  </url>
  <url>
    <loc>https://yourdomain.com/category</loc>
    <lastmod>2023-01-01</lastmod>
    <changefreq>monthly</changefreq>
    <priority>0.8</priority>
  </url>
  <!-- 다른 URL 추가 -->
</urlset>

구글 문서: 사이트맵 제작 및 제출하기

블로그 - 라이브러리 없이 js로 사이트맵 생성하기

Robots.txt

웹 크롤러 접근을 제어하기 위한 방법입니다. 중요하지 않은 리소스의 방문과 색인 생성을 방지할 수 있습니다.
또한 중요한 정보를 숨기기 보다는 크롤링을 제하거나 개인정보가 들어있는 사이트들을 검색엔진에 노출하고 싶지 않을 경우 사용합니다.

특히 로그인이 필요한 페이지를 차단할 필요가 있음
이탈률이 높은 페이지는 구글의 랭킹에 악영향을 줍니다.

위치: 사이트의 루트 디렉터리
사용 용도: 사이트 전체 또는 특정 경로에 대한 크롤링 제어
예시:

User-agent: *
Disallow: /admin/
Disallow: /private/
Allow: /private/public-info.html

이 설정은 모든 크롤러에게 /admin/ 및 /private/ 경로를 크롤링하지 않도록 지시합니다.
그러나 /private/ 경로 아래의 public-info.html 페이지를 크롤링할 수 있도록 허용합니다.

로봇 메타 태그

meta 태그를 이용하여 해당 페이지는 색인되지 않도록 설정할 수 있습니다.

위치: HTML 문서의 <head> 섹션
사용 용도: 특정 페이지에 대한 크롤링 및 인덱싱 제어
예시:

<meta name="robots" content="index,nofollow" /> 
// 색인 대상O, 페이지 내 링크 수집X
<meta name="robots" content="noindex,follow" /> 
// 색인 대상X, 페이지 내 링크 수집O
<meta name="robots" content="noindex,nofollow" /> 
// 색인 대상X, 페이지 내 링크 수집X
<meta name="googlebot" content="noindex, nofollow" /> 
// 구글에서만 사이트 노출X

Robots.txt과 로봇 메타태그의 차이점

적용 범위:

robots.txt: 사이트 전체 또는 특정 디렉터리에 대한 접근을 제어합니다.
메타 로봇 태그: 개별 페이지에 대한 접근을 제어합니다.

기능:

robots.txt: 크롤러가 특정 경로를 크롤링하지 않도록 지시합니다. 그러나 검색 엔진이 이미 알고 있는 URL에 대해 인덱싱을 막을 수는 없습니다.
메타 로봇 태그: 페이지를 인덱싱하지 않고, 페이지 내의 링크를 따라가지 않도록 설정할 수 있습니다.

그래서 robots.txt를 설정할 때 개별 페이지의 내용을 설정하기보다는 광범위한 패턴에 중점을 두라는 안내가 Chrome 문서도구에 적혀있습니다.

robots.txt을 500KiB 미만으로 유지
파일이 500KiB보다 크면 검색엔진이 robots.txt 처리를 도중에 중지할 수 있습니다. 이렇게 하면 검색엔진에 혼란을 주어 사이트가 잘못 크롤링될 수 있습니다.

robots.txt를 작게 유지하려면 개별적으로 제외된 페이지에 덜 집중하고 더 광범위한 패턴에 더 중점을 둡니다. 예를 들어 PDF 파일의 크롤링을 차단해야 하는 경우 각 개별 파일을 금지하지 마세요. 대신 disallow: /*.pdf를 사용하여 .pdf가 포함된 모든 URL을 허용하지 않습니다.
출처: Chrome for Developers