5주차 - Meta tag

메타태그는 웹페이즈의 제목이나, 이미지, 간단한 설명을 검색 엔진에 알려주는 역할을 합니다!

 

- react-helmet 설치하기

yarn add react-helmet

 

- helmat으로 메타 태크 바꾸기

//One.js
import React from "react";
import {Helmet} from "react-helmet";
const One = (props) => {
    return (
      <div>
        <Helmet>
          <title>page one</title>
          <meta property="og:title" content="page one" />
          <meta property="og:description" content="hi there :) page one" />
          <meta property="og:image" content="%PUBLIC_URL%/logo192.png" />
        </Helmet>
        <h2>Hi, there :) ! page one</h2>
        <button
          onClick={() => {
            props.history.push("/");
          }}
        >
          page one
        </button>
        <button
          onClick={() => {
            props.history.push("/two");
          }}
        >
          page two
        </button>
      </div>
    );
}

export default One;

 

- 확인하기

: 빌드 먼저 하고, post man에서 확인 할 수 있습니다!

 

1) 빌드하기

yarn build

 

2) post man에서 확인하기