React Helmet Async를 활용한 Meta Tag 관리 및 공유하기

웹 애플리케이션에서 SEO(검색 엔진 최적화)와 소셜 미디어 공유를 위해 적절한 메타태그를 관리하는 것은 매우 중요합니다. react-helmet-async는 React 기반의 애플리케이션에서 동적으로 메타태그를 관리할 수 있도록 도와주는 도구입니다. 이 글에서는 react-helmet-async를 활용한 메타태그 관리 방법과 공유하기에 대해서 정리해보았습니다.

 

1. react-helmet-async로 메타태그 관리

1.1 react-helmet-async 설치

react-helmet-async는 SSR(서버사이드 렌더링)과 클라이언트 렌더링 모두에서 사용할 수 있는 메타태그 관리 라이브러리입니다. 설치 명령어는 다음과 같습니다:

npm install react-helmet-async

---

1.2 메타태그 컴포넌트 생성

아래 코드는 react-helmet-async를 사용하여 메타태그를 동적으로 설정하는 방법을 보여줍니다. 이 예제에서는 소셜 미디어 공유 시 사용할 og: 및 twitter: 메타태그를 포함하고 있습니다.

 

import * as React from "react";
import { Helmet } from 'react-helmet-async';
import logo from '@/public/metalogo.svg'; // 로고 이미지 경로

const MetaTag = () => {
    return (
        <Helmet>
            <meta name="url" property="og:url" content={window.location.origin} />
            <meta name="description" property="og:description" content="컨텐츠 내용" />
            <meta name="image" property="og:image" content={window.location.origin + logo} />
            <meta name="image:secure_url" property="og:image:secure_url" content={window.location.origin + logo} />

            <meta name="twitter:url" content={window.location.origin} />
            <meta name="twitter:image" content={window.location.origin + logo} />
            <meta name="twitter:description" content="컨텐츠 내용" />
        </Helmet>
    );
};

export default MetaTag;

위 코드에서는 og:url, og:description, og:image와 같은 Open Graph 메타태그를 설정하여 Facebook, Twitter 등 소셜 플랫폼에서 공유될 때의 정보를 정의합니다.

---

1.3 앱에서 react-helmet-async 설정

애플리케이션에 HelmetProvider를 추가하여 Helmet 컴포넌트가 메타태그를 관리할 수 있도록 설정합니다.

import App from './App';
import { BrowserRouter } from 'react-router-dom';
import { hydrateRoot } from 'react-dom/client';
import { createRoot } from 'react-dom/client';
import { HelmetProvider } from 'react-helmet-async';

const rootElement = document.getElementById("root");

if (!!rootElement && rootElement.hasChildNodes()) {
    hydrateRoot(rootElement,
        <BrowserRouter>
            <HelmetProvider>
                <App />
            </HelmetProvider>
        </BrowserRouter>,
    );
} else {
    const root = createRoot(rootElement);
    root.render(
        <BrowserRouter>
            <HelmetProvider>
                <App />
            </HelmetProvider>
        </BrowserRouter>,
    );
}

---

2. 문제사항

 

2.1 카카오톡 공유 이슈

해당 방식은 네이버, 트위터, 페이스북 공유하기의 경우 스크립트 동작 이후의 Meta의 동적 변동이 적용 Helmet을 통하여 해결이 되지만 카카오톡은 공유 링크의 메타태그를 읽기 위해 서버에서 해당 URL을 크롤링 하지만 이는 스크립트 동작 이전에 돌아가기 때문에 React는 클라이언트에서 메타태그를 렌더링하므로, 서버에서 초기 HTML을 가져올 때 동적으로 변동된 메타태그가 포함되지 않습니다. 따라서 카카오톡은 올바른 메타 정보를 가져오지 못합니다.

 

이에 대한 원천 해결방법은 NEXT.js와 같은 프레임워크를 사용하여 SSR을 도입하는 방법과, 공유가 필요한 페이지만을 API단에서 SSR 페이지로 제작하여 경로를 적용시키는 방법이 있습니다. 하지만, 두번 째 방법의 경우 페이지의 route가 달라질 수 있는 점과 별도의 페이지를 따로 만들어야 한다는 점에서 추천하지 않는 방식입니다.