frontendreact

React-helmet을 이용한 검색 최적화

create-react-app, deploy, frontend, react
Views: 426

시작하기

검색 최적화를 위한 방법으로 ssr, nextjs, helmet등이 있습니다.
이번 포스트에서는 helmet에 대한 내용을 다루도록하겠습니다.
헬멧은 일반 HTML 태그를 사용하여 일반 HTML 태그를 출력합니다.
매우 간단하고, React 초보자에게 친숙합니다.
리액트 헬멧 Github

설치

npm install --save react-helmet @types/react-helmet 리액트 헬멧 패키지를 설치해줍니다.

사용법

사용법은 단순합니다.
Helmet 내부에 HTML태그를 넣어 주면 됩니다.

App.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
import React from "react";
import { Helmet } from "react-helmet";

const App = () => {
    return (
        <div className="App">
            <Helmet>
                <meta charSet="utf-8" />
                <title>My Title</title>
            </Helmet>
            // ...
        </div>
    );
};

특징

중첩 또는 후자의 구성 요소는 중복 변경 사항을 대체합니다.
쉽게말해서 중복되거나 여러개의 helmet이 있다면 나중에 쓰인 helmet이 대체합니다.

예를들어 다음과 같은 코드가 있다고 하면

1
2
3
4
5
6
7
8
9
10
11
12
13
<Parent>
    <Helmet>
        <title>My Title</title>
        <meta name="description" content="Helmet application" />
    </Helmet>

    <Child>
        <Helmet>
            <title>Nested Title</title>
            <meta name="description" content="Nested component" />
        </Helmet>
    </Child>
</Parent>

결과값으로 

1
2
3
4
<head>
    <title>Nested Title</title>
    <meta name="description" content="Nested component">
</head>

내부에 있는 나중에 읽힌 helmet이 적용되는것을 확인할 수 있습니다.

응용하기

헤더에 사용할 태그들을 미리 정의해 놓고 컴포넌트로 분리하면 손쉽게 사용가능합니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
import React from 'react';
import { Helmet } from 'react-helmet';

interface Props {
	keywords: string;
	description: string;
    title: string;
    favicon?: string;
}

const ReactHelmet:React.FC<Props> = ({ keywords, description, title, favicon }) => {
	return (
		<Helmet>
			<meta name="description" content={description} />
			<meta name="keywords" content={keywords} />
			<title>{title}</title>
			<meta property="og:title" content={title} />
			<meta property="og:image" content={favicon} />
			<meta property="og:site_name" content="" />
			<meta property="og:description" content={description} />

			<meta name="twitter:title" content={title} />
			<meta name="twitter:description" content={description} />
			<meta name="twitter:image" content={favicon} />
			<meta name="twitter:card" content="summary" />
		</Helmet>
	);
};
export default ReactHelmet;

컴포넌트에서 다음과 같이 사용할 수 있습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import React from "react";
import ReactHelmet from './ReactHelmet';

const App = () => {
    return (
        <div className="App">
            <ReactHelmet 
                keywords="react, react-helmet" 
                description="라액트 헬멧입니다." 
                title="App component" 
                favicon="/image/android-icon-144x144.jpg"
            />
            // ...
        </div>
    );
};

메타태그 확인

Share