React- SEO & 서치어드바이저

2026-09-09 5 분 소요

◆ React 프로젝트에 SEO 적용하고 네이버 서치어드바이저 등록하기

웹사이트를 개발한 후에는 단순히 사이트를 배포하는 것만으로 끝나는 것이 아니다.

사용자가 Google이나 네이버에서 사이트를 검색했을 때 검색 결과에 노출되도록 하려면 SEO(Search Engine Optimization) 작업이 필요하다.

이번에는 Vite + React + TypeScript + React Router로 제작한 웹사이트에 SEO를 적용하고, 네이버 서치어드바이저에 사이트를 등록하는 과정을 정리해보려고 한다.

◆ SEO란?

SEO는 Search Engine Optimization의 약자로, 검색엔진 최적화를 의미한다.

쉽게 말하면,

검색엔진이 내 웹사이트의 내용을 잘 이해하고 검색 결과에 적절하게 노출할 수 있도록 사이트를 최적화하는 작업

이다.

예를 들어 cptap이라는 서비스 사이트가 있다면 사용자가 검색엔진에서

cptap
서비스 의뢰
서비스 업체

등을 검색했을 때 사이트가 검색 결과에 노출될 수 있도록 만드는 것이다.

SEO에는 다양한 작업이 포함된다.

페이지 <title> 설정
meta description 설정
canonical URL 설정
Open Graph 설정
robots.txt 작성
sitemap.xml 작성
적절한 HTML heading 구조
이미지 alt 설정
구조화 데이터(JSON-LD)
페이지 로딩 속도 및 모바일 최적화

즉, SEO는 특정 기능 하나가 아니라 검색엔진에 사이트를 잘 이해시키기 위한 전체적인 최적화 과정이라고 볼 수 있다.

1. 페이지 Title 설정

가장 기본적인 SEO 설정 중 하나가 페이지의 <title>이다.

브라우저 탭에 표시되는 제목이기도 하고 검색엔진이 페이지 제목을 판단할 때 사용하는 정보이기도 하다.

예를 들어 서비스 의뢰 페이지라면:

<title>cptap | 서비스 의뢰</title>

와 같이 설정할 수 있다.

페이지마다 적절한 제목을 설정하는 것이 좋다.

경로	Title
`/`	cptap \| 서비스 의뢰 플랫폼
`/about`	cptap \| 회사소개
`/services`	cptap \| 서비스 소개
`/notice`	cptap \| 공지사항
`/contact`	cptap \| 문의
`/inquiry`	cptap \| 서비스 의뢰

React에서는 페이지가 변경될 때 document.title을 이용해 변경할 수도 있다.

useEffect(() => {
  document.title = 'cptap | 서비스 의뢰'
}, [])

하지만 페이지가 많아지면 SEO 관련 코드가 여러 곳에 흩어질 수 있기 때문에 별도의 SEO.tsx 컴포넌트를 만들어 관리하는 방법도 있다.

2. Meta Description 설정

description은 해당 페이지의 내용을 검색엔진에 설명하는 메타데이터이다.

예를 들어:

<meta
  name="description"
  content="cptap에 필요한 서비스를 의뢰하고 상담을 신청하세요."
/>

페이지마다 실제 콘텐츠에 맞는 설명을 작성하는 것이 좋다.

페이지	Description
회사소개	cptap의 회사소개와 서비스 정보를 확인하세요.
서비스 소개	cptap에서 제공하는 다양한 서비스와 서비스 내용을 확인하세요.
서비스 의뢰	cptap에 필요한 서비스를 의뢰하고 상담을 신청하세요.

검색엔진에 페이지의 내용을 이해시키는 데 도움이 된다.

3. Canonical 설정

Canonical은 검색엔진에게 이 페이지의 대표 URL이 무엇인지 알려주는 기능이다.

예를 들어 다음과 같은 URL이 있다고 가정하자.

https://cptap.kro.kr/services
https://cptap.kro.kr/services?category=web

검색엔진 입장에서는 서로 다른 URL로 인식할 수 있다.

대표 URL을 다음과 같이 지정할 수 있다.

<link
  rel="canonical"
  href="https://cptap.kro.kr/services"
/>

이를 통해 검색엔진에 해당 페이지의 대표 URL을 명확하게 알려줄 수 있다.

4. Open Graph 설정

Open Graph는 웹페이지를 SNS나 메신저 등에 공유했을 때 표시되는 정보를 설정하는 데 사용한다.

예를 들어 카카오톡이나 Slack 등에 사이트 URL을 공유했을 때 제목, 설명, 이미지 등이 표시되는 부분이다.

<meta property="og:title" content="cptap | 서비스 의뢰" />

<meta
  property="og:description"
  content="cptap에 필요한 서비스를 의뢰하고 상담을 신청하세요."
/>

<meta
  property="og:url"
  content="https://cptap.kro.kr/inquiry"
/>

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

<meta property="og:site_name" content="cptap" />

<meta
  property="og:image"
  content="https://cptap.kro.kr/og-image.png"
/>

특히 og:image를 설정하면 링크를 공유했을 때 대표 이미지가 함께 표시될 수 있다.

◆ robots.txt

robots.txt는 검색엔진의 크롤러에게 웹사이트의 크롤링 정책을 알려주는 파일이다.

현재 사이트에서는 다음과 같이 설정했다.

User-agent: *
Allow: /

Sitemap: https://cptap.kro.kr/sitemap.xml

각 항목의 의미는 다음과 같다.

User-agent

User-agent: *

모든 검색엔진 크롤러를 대상으로 한다는 의미이다.

Allow

Allow: /

사이트 전체에 대한 크롤링을 허용한다는 의미이다.

Sitemap

Sitemap: https://cptap.kro.kr/sitemap.xml

사이트의 Sitemap 위치를 검색엔진에 알려준다.

robots.txt는 보안 기능이 아니다. 특정 페이지에 대한 실제 접근 권한을 차단하는 용도로 사용해서는 안 된다.

◆ sitemap.xml

Sitemap은 사이트에 어떤 페이지가 존재하는지 검색엔진에 알려주는 파일이다.

예를 들어 다음과 같이 작성할 수 있다.

<?xml version="1.0" encoding="UTF-8"?>

<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">

  <url>
    <loc>https://cptap.kro.kr/</loc>
  </url>

  <url>
    <loc>https://cptap.kro.kr/about</loc>
  </url>

  <url>
    <loc>https://cptap.kro.kr/services</loc>
  </url>

  <url>
    <loc>https://cptap.kro.kr/notice</loc>
  </url>

  <url>
    <loc>https://cptap.kro.kr/contact</loc>
  </url>

  <url>
    <loc>https://cptap.kro.kr/inquiry</loc>
  </url>

</urlset>

관리자 페이지나 로그인 페이지처럼 검색엔진에 노출할 필요가 없는 페이지는 Sitemap에 포함하지 않는 것이 좋다.

◆ React에서 SEO 컴포넌트로 관리하기

페이지마다 SEO 설정을 직접 작성하는 대신 SEO.tsx를 만들어 관리할 수 있다.

예를 들어:

<SEO
  title="서비스 의뢰"
  description="cptap에 필요한 서비스를 의뢰하고 상담을 신청하세요."
  url="/inquiry"
/>

이렇게 사용하면 페이지마다 SEO 설정을 일관된 방식으로 관리할 수 있다.

SEO 컴포넌트에서 다음 항목을 관리하도록 구성할 수 있다.

title
description
canonical
robots
og:title
og:description
og:url
og:type
og:image
og:site_name
twitter:card

이렇게 하면 기존에 여러 페이지에 흩어져 있던 document.title 코드를 하나의 방식으로 통일할 수 있다.

◆ SEO와 서치어드바이저는 무엇이 다른가?

여기서 처음에는 SEO와 서치어드바이저가 비슷한 개념처럼 느껴질 수 있다.

하지만 둘은 서로 다른 것이다.

SEO

SEO는 검색엔진 최적화라는 전체적인 작업과 개념이다.

SEO
├── title
├── description
├── canonical
├── robots.txt
├── sitemap.xml
├── Open Graph
├── heading 구조
└── 기타 검색엔진 최적화

네이버 서치어드바이저

네이버 서치어드바이저는 네이버에서 제공하는 웹사이트 관리 도구이다.

서치어드바이저를 이용하면 네이버에 내 사이트를 등록하고 검색엔진이 사이트를 제대로 수집하고 있는지 확인할 수 있다.

즉,

SEO는 검색엔진에 잘 노출되도록 사이트를 최적화하는 작업이고,
서치어드바이저는 네이버 검색엔진에 사이트를 등록하고 관리하기 위한 도구이다.

◆ 네이버 서치어드바이저 등록

SEO 기본 설정이 끝났다면 네이버 서치어드바이저에 사이트를 등록한다.

사이트 등록 과정은 일반적으로 다음과 같다.

네이버 서치어드바이저 접속
        ↓
웹사이트 등록
        ↓
사이트 소유권 확인
        ↓
사이트맵 제출
        ↓
robots.txt 확인
        ↓
검색로봇 수집 상태 확인

사이트맵은 다음 주소를 제출하면 된다.

https://cptap.kro.kr/sitemap.xml

◆ Google Search Console도 함께 사용하기

네이버뿐만 아니라 Google 검색도 고려한다면 Google Search Console도 등록하는 것이 좋다.

구조는 네이버와 비슷하다.

Google Search Console
        ↓
사이트 등록
        ↓
소유권 확인
        ↓
sitemap.xml 제출
        ↓
색인 및 검색 상태 확인

따라서 국내 서비스라면 보통 다음 두 가지를 함께 관리하는 것이 좋다.

Google → Google Search Console
Naver → 네이버 서치어드바이저

◆ 최종적으로 구성한 구조

이번 작업을 정리하면 다음과 같다.

웹사이트
│
├── SEO 설정
│   ├── title
│   ├── description
│   ├── canonical
│   ├── Open Graph
│   └── Twitter Card
│
├── robots.txt
│
└── sitemap.xml
        │
        ├── Google Search Console
        │
        └── 네이버 서치어드바이저

SEO 설정을 통해 검색엔진이 사이트의 구조와 콘텐츠를 이해하기 쉽게 만들고,

robots.txt와 sitemap.xml을 통해 크롤링 및 사이트 구조에 대한 정보를 제공한다.

그 이후 Google Search Console과 네이버 서치어드바이저에 사이트를 등록하여 검색엔진에서 실제로 사이트가 수집되고 색인되는 상태를 확인할 수 있다.

◆ 마무리

웹사이트를 배포했다고 해서 바로 검색 결과에 원하는 형태로 노출되는 것은 아니다.

따라서 개발 단계에서부터 다음과 같은 기본적인 SEO 요소를 준비해두는 것이 좋다.

페이지별 title
meta description
canonical
Open Graph
robots.txt
sitemap.xml
적절한 HTML 구조

그리고 배포 후에는 Google Search Console과 네이버 서치어드바이저에 사이트를 등록하여 검색엔진의 수집 및 색인 상태를 확인한다.

이번 작업을 통해 단순히 웹사이트를 배포하는 것에서 끝나는 것이 아니라, 검색엔진이 사이트를 이해하고 검색 결과에 반영할 수 있는 기본적인 환경까지 구축했다.

Twitter Facebook LinkedIn

Hwang hye jin