react-head-safe

소개

index.html 의 기본 태그 위에 페이지별 태그를 덮어써서, JS 를 실행하지 않는 크롤러와 실행하는 크롤러 모두 맞는 값을 읽게 합니다.
회사에서 메타 태그 중복을 풀며 만든 컴포넌트를 범용으로 다듬어 공개했습니다.

기능

• props 하나로 설정ReactHeadSafe 에 title · description · og 값을 넘기면 head 에 반영됩니다.
• 중복 태그 제거새 태그를 넣기 전에 기존 메타 태그를 지워 기본값과 겹치지 않습니다.
• Twitter Card 자동 생성og 값으로 twitter 태그와 twitter:card 를 함께 씁니다.
• 언마운트 정리페이지를 떠나면 그 인스턴스가 넣은 meta · link 태그를 지웁니다.
• canonical · robots대표 주소와 색인 여부를 지정합니다.
• React 17 · 18 · 19React 말고는 의존성 없이 세 버전에서 같은 API 로 동작합니다.

기술

• React
• TypeScript
• Vite
• Vitest