[지호] 검색 엔진 최적화 (SEO)

TODO

• Alt 속성 사용
• meta 태그 사용
• robots.txt 및 sitemap.xml 생성
• 구글, 네이버 서치 콘솔 등록
• React Helmet 사용
• React-snap

진행 상황

meta 태그 description 추가

<meta property="og:url" content="https://algocean.site" />
<meta property="og:title" content="ALGOCEAN" />
<meta property="og:type" content="website" />
<meta
  property="og:image"
  content="https://user-images.githubusercontent.com/97934878/285278009-d7f75de2-17b3-4c0f-9df7-16a12aafbba1.png"
/>
<meta
  property="og:description"
  content="🌊 알고리즘의 바다에 풍덩 빠져보시겠어요"
/>
<meta
  name="description"
  content="알고리즘 관련 질문을 올리고 답변할 수 있는 커뮤니티"
/>
<meta name="keywords" content="algocean, 알고션, 알고리즘" />
<meta name="robots" content="index, follow" />

robots.txt 및 sitemap.xml 생성

• robots.txt: 검색 엔진 크롤러에 대한 지침을 제공하는 파일입니다. 이 파일을 통해 웹 사이트 소유자는 어떤 부분을 크롤링하도록 허용하거나 금지할지를 설정할 수 있습니다.

• sitemap.xml: 웹 사이트의 페이지 구조를 검색 엔진에게 알려주는 파일입니다. 이 파일은 주로 검색 엔진이 웹 사이트를 크롤링하고 색인화하는 데 도움을 주는 역할을 합니다.

robots.txt

sitemap.xml

<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9 http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd">
  <!--  created with Free Online Sitemap Generator www.xml-sitemaps.com  -->
  <url>
    <loc>https://algocean.site/</loc>
    <lastmod>2023-12-11T15:03:41+00:00</lastmod>
  </url>
  <url>
    <loc>https://algocean.site/search?query=알고리즘</loc>
    <lastmod>2023-12-11T15:03:41+00:00</lastmod>
  </url>
	<url>
    <loc>https://algocean.site/ranking</loc>
    <lastmod>2023-12-11T15:03:41+00:00</lastmod>
  </url>
</urlset>

구글 서치 콘솔 등록

Naver 서치 콘솔 등록

react-helmet-async

react는 하나의 index.html을 가지는 SPA이다. 각각의 페이지에 맞는 메타데이터를 작성하기 위해 react-helmet-async 라이브러리를 사용해보자.

npm install react-helmet-async

1. HelmetProvider를 사용하여 Component를 감싼다.

   

2. 각 페이지 별로 별도의 title, meta 태그를 만들어준다.

   

3. 각 페이지에서 Helmet 컴포넌트를 불러온다.

react-snap

각 페이지 마다 index.html 파일을 생성하고, 이를 크롤러에 제공 해주는 역할을 하는 라이브러리.

react-snap에서 제공하는 pre-rendering 서비스는 페이지 요청을 낚아채어 사용자가 크롤러인 경우 캐시된 버전의 페이지를 전달하여 주고 반대로 크롤러가 아니라면 일반적인 페이지를 전달해준다

사용한 이유

react-helmet-async를 사용해도 브라우저의 크롤러는 여전히 index.html만을 바라보기 때문에 동적으로 변한 meta 태그가 보이지 않는 등의 문제가 생길 수 있다.

npm install react-helmet-async

package.json에 build후 스크립트 및 reactSnap 설정 추가

// package.json
"scripts": {
  "postbuild": "react-snap"
},
...
"reactSnap": {
    "source": "./dist",
    "include": [
      "/",
      "/profile",
      "/search",
      "/question"
    ]
  },
...

index.tsx 수정

import ReactDOM from 'react-dom/client';
import App from './App';
import './styles/index.css';

const container = document.getElementById('root') as HTMLElement;
const root = ReactDOM.createRoot(container);

if (container.hasChildNodes()) {
  ReactDOM.hydrateRoot(container, <App />);
} else {
  root.render(<App />);
}

build후에 아래와 같이 dist 폴더에 page별로 html이 생긴다.