[본캠프] d+49.

🔗 참고
https://velog.io/@sweetpumpkin/Open-Graph-%EC%95%8C%EC%95%84%EB%B3%B4%EA%B8%B0
https://velog.io/@chl4842/%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8%EC%97%90-%EC%98%A4%ED%94%88-%EA%B7%B8%EB%9E%98%ED%94%84og-%EC%A0%81%EC%9A%A9%ED%95%98%EA%B8%B0

어제 og 태그에 대해서 알게 된 후 이것을 적용해보고 싶어졌다.
그래서 예전에 만들어둔 포트폴리오에 적용을 해보기로 했다.

{/* meta tag */}
      <meta charset="utf-8" />
      <title>Yeaji's Portfolio</title>
      <meta
        name="description"
        content="Explore my portfolio to see my work 🔭"
      />
      <meta name="keywords" content="Portfolio, webDevelopment" />
      <meta name="author" content="Park Yea Ji" />

      {/* open graph */}
      <meta property="og:title" content="Yeaji's portfolio" />
      <meta
        property="og:description"
        content="Explore my portfolio to see my work 🔭"
      />
      <meta property="og:url" content="https://사이트 링크" />
      <meta property="og:type" content="website" />
      <meta
        property="og:image"
        content="https://사이트링크/img/preview.png"
      />

메타 태그와 og 태그를 html에서 하듯이 index.html에 작성했다.
하지만 리액트는 하나의 페이지로 이루어진 SPA (Single Page Application)이기 때문에 하나의 index.html을 사용한다.
처음 보여지는 페이지는 상관없지만 라우터를 사용하여 페이지를 이동할 경우 이동한 페이지의 메타데이터는 명시되어있지 않아 OG 태그가 제대로 적용되지 않는다.

구글링을 해보니 react-helmet이라는 라이브러리를 설치해줘야한단다.
설치 후..

import { HelmetProvider } from "react-helmet-async";

root.render(
  <HelmetProvider>
      <App />
  </HelmetProvider>
);

index.js에서 HelmetProvider로 App을 감싸준다.
그리고 app.jsx로 가서 <Helmet>태그 안에 메타 태그와 og 태그들을 작성해준다.

🔗 카톡 미리보기 캐시 초기화 사이트
https://developers.kakao.com/tool/clear/og

들어가서 캐시 초기화

<Helmet>을 적용하고 홈페이지에 들어가 head를 확인해보면 작성한 meta tag와 og 태그가 적용된 것을 볼 수 있다.
그런데 카톡에 적용한 og 태그가 하나도 안 보임
우연히 카톡 미리보기 캐시 초기화 페이지의 스크롤을 내려보니

텅
얘네 다 어디갔어?

메타 데이터는 잘 변경되었지만, 여전히 크롤러는 index.html 하나만 마주치게 되므로 og가 정확하게 표시되지 않았다.

구글링을 다시 해보니 react-snap 라이브러리를 사용하면 된단다.
react-snap은 각 페이지마다의 index.html파일을 생성하고 이를 크롤러에게 제공해주는 역할을 하는 라이브러리라고 한다.

(여기서 멈췄어야했는데..)

npm i react-snap

react-snap 설치

설치부터 안 되기 시작함 (이 때 진짜 멈췄어야했는데..)
node module 폴더랑 package-lock.json 파일 지우고 관리자 모드로 powershell 들어가서 npm i 하고
어찌저찌해서 react-snap 설치는 함

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

const MetaTags = () => {
  return (
    <Helmet>
      {/* meta tag */}
      <meta charset="utf-8" />
      <title>Yeaji's Portfolio</title>
      <meta
        name="description"
        content="Explore my portfolio to see my work 🔭"
      />
      <meta name="keywords" content="Portfolio, webDevelopment" />
      <meta name="author" content="Park Yea Ji" />

      {/* open graph */}
      <meta property="og:title" content="Yeaji's portfolio" />
      <meta
        property="og:description"
        content="Explore my portfolio to see my work 🔭"
      />
      <meta property="og:url" content="https://사이트링크" />
      <meta property="og:type" content="website" />
      <meta
        property="og:image"
        content="https://사이트링크/img/preview.png"
      />
    </Helmet>
  );
};

export default MetaTags;

다른 페이지에서도 사용할 수 있도록 컴포넌트로 만든다.

이미지 경로는 어찌해야할지 몰라서 지피티에게 물어보니 '내사이트url/사진폴더/사진이름' 이렇게 하면 된다고 한다.
다 하고 확인 필수

"scripts": {
    ...,
    "postbuild" : "react-snap" 
    /*react-snap이 빌드된 사이트를 프리렌더링하도록 설정*/
  },

"reactSnap": {
  "include": ["/", "/web-design"]\
  /*react-snap이 어떤 경로로 프리렌더링할 지 지정*/
}

package.json 파일에 위 내용 추가
react-snap이 어떤 경로로 프리렌더링을 할지 지정해줘야한다.
"/" -> 홈페이지를 프리렌더링
"/web-design" -> Open Graph 태그가 필요한 페이지도 프리렌더링

import React from "react";
import { HashRouter, Routes, Route } from "react-router-dom";
import MetaTags from "./Assets/MetaTags";
...
function App() { 
	return (
      <>
        <HashRouter>
          <MetaTags />
          <Routes>
            <Route path="/" element={<RootLayout />}>
              <Route index element={<Main />} />
              <Route path="web-design" element={<WebDesign />}>
                <Route path=":webId" element={<WebDesignDetail />} />
              </Route>
              <Route path="branding" element={<Branding />}>
                <Route path=":brId" element={<BrandingDetail />} />
              </Route>
              <Route path="school-works" element={<SchoolWorks />}>
                <Route path=":schoolId" element={<SchoolWorksDetail />} />
              </Route>
              <Route path="resume" element={<Resume />} />
            </Route>
          </Routes>
          <ScrollToTop />
        </HashRouter>
      </>
  );
}

BrowserRouter는 동적 라우팅을 사용하기 때문에 react-snap이 제대로 프리렌더링하지 못 할 수도 있다. 따라서 HashRouter를 적용한다.
(HashRouter : URL에 #을 추가하는 방식)

모든 페이지에 적용하는 내용들이기 때문에 MetaTags 컴포넌트도 여기에 추가

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <HelmetProvider>
    <HashRouter>
      <App />
    </HashRouter>
  </HelmetProvider>
);

index.js에서 <HelmetProvider> 안에 <HashRouter>를 집어넣는다.

이렇게 해서

npm run build

git add .
git commit -m "message"
git origin branch

하여 배포를 하려했지만...

응 안돼

약간 혼자있고 싶어져서 오늘은 마무리

➕ 추가

삽질을 놓지 못 하고 찾아보던 중
2024년 게시글인데 약 5년 전이 마지막 업데이트이고 유지보수가 중단되었다는 글을 보았다.
그럼 안 해도 되잖아?!

리액트에서 메타 태그 넣는 법은 이제 알았으니 보람찬 하루🍀🍀