feat: 구글 검색 유입을 위한 SEO 메타태그 및 크롤링 인프라 구성

package.json

@@ -24,6 +24,7 @@
     "react-datepicker": "^8.4.0",
     "react-dom": "^19.1.0",
     "react-ga4": "^2.1.0",
+    "react-helmet-async": "^3.0.0",
     "react-router-dom": "^7.6.0",
     "zustand": "^5.0.4"
   },

public/robots.txt

@@ -0,0 +1,8 @@
+User-agent: *
+Allow: /search/book/
+Allow: /group/detail/
+Allow: /feed/
+Disallow: /mypage
+Disallow: /signup
+Disallow: /memory/
+Sitemap: https://thip.co.kr/sitemap.xml

public/sitemap.xml

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+  <url>
+    <loc>https://thip.co.kr/</loc>
+    <priority>1.0</priority>
+  </url>
+  <url>
+    <loc>https://thip.co.kr/feed</loc>
+    <priority>0.8</priority>
+  </url>
+  <url>
+    <loc>https://thip.co.kr/group</loc>
+    <priority>0.8</priority>
+  </url>
+</urlset>

src/components/common/SEOHead.tsx

@@ -0,0 +1,22 @@
+import { Helmet } from 'react-helmet-async';
+
+interface SEOHeadProps {
+  title?: string;
+  description?: string;
+}
+
+const DEFAULT_TITLE = 'THIP, 독서를 기록하는 가장 힙한 방법';
+const DEFAULT_DESC = '커뮤니티형 독서 기록 플랫폼 THIP';
+
+const SEOHead = ({ title, description }: SEOHeadProps) => {
+  const fullTitle = title ? `${title} - THIP` : DEFAULT_TITLE;
+
+  return (
+    <Helmet>
+      <title>{fullTitle}</title>
+      <meta name="description" content={description ?? DEFAULT_DESC} />
+    </Helmet>
+  );
+};
+
+export default SEOHead;

src/main.tsx

@@ -1,8 +1,13 @@
 import { createRoot } from 'react-dom/client';
+import { HelmetProvider } from 'react-helmet-async';
 import './main.css';
 import App from './App.tsx';
 import { initGA } from './shared/lib/analytics/ga';
 
 initGA();
 
-createRoot(document.getElementById('root')!).render(<App />);
+createRoot(document.getElementById('root')!).render(
+  <HelmetProvider>
+    <App />
+  </HelmetProvider>,
+);

src/pages/groupDetail/GroupDetail.tsx

@@ -47,6 +47,7 @@ import bookCoverLargeImg from '../../assets/books/bookCoverLarge.svg';
 import PasswordModal from '@/components/group/PasswordModal';
 import { usePopupStore } from '@/stores/popupStore';
 import { BannerSkeleton, BookSkeleton } from '@/shared/ui/Skeleton';
+import SEOHead from '@/components/common/SEOHead';
 
 const GroupDetail = () => {
   const { roomId } = useParams<{ roomId: string }>();
@@ -91,9 +92,7 @@ const GroupDetail = () => {
         setError(null);
 
         const minLoadingTime = new Promise(resolve => setTimeout(resolve, 500));
-        const [response] = await Promise.all([
-          getRoomDetail(Number(roomId)),
-        ]);
+        const [response] = await Promise.all([getRoomDetail(Number(roomId))]);
         await minLoadingTime;
 
         if (response.isSuccess) {
@@ -293,6 +292,10 @@ const GroupDetail = () => {
 
   return (
     <Wrapper>
+      <SEOHead
+        title={roomData.roomName}
+        description={`${roomData.bookTitle} 독서모임 | THIP에서 함께 읽어요.`}
+      />
       <TopBackground genre={category}>
         <Header>
           <IconButton src={leftArrow} onClick={handleBackButton} />

src/pages/searchBook/SearchBook.tsx

@@ -42,6 +42,7 @@ import { usePopupStore } from '@/stores/popupStore';
 import { FeedPostSkeleton, BookDetailSkeleton } from '@/shared/ui/Skeleton';
 import { usePreventDoubleClick } from '@/hooks/usePreventDoubleClick';
 import { useInifinieScroll } from '@/hooks/useInifinieScroll';
+import SEOHead from '@/components/common/SEOHead';
 
 const FILTER = ['최신순', '인기순'] as const;
 const toFeedSort = (f: (typeof FILTER)[number]): FeedSort => (f === '최신순' ? 'latest' : 'like');
@@ -212,6 +213,12 @@ const SearchBook = () => {
 
   return (
     <Wrapper>
+      {bookDetail && (
+        <SEOHead
+          title={bookDetail.title}
+          description={`${bookDetail.authorName} 저 | THIP에서 독서모임과 독후감을 만나보세요.`}
+        />
+      )}
       {bookDetail && <TopBackground bookImgUrl={bookDetail.imageUrl} />}
       <Header>
         <IconButton src={leftArrow} onClick={handleBackButton} />