반응형
react-helmet
주요 기능
1. 동적 제목 설정 (<title>)
import { Helmet } from 'react-helmet';
function MyComponent() {
return (
<div>
<Helmet>
<title>My Page Title</title>
</Helmet>
<p>Page content</p>
</div>
);
}2. 메타 태그 추가
<Helmet>
<meta name="description" content="This is my page description" />
<meta property="og:title" content="OpenGraph Title" />
</Helmet>3. 링크, 스크립트 태그 추가
<Helmet>
<link rel="canonical" href="https://example.com/page" />
<script src="https://example.com/script.js" />
</Helmet>4. 중첩된 Helmet 처리 (Nested Helmet)
여러 컴포넌트에서 Helmet을 사용할 경우, 가장 마지막 렌더링된 컴포넌트가 <head>를 덮어씌웁니다.
설치 방법
npm install react-helmet주의 사항
- react-helmet은 **클라이언트 사이드 렌더링(CSR)**에서 잘 작동합니다.
- SSR(서버 사이드 렌더링)을 사용한다면, 더 최신이고 SSR에 최적화된 react-helmet-async 사용을 권장합니다.
요약
| 기능 | 설명 |
| <title> | 동적으로 페이지 타이틀 설정 |
| <meta> | SEO, SNS 공유용 메타태그 설정 |
| <link> | 외부 스타일시트, canonical 링크 등 설정 |
| <script> | 외부 스크립트 삽입 가능 |
React + Vite 환경에서 react-helmet을 사용할 경우
SSR이 필요 없고 CSR만 사용하는 경우라면 react-helmet으로 충분하며, 다음과 같이 사용할 수 있습니다.
기본 사용법 (React + Vite)
// src/pages/About.jsx
import { Helmet } from 'react-helmet';
export default function About() {
return (
<div>
<Helmet>
<title>About Us - My Site</title>
<meta name="description" content="소개 페이지입니다." />
</Helmet>
<h1>About Page</h1>
</div>
);
}- 위 코드는 페이지 렌더 시 <head> 안에 <title>과 <meta> 태그를 동적으로 삽입합니다.
- Vite의 빠른 HMR(Hot Module Replacement)과 잘 연동되어 작동합니다.
SSR 고려 시
Vite + React에서 **SSR(서버 사이드 렌더링)**을 사용하려면 react-helmet 대신 react-helmet-async를 쓰는 게 더 안정적입니다. 이 라이브러리는 비동기 렌더링 및 서버 렌더링을 지원합니다.
Vite 프로젝트 예시 구조
src/
├── App.jsx
├── main.jsx
└── pages/
├── Home.jsx
└── About.jsx각 페이지에서 Helmet을 사용할 수 있으며, App.jsx에 공통 <Helmet>을 두어 기본 메타 정보를 설정하는 것도 가능합니다.
React + Vite 환경에서 사용할 수 있는 SEO에 최적화된 <meta> 태그 구성 샘플
일반적인 웹사이트(블로그, 회사 소개 등)에 적합한 기본 구조
Helmet 사용 예시 (SEO + SNS 공유 최적화)
import { Helmet } from 'react-helmet';
export default function HomePage() {
return (
<>
<Helmet>
{/* 기본 SEO */}
<title>홈페이지 | My Awesome Site</title>
<meta name="description" content="이곳은 My Awesome Site의 홈페이지입니다. 최신 정보와 소식을 확인하세요." />
<meta name="keywords" content="My Awesome Site, 기술 블로그, 웹 개발, React, Vite" />
<meta name="author" content="홍길동" />
{/* Open Graph (Facebook, LinkedIn 등) */}
<meta property="og:title" content="My Awesome Site - 웹 개발 블로그" />
<meta property="og:description" content="최신 웹 개발 소식을 전하는 My Awesome Site입니다." />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://myawesomesite.com/" />
<meta property="og:image" content="https://myawesomesite.com/og-image.jpg" />
{/* Twitter Cards */}
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="My Awesome Site - 웹 개발 블로그" />
<meta name="twitter:description" content="최신 웹 개발 소식을 전하는 My Awesome Site입니다." />
<meta name="twitter:image" content="https://myawesomesite.com/twitter-image.jpg" />
<meta name="twitter:site" content="@MyAwesomeSite" />
{/* Canonical URL */}
<link rel="canonical" href="https://myawesomesite.com/" />
{/* Favicon (선택) */}
<link rel="icon" href="/favicon.ico" />
</Helmet>
<main>
<h1>Welcome to My Awesome Site</h1>
<p>React와 Vite로 만든 빠른 웹사이트입니다.</p>
</main>
</>
);
}커스터마이징 포인트
- title, description: 각 페이지마다 내용에 맞게 변경하세요.
- og:image, twitter:image: SNS 공유 시 보일 썸네일 이미지 URL
- canonical: 중복 URL 방지를 위한 정식 주소 지정
https://www.npmjs.com/package/react-helmet
react-helmet
A document head manager for React. Latest version: 6.1.0, last published: 5 years ago. Start using react-helmet in your project by running `npm i react-helmet`. There are 4590 other projects in the npm registry using react-helmet.
www.npmjs.com
'프론트엔드 > React' 카테고리의 다른 글
| react-markdown (0) | 2025.05.10 |
|---|---|
| react-ga4 (0) | 2025.05.01 |
| react-circle-flags 만국기 (0) | 2025.04.19 |
| react-share 소셜 미디어 공유 버튼 라이브러리 (0) | 2025.04.13 |
| Ant Design (1) | 2025.04.12 |
