React / react-helmet 으로 동적으로 meta 태그 바꾸어주기

React에서 react-helmet을 이용하여 meta태그를 동적으로 바꾸어 줄 수 있다.

og태그를 바꾸어주니 카톡같은걸로 링크를 보낼때 내용을 바꿀 수 있다 

React CSR이라서 SEO최적화를 해야하는데 react-helmet만으로는 해결이 안되는것같다.

react-snap도 많이쓰던데 업데이트된지 오래되었다고 어떤 한 블로그를 보고 따라할 예정이다.

오늘은 일단 react-helmet 사용방법부터 알아보자.

 

1. npm설치

2. SEO HOOK 만들기

3. app.js에 HelmetProvider로 감싸기

4. page별로 props 로 내용 전달받기

 

1. helmet install

npm i react-helmet-async

 

2. SEO HOOK 만들기

src/SEO.js 위치는 src폴더 밑에 해준다.

import React from 'react';
import { Helmet } from 'react-helmet-async';

const SEO = props => {
  // props로 content 내용을 불러올 예정임
    return (
      <Helmet>
        <title>{props.title}</title>

        <meta name="description" content={props.description} />
        <meta name="keywords" content={props.keywords} />

        <meta property="og:type" content="website" />
        <meta property="og:title" content={props.title} />
        <meta property="og:site_name" content={props.title} />
        <meta property="og:description" content={props.description} />
        <meta property="og:image" content={props.imgsrc} />
        <meta property="og:url" content={props.url} />

        <meta name="twitter:title" content={props.title} />
        <meta name="twitter:description" content={props.description} />
        <meta name="twitter:image" content={props.imgsrc} />

        <link rel="canonical" href={props.url} />
      </Helmet>
    );
};

export default SEO;

 

3. HelmetProvider로 감싸주고 SEO.js도 불러와 넣어준다.

import React from "react";
import { HelmetProvider } from "react-helmet-async";
import {BrowserRouter,Routes,Route} from 'react-router-dom'
import ScrollToTop from "./components/common/ScrollToTop";
import ItemDetailPage from "./pages/ItemDetailPage";
import ItemListPage from "./pages/ItemListPage";
import LoginPage from "./pages/LoginPage";
import MainPage from "./pages/MainPage";
import RegisterPage from "./pages/RegisterPage";
import SEO from "./SEO";


function App() {

  return (
    <>
      <BrowserRouter>
         <HelmetProvider>
          <SEO/>
          <ScrollToTop/>
          <Routes>
            <Route element={<MainPage />} path="/"/>
            <Route element={<ItemListPage/>} path="/Itemlist/:category"/>
            <Route element={<ItemDetailPage />} path="/ItemDetail/:id"/>
            <Route element={<LoginPage />} path="/Login"/>
            <Route element={<RegisterPage />} path="/Register"/>
          </Routes>
        </HelmetProvider>
      </BrowserRouter>
    </>
  );
}

export default App;

 

4. SEO Props로 값설정 해주기

import React from 'react'
import Footer from '../components/common/Footer'
import Header from '../components/common/Header'
import MainBest from '../components/main/MainBest'
import MainCica from '../components/main/MainCica'
import MainNew from '../components/main/MainNew'
import MainPromotion from '../components/main/MainPromotion'
import MainVisual from '../components/main/MainVisual'
import ReviewSlide from '../components/main/ReviewSlide'

import '../assets/css/common/reset.css';
import SEO from '../SEO'

export default function MainPage(props) {
    

    return (
        <>
        <SEO
            title="Dr.Jart" 
            description="메인 설명"
            keywords="메인 키워드"
            imgsrc="./assets/images/og-img.png"
            url="http://3.35.230.1:3000"
        />
            <Header />
                <MainVisual />
                <MainBest />
                <MainCica />
                <MainNew />
                <MainPromotion />
                <ReviewSlide />
            <Footer/>
        </>
    
  )
}

meta를 동적으로 바꾸어주는걸 설정했으니 이제는 SCR에서도 SEO최적화하는 방법에 대해 공부해볼것이다.