[web] react-helmet 이용해서 seo(검색엔진 최적화) 하기

EO(검색엔진 최적화)는 웹사이트가 검색 엔진에서 더 잘 노출될 수 있도록 웹사이트 콘텐츠와 구조를 최적화하는 과정입니다. React와 같은 SPA(Single Page Application)에서 SEO를 최적화하려면, 검색 엔진이 페이지의 메타데이터와 내용을 올바르게 수집할 수 있도록 도와주는 도구가 필요합니다. 그 중 하나가 바로 React-Helmet입니다.

React-Helmet은 React 앱에서 HTML <head> 요소를 동적으로 관리할 수 있게 해주는 라이브러리입니다. 이를 사용하면 페이지의 <title>, <meta> 태그 등 다양한 메타 정보를 페이지마다 동적으로 변경할 수 있습니다.

React-Helmet 소개

React-Helmet은 React 컴포넌트로, 애플리케이션의 <head> 요소를 관리하는 데 유용합니다. 이를 통해 각 페이지마다 제목, 설명, Open Graph 태그, 링크 등 메타 정보를 설정할 수 있습니다. 검색 엔진 크롤러는 이 정보를 참고하여 페이지를 색인하고, 이를 검색 결과에 반영합니다.

React-Helmet 설치

React-Helmet을 사용하려면 먼저 react-helmet을 설치해야 합니다.

npm 사용시

npm install react-helmet

yarn 사용시

yarn add react-helmet

React-Helmet 기본 사용법

React-Helmet을 사용하여 SEO 메타 태그를 설정하는 기본적인 방법은 다음과 같습니다:

import React from 'react';
import { Helmet } from 'react-helmet';
const Page = () => {
    return (
          <div>
          <Helmet>
               <title>공식 홈페이지</title>
               <meta name="description" content="공식 홈페이지" />
               <meta name="keywords" content=" 공식홈페이지 " />
               <meta name="author" content="heejoo" />
               <meta property="og:title" content=" 공식홈페이지 " />
               <meta property="og:description" content=" 공식홈페이지 " />
               <meta property="og:image" content="https://example.com/og-image.jpg" />
               <meta property="og:url" content="https://example.com" />
               <meta property="og:type" content="website" />
               </Helmet>
               <h1> 나이스투힛튜 </h1>
               <p>나이스투힛튜의 공식 홈페이지입니다.</p>
          </div>
     );
};
export default Page;

위 코드에서 "Helmet"을 사용하여 페이지의 <head>에 다양한 메타 정보를 추가할 수 있습니다.

title 태그와 meta 태그를 통해 검색 엔진이 페이지에 대한 정보를 올바르게 이해하고 색인할 수 있도록 돕습니다.

SEO 최적화 메타 태그 설정

React-Helmet을 사용하여 추가할 수 있는 주요 SEO 메타 태그는 다음과 같습니다:

<title>: 페이지의 제목을 설정합니다. 검색 엔진 결과 페이지에서 중요한 역할을 합니다.

<title> 공식 홈페이지</title>

<meta name="description">: 페이지 설명을 설정합니다. 검색 결과에서 페이지의 내용을 간략하게 설명하는 텍스트로 표시됩니다.

<meta name="description" content=" 공식 홈페이지" />

<meta name="keywords">: 페이지와 관련된 키워드를 설정합니다. 검색 엔진 최적화에 도움이 될 수 있습니다. 하지만 현재는 대부분의 검색 엔진이 이 메타 태그를 중요한 요소로 간주하지 않습니다.

<meta name="keywords" content=" 공식 홈페이지" />

Open Graph (OG) 태그: 소셜 미디어에서 공유될 때 어떻게 보일지를 결정합니다. Facebook, Twitter, LinkedIn 등에서 사용됩니다.

<meta property="og:title" content=" 공식 홈페이지" /> 
<meta property="og:description" content=" 공식 홈페이지 " /> 
<meta property="og:image" content="https://example.com/og-image.jpg" /> 
<meta property="og:url" content="https://example.com" /> 
<meta property="og:type" content="website" />

<meta name="robots">: 크롤러가 해당 페이지를 어떻게 처리할지 설정합니다. 예를 들어, noindex를 설정하면 해당 페이지가 검색 결과에 포함되지 않게 됩니다.

<meta name="robots" content="index, follow" />

Favicon: 사이트의 아이콘을 설정합니다. 검색 결과에서 사이트 아이콘이 함께 표시될 수 있습니다.

<link rel="icon" href="/favicon.ico" />

SEO에 중요한 React-Helmet 사용 패턴

동적 타이틀 설정: 페이지마다 다른 제목을 설정하여 SEO 최적화할 수 있습니다.

const Page = ({ title, description }) => { 
	return ( 
        <div> 
            <Helmet> 
                <title>{title}</title> 
                <meta name="description" content={description} /> 
            </Helmet> 
            <h1>{title}</h1> 
            <p>{description}</p> 
        </div> 
    ); 
};

페이지별 메타 태그 설정: 각 페이지에 고유한 메타 태그를 설정하여 검색 엔진이 페이지를 정확하게 이해할 수 있도록 합니다.

const AboutPage = () => ( 
    <div> 
        <Helmet> 
            <title>About Us | 나이스투힛튜</title> 
            <meta name="description" content="나이스투힛튜에 대해 알아보세요." /> 
        </Helmet> 
        <h1>About Us</h1> 
        <p>이곳은 나이스투힛튜 공식 홈페이지입니다.</p> 
    </div> 
);

Canonical URL: 동일한 콘텐츠가 여러 페이지에서 제공될 때, 검색 엔진에 원본 페이지를 알려주는 rel="canonical" 링크를 설정하여 중복 콘텐츠 문제를 피할 수 있습니다.

<Helmet> <link rel="canonical" href="https://example.com/page" /> </Helmet>

React-Helmet을 사용한 SEO 효과

검색 엔진 크롤링 최적화: 검색 엔진 크롤러는 페이지가 서버에서 렌더링된 HTML을 읽고, meta 태그와 title 태그를 인식하여 검색 결과를 최적화합니다. React-Helmet을 사용하여 이 태그들을 동적으로 관리함으로써 검색 엔진에 더 나은 정보를 제공할 수 있습니다.
소셜 미디어 최적화: Open Graph 태그와 Twitter Card 태그 등을 사용하여 소셜 미디어에서 페이지가 공유될 때 올바르게 표시되도록 할 수 있습니다.
키워드 최적화: 페이지마다 다른 설명과 키워드를 설정함으로써 특정 검색어에 대해 더 잘 최적화된 페이지를 만들 수 있습니다.

결론

React-Helmet은 React 애플리케이션에서 "검색엔진 최적화(SEO)"를 위한 중요한 도구입니다. 이를 사용하면 <title>, <meta> 태그, Open Graph 태그 등을 동적으로 설정하여 검색 엔진과 소셜 미디어에서 사이트가 최적화되도록 할 수 있습니다. 페이지마다 고유한 메타 정보를 제공하고, SEO 최적화된 결과를 얻을 수 있습니다.

'나의 지식' 카테고리의 다른 글

[excel] 엑셀에서 VBA로 정규식을 사용해보자 (1)	2025.03.26
[web] robots.txt 검색엔진 최적화 (1)	2025.03.25
[git] 기본 명령어 정리 (0)	2023.08.11
[web] jsp : 보안 취약점 대응 (0)	2023.08.11
[Vue] vue-router-tab 같은 탭 여러개 열어보자 (0)	2022.01.29