inflearn logo
강의

강의
N
챌린지

챌린지
멘토링

멘토링
N
클립

클립
로드맵

로드맵
지식공유

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

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

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

해결된 질문

111

jaehyun jo

작성한 질문수 5

0

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

react aws Google-Analytics cloudflare adsense 수익화

답변 3

0

코배투

안녕하세요.

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

0

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;

0

코배투

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

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

0

jaehyun jo

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

0

jaehyun jo

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

0

인프런 AI 인턴

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

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

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

  1. 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>
     );
   }

  1. SEO 크롤러 및 뷰 소스 확인:
    브라우저의 “view-source” (페이지 소스 보기) 기능을 통해, 메타태그가 실제로 HTML에 잘 적용되었는지 확인하세요. 만약 서버 사이드 렌더링을 사용하고 있다면, SEO 크롤러가 메타태그를 인식하지 못할 수도 있습니다.

  2. 배포 환경 및 클라이언트 렌더링:
    React Helmet은 주로 클라이언트 측에서 HTML을 수정하기 때문에 페이지 로딩 후에 메타태그가 동적으로 삽입됩니다. 이는 개발자 도구가 초기 파일을 로딩할 때 메타태그가 보이지 않을 수 있음을 의미합니다.

  3. 라이브러리 버전 및 충돌:
    사용 중인 버전이 최신인지 확인하고, 다른 라이브러리와의 충돌이 있는지 살펴보세요. 필요에 따라 다른 메타태그 관리 라이브러리로 변경하는 것도 고려해볼 수 있습니다.

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

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

ESFP 영어버전 받을 수 있을까요?

0

81

2

강의 9분 45초 질문입니다

0

88

4

이미지 생성 참조 툴 문의

0

78

2

사이트에 애드센스 연결하는 법

0

128

2

카카오 애드핏 글로벌

0

93

1

db 를 연결하려면 어떤걸 추천하시나요?

0

163

2

GA "수명주기" 탭 없음

0

113

2

cloudflare gitgub private repository 가져올 수 있을까요?

0

241

2

robots.txt 최신화 하는 방법을 아시나요?

0

137

1

CloudFlare 설정 질문

0

377

2

SNS 공유버튼 그룹 만들기 6:30~7:30 질문있습니다.

0

144

3

React Build 문제

0

137

1

PC 접속 X, 모바일 접속만 가능

0

145

2

이미지 리사이징 현상 막기

0

140

1

AWS 배포 후 사이트 접속이 원할하지 않은 문제

0

120

1

따라하다 보니 어느순간 화면이 하얗게 나오는건 왜그럴까요?

0

157

3

이용 약관 코드도 제공을 해 주시나요?

0

126

1

코드 힌트 방법

0

223

2

마지막 강의에서 다음 강의가 있다고 하셨는데 곧 올라오나요?

0

86

2

rem 단위를 쓰는 이유

0

235

2

리액트를 선택한 이유

0

130

2

구글 애드센스의 경우 한 개의 아이디로 여러 사이트에 등록이 가능한 것인지 궁금합니다.

0

221

2

이미지 제작에 관한 문의

0

113

2

Layout 을 추가하니, ThumbnailList가 2번 그려지는 현상이 있어요.

0

79

2