diff --git a/README.ko.md b/README.ko.md index 6cc3fa9..3c85d52 100644 --- a/README.ko.md +++ b/README.ko.md @@ -51,6 +51,14 @@ React에서 document head 요소를 관리하기 위한 가볍고 CSR에 최적 - **성능** - 페인트 전 동기적 DOM 업데이트를 위해 `useLayoutEffect` 사용 - **타입 안전성** - TypeScript로 작성되어 완전한 타입 정의 제공 +### React 19의 내장 메타데이터 지원과의 차이점 + +React 19는 컴포넌트 안에서 렌더링한 ``, `<meta>` 요소를 네이티브로 `<head>`에 호이스팅할 수 있습니다. `react-head-safe`는 React 19에서도 동작하며, 네이티브 동작 위에 다음과 같은 가치를 더합니다: + +- **`index.html` 기본값 덮어쓰기** - 네이티브 호이스팅은 `index.html`에 이미 있는 태그와 중복 제거를 하지 않아 크롤러가 기본 태그와 페이지별 태그를 둘 다 볼 수 있지만, `react-head-safe`는 기존 태그를 교체합니다 +- **Twitter Card 자동 생성** - OG props에서 Twitter 태그를 자동으로 파생합니다 +- **버전 간 일관성** - React 17, 18에서도 동일한 API로 동작하므로 마이그레이션 전에 미리 도입할 수 있습니다 + ## 주요 기능 - ✅ **중복 태그 없음** - 새 태그를 만들기 전에 기존 메타 태그 제거 @@ -60,6 +68,7 @@ React에서 document head 요소를 관리하기 위한 가볍고 CSR에 최적 - ✅ **Open Graph 지원** - 소셜 미디어 메타 태그 기본 지원 - ✅ **Twitter Card 지원** - Open Graph 태그 설정 시 Twitter 태그 자동 생성 - ✅ **간단한 API** - props만 전달하면 되는 복잡하지 않은 설정 +- ✅ **React 17–19 호환** - React 17, 18, 19에서 모두 동작 ## 설치 @@ -73,7 +82,7 @@ yarn add react-head-safe pnpm add react-head-safe ``` -의존성 제로 (React는 peer dependency입니다). +의존성 제로 (React는 peer dependency입니다). React 17 이상이 필요하며, React 18과 **React 19**를 완전히 지원합니다. ## 빠른 시작 diff --git a/README.md b/README.md index e226d27..f29a176 100644 --- a/README.md +++ b/README.md @@ -54,6 +54,14 @@ A lightweight, CSR-focused alternative for managing document head elements in Re - **Performance** - Uses `useLayoutEffect` for synchronous DOM updates before paint - **Type safety** - Written in TypeScript with full type definitions +### What about React 19's built-in metadata support? + +React 19 can natively hoist `<title>` and `<meta>` elements rendered inside components into `<head>`. `react-head-safe` works on React 19 too, and still adds value on top of the native behavior: + +- **Overrides `index.html` defaults** - Native hoisting does not deduplicate against tags already present in `index.html`, so crawlers may see both the default and the page-specific tag; `react-head-safe` replaces the existing one +- **Automatic Twitter Cards** - Twitter tags are derived from OG props automatically +- **Consistent across versions** - The same API works identically on React 17 and 18, so you can adopt it before migrating + ## Features - ✅ **No Duplicate Tags** - Removes existing meta tags before creating new ones @@ -63,6 +71,7 @@ A lightweight, CSR-focused alternative for managing document head elements in Re - ✅ **Open Graph Support** - Built-in support for social media meta tags - ✅ **Twitter Card Support** - Automatically sets Twitter tags when Open Graph tags are provided - ✅ **Simple API** - Just pass props, no complex configuration +- ✅ **React 17–19 Compatible** - Works with React 17, 18, and 19 ## Installation @@ -76,7 +85,7 @@ yarn add react-head-safe pnpm add react-head-safe ``` -Zero dependencies required (React is a peer dependency). +Zero dependencies required (React is a peer dependency). Requires React 17 or later — React 18 and **React 19** are fully supported. ## Quick Start diff --git a/package.json b/package.json index c9d8ee2..bdc31c7 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-head-safe", - "version": "1.10.0", + "version": "1.10.1", "description": "A lightweight React head manager for CSR apps. Safely manage document title, meta tags, Open Graph, and SEO metadata without duplicates. TypeScript support included.", "author": "umsungjun", "license": "MIT",