리액트 검색엔진 최적화 하는 법 meta - tag, memo

meta tag 넣는 법

import { Helmet } from "react-helmet"; //react-helmet을 설치 후 불러와줍니다.

return( //컴포넌트를 렌더링하는 곳에서 <Helmet>을 넣어줍니다.
  <Helmet>
    <title>feedbacker</title>
    <meta property="og:title" content="og page feedbacker"/>
    <meta property="og:description" content="feed for designer, 디자인 솔직 리뷰. 디자이너를 위한 피드백, 고객의 소리."/>
    <meta name="robots" content="index,follow" />
    <meta name="keywords" content="피드백, 디자이너, 디자인, 리뷰, 솔직, 후기, 고객의소리, 디자인반영, 디자인피드백, 크리틱" />   
    <meta property="og:image" content=""/>
  </Helmet>
)

robots : 검색엔진이 색인하도록 하느냐 설정 : 안하면 default가 색인허용하는 것입니다.

keywords: 인스타그램의 테그처럼 키워드를 입력하는 것입니다.

 

 

---

React.memo

부모와 자식 간의 컴포넌트에서 

부모의 상태가 변했을 때 자식 컴포넌트에서 변한 것이 없는데도 리랜더링 됩니다.

이를 방지하기 위해 자식 컴포넌트를 메모해줍니다.

import React, { memo } from "react";

const Post = memo((props) => {
	return(<></>)
})

export default Post;