React에서 검색엔진 최적화

date

Sep 10, 2022

thumbnail

slug

React에서 검색엔진 최적화

author

status

Published

이쁜 내 새끼를 웹에서 검색되게 해보자.

필독사항

이 글은 구글의 검색엔진에 대한 설명입니다.

색인: 구글은 알고 있는 모든 웹페이지를 색인에 저장합니다. 색인은 해당 페이지의 컨텐츠, URL을 명시합니다. 구글에서 페이지를 읽고 색인에 추가하면 색인이 생성됩니다.

크롤링: 신규/업데이트 된 웹페이지를 찾는 프로세스입니다. 구글은 링크를 따라가거나, 사이트맵을 읽거나, 여러 방법으로 URL을 찾아냅니다.

크롤러: 웹에서 페이지를 크롤링한 후 색인을 생성하는 자동 소프트웨어입니다.

Googlebot: 구글 크롤러의 이름입니다.

SEO: 검색엔진 최적화, 검색엔진에서 사이트를 찾기 쉽도록 개선하는 프로세스입니다.

Google 검색 작동 방식

구글은 위 세 단계를 통해 웹페이지를 소스로 결과를 생성한다.

1. 크롤링

Google은 웹에 어떤 페이지가 존재하는지 검색하고 알려진 페이지를 목록에 추가한다.새로운 페이지의 URL을 발견하면 내용을 확인하기 위해 웹페이지 방문을 하는데 이것을 크롤링이라고 한다.

Google이 찾지 않고 등록하는 방법도 있다.(사이트맵 제출)나는 사이트맵을 생성하여 제출하는 방식으로 진행했는데 방법은 아래에서 다뤄보겠다.

2. 색인 생성

색인 생성은 페이지가 발견되면 Google이 어떤 페이지인지 파악하려고 하는 것이다. 정보는 Google 색인에 저장된다고 한다.

색인 생성을 위한 방법

제목은 짧고 간결하게

페이지의 주제를 전달하는 페이지 제목 사용

이미지보단 텍스트 사용하기

3. 게재

Google이 여러 요소를 바탕으로 색인에서 가장 관련된 답변을 찾아 상위에 노출시키는 것이다.

개제 개선을 위한 방법

반응형 페이지 만들기

유용한 컨텐츠 포함 및 최신상태 유지

Google의 웹 마스터 가이드 라인 따르기

React에서 사이트맵 생성하기

sitemapRoute.js 생성

import React from 'react';
import { Route, Switch } from 'react-router';

export default (
  <Switch>
    <Route path={'/'} />
    <Route path={'/introduce'} />
    <Route path={'/blog'} />
    <Route path={'/joinus'} />
    <Route path={'/joinus/:id'} />
    <Route path={'/conduct'} />
    <Route path={'/question'} />
    <Route path={'/signin'} />
    <Route path={'/signup'} />
    <Route path={'/apply'} />
    <Route path={'/admin'} />
  </Switch>
);

generateSitemap.js 만들기

require('babel-register')({
  presets: ['es2015', 'react'],
});

const router = require('./sitemapRoutes').default;// 좀 전에 만든 sitemapRoutes 파일이 있는 경로입니다.const Sitemap = require('react-router-sitemap').default;

function generateSitemap() {
  return new Sitemap(router)
    .build('https://gdsc-dju.web.app/')// 여러분의 도메인 이름으로 변경해주세요.
    .save('./public/sitemap.xml');// sitemap.xml 파일이 생성될 위치입니다.
}

generateSitemap();

위 파일을 실행하면 이렇게 사이트맵이 생성된다.이 파일을 구글검색엔진에 제출하면 빠르게 검색결과에 노출시킬 수 있다.

SEO 확인 및 점수 높히기

타이틀 생성

    <title>GDSC Daejin</title>

사이트 정보 요약

구글/네이버에 사이트 등록

  <meta name="google-site-verification" content="어쩌고 저쩌고 어쩌고 저쩌고" />
  <meta name="naver-site-verification" content="어쩌고 저쩌고 어쩌고 저쩌고" />

점수 확인하기

lighthouse에서 seo 체크

92점이 나왔다.

구글과 네이버에 상위 노출로 잘 나온다.

)

구글/네이버에 사이트맵을 제출한다고 해서 빠르게 반영을 해주지는 않는다.Reference: Google검색센터