메타태그쪽 보고 있습니다만 helmet 라이브러리가 뭔가 잘 작동... - 인프런

(2025) MBTI 테스트 기반 수익형 웹사이트 만들기 - <코딩 배워 사업하자>

메타태그(Metatag) 넣기 1 - 내 사이트 정보를 알려주자

메타태그쪽 보고 있습니다만 helmet 라이브러리가 뭔가 잘 작동 안하네요.

해결된 질문

작성

수정됨

보기 코드랑 똑같게 작성했는데 메타태그가 적용 안되는 것 같습니다.

react aws Google-Analytics cloudflare adsense 수익화

답변 3

코배투

지식공유자

안녕하세요.

음, 우선 helmet을 적용하신 부분들의 코드를 확인해 볼 수 있을까요?

jaehyun jo

질문자

앗 넵넵 다음과 같습니다.

로컬에서는 안보이는데 웹으로 실행하면 보이더라고요.

웹에서 보이니까 다행이긴 한데 뭔가 찝찝하달까요..?

Test.jsx


import { TESTS } from "../data/TESTS";
import { useEffect, useState } from "react";
import { useParams, useNavigate } from "react-router-dom";
import IntroRenderer from "../components/test/IntroRenderer";
// import { useMetaTags } from "../components/MetatagRenderer";
import MetatagRenderer from "../components/MetatagRenderer";

function Test() {

  const {testParam} = useParams();
  const navigate = useNavigate();
  const [currentTest, setCurrentTest] = useState({});

  console.log(testParam)

  useEffect(() => {
    //1. Test Param이 우리 DB에 존재하는가 필터링
    //1-1. 존재 x -> 안내 / Home routing
    //1-2. 존재 o -> 해당 테스트의 콘텐츠를 렌더링
    console.log(testParam);
    const theTest = TESTS?.find((test) =>(test?.info?.mainUrl === testParam));
    if(!theTest){
      alert("해당 테스트가 존재하지 않습니다.");
      return navigate('/');
    }

    console.log(theTest);
    setCurrentTest(theTest);
  }, [testParam]);

  // useMetaTags(currentTest);

  return (
    <div>
      <MetatagRenderer currentTest={currentTest}/>
      <IntroRenderer currentTest={currentTest}/>
    </div>
  )
}

export default Test

MetatagRenderer.jsx

import React, { use, useEffect } from "react";
import { Helmet } from "react-helmet";
import { base_url } from "../App";

const MetatagRenderer = ({ currentTest }) => {
//    console.log(currentTest.info.mainTitle);
  return (
    <Helmet>
      {/* <!-- Primary Meta Tags --> */}
      <title>{currentTest?.info?.mainTitle}</title>
      <meta name="title" content={currentTest?.info?.mainTitle} />
      <meta name="description" content={currentTest?.info?.subTitle} />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <link
        rel="canonical"
        href={base_url + `/${currentTest?.info?.mainUrl}`}
      />

      {/* <!-- Open Graph / Facebook --> */}
      <meta property="og:type" content="website" />
      <meta
        property="og:url"
        content={base_url + `/${currentTest?.info?.mainUrl}`}
      />
      <meta property="og:title" content={currentTest?.info?.mainTitle} />
      <meta property="og:description" content={currentTest?.info?.subTitle} />
      <meta property="og:image" content={currentTest?.info?.thumbImage} />

      {/* <!-- Twitter --> */}
      <meta property="twitter:card" content="summary_large_image" />
      <meta
        property="twitter:url"
        content={base_url + `/${currentTest?.info?.mainUrl}`}
      />
      <meta property="twitter:title" content={currentTest?.info?.mainTitle} />
      <meta
        property="twitter:description"
        content={currentTest?.info?.subTitle}
      />
      <meta property="twitter:image" content={currentTest?.info?.thumbImage} />
    </Helmet>
  );
};

export default MetatagRenderer;

코배투

지식공유자

음, 코드 상으로는 문제가 없어 보이는데요.

혹시 localhost 개발자 도구 Element 탭에서 <head>...</head> 부분을 살펴봤을 때 메타태그가 정상적으로 잘 들어가있나요?

jaehyun jo

질문자

네 adsense쪽 메타 태그 그리고 스타일은 들어가 있는데 이상하게 <helmet> 내용만 로컬에서 안 보이더러고요.

jaehyun jo

질문자

이유는 모르겠는데 localhost에는 안보이고 웹에 올리면 보이네요...뭘까요?

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다. jaehyun jo님.

현재 메타태그를 관리하기 위해 helmet 라이브러리를 사용 중이신 것으로 보입니다. React Helmet은 React 애플리케이션에서 메타태그를 쉽게 관리할 수 있는 도구입니다. 하지만 라이브러리가 문제를 일으킬 때는 몇 가지 점검해야 할 부분이 있습니다.

메타태그가 적용되지 않을 때 확인할 사항:

Helmet Import 및 설정 확인:
Helmet을 import하고 올바르게 설정했는지 확인해 주세요. Helmet 태그가 JSX 내에서 적당한 위치에 있는지 확인하세요.

   import { Helmet } from "react-helmet";
   
   function MyComponent() {
     return (
       <div>
         <Helmet>
           <title>My Page Title</title>
           <meta name="description" content="My app description." />
         </Helmet>
         {/* other content */}
       </div>
     );
   }

SEO 크롤러 및 뷰 소스 확인:
브라우저의 “view-source” (페이지 소스 보기) 기능을 통해, 메타태그가 실제로 HTML에 잘 적용되었는지 확인하세요. 만약 서버 사이드 렌더링을 사용하고 있다면, SEO 크롤러가 메타태그를 인식하지 못할 수도 있습니다.
배포 환경 및 클라이언트 렌더링:
React Helmet은 주로 클라이언트 측에서 HTML을 수정하기 때문에 페이지 로딩 후에 메타태그가 동적으로 삽입됩니다. 이는 개발자 도구가 초기 파일을 로딩할 때 메타태그가 보이지 않을 수 있음을 의미합니다.
라이브러리 버전 및 충돌:
사용 중인 버전이 최신인지 확인하고, 다른 라이브러리와의 충돌이 있는지 살펴보세요. 필요에 따라 다른 메타태그 관리 라이브러리로 변경하는 것도 고려해볼 수 있습니다.

이와 같은 방법들을 통해 문제가 해결되지 않는다면, 작성하신 코드를 조금 더 자세히 보여주시면 추가적으로 도와드릴 수 있습니다. 유사한 문제를 겪은 다른 수강생의 경험도 확인해 보시는 것이 도움이 될 수 있습니다:

사이트 전체 Route 구조 짜기 영상 10분쯤 코드가 똑같은데 연결이 안되요

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

인프런 커뮤니티 질문&답변

메타태그쪽 보고 있습니다만 helmet 라이브러리가 뭔가 잘 작동 안하네요.

메타태그가 적용되지 않을 때 확인할 사항: