diff --git a/package-lock.json b/package-lock.json
index 447c385..e085860 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,7 @@
       "version": "0.1.0",
       "dependencies": {
         "@craco/craco": "^7.1.0",
+        "@types/react-helmet": "^6.1.11",
         "axios": "^1.7.9",
         "chart.js": "^4.4.7",
         "customize-cra": "^1.0.0",
@@ -17,6 +18,8 @@
         "react-beautiful-dnd": "^13.1.1",
         "react-chartjs-2": "^5.3.0",
         "react-dom": "^18.3.1",
+        "react-helmet": "^6.1.0",
+        "react-helmet-async": "^2.0.5",
         "react-router-dom": "^7.0.2",
         "styled-components": "^6.1.13"
       },
@@ -4664,6 +4667,15 @@
         "@types/react": "*"
       }
     },
+    "node_modules/@types/react-helmet": {
+      "version": "6.1.11",
+      "resolved": "https://registry.npmjs.org/@types/react-helmet/-/react-helmet-6.1.11.tgz",
+      "integrity": "sha512-0QcdGLddTERotCXo3VFlUSWO3ztraw8nZ6e3zJSgG7apwV5xt+pJUS8ewPBqT4NYB1optGLprNQzFleIY84u/g==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
     "node_modules/@types/react-redux": {
       "version": "7.1.34",
       "resolved": "https://registry.npmjs.org/@types/react-redux/-/react-redux-7.1.34.tgz",
@@ -10404,6 +10416,15 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/invariant": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
+      "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "node_modules/ipaddr.js": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-2.2.0.tgz",
@@ -16405,6 +16426,41 @@
       "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==",
       "license": "MIT"
     },
+    "node_modules/react-fast-compare": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.2.tgz",
+      "integrity": "sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==",
+      "license": "MIT"
+    },
+    "node_modules/react-helmet": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/react-helmet/-/react-helmet-6.1.0.tgz",
+      "integrity": "sha512-4uMzEY9nlDlgxr61NL3XbKRy1hEkXmKNXhjbAIOVw5vcFrsdYbH2FEwcNyWvWinl103nXgzYNlns9ca+8kFiWw==",
+      "license": "MIT",
+      "dependencies": {
+        "object-assign": "^4.1.1",
+        "prop-types": "^15.7.2",
+        "react-fast-compare": "^3.1.1",
+        "react-side-effect": "^2.1.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.3.0"
+      }
+    },
+    "node_modules/react-helmet-async": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/react-helmet-async/-/react-helmet-async-2.0.5.tgz",
+      "integrity": "sha512-rYUYHeus+i27MvFE+Jaa4WsyBKGkL6qVgbJvSBoX8mbsWoABJXdEO0bZyi0F6i+4f0NuIb8AvqPMj3iXFHkMwg==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "invariant": "^2.2.4",
+        "react-fast-compare": "^3.2.2",
+        "shallowequal": "^1.1.0"
+      },
+      "peerDependencies": {
+        "react": "^16.6.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
@@ -16567,6 +16623,15 @@
         }
       }
     },
+    "node_modules/react-side-effect": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/react-side-effect/-/react-side-effect-2.1.2.tgz",
+      "integrity": "sha512-PVjOcvVOyIILrYoyGEpDN3vmYNLdy1CajSFNt4TDsVQC5KpTijDvWVoR+/7Rz2xT978D8/ZtFceXxzsPwZEDvw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.3.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
diff --git a/package.json b/package.json
index 3b871b8..27c6cb0 100644
--- a/package.json
+++ b/package.json
@@ -4,6 +4,7 @@
   "private": true,
   "dependencies": {
     "@craco/craco": "^7.1.0",
+    "@types/react-helmet": "^6.1.11",
     "axios": "^1.7.9",
     "chart.js": "^4.4.7",
     "customize-cra": "^1.0.0",
@@ -12,6 +13,8 @@
     "react-beautiful-dnd": "^13.1.1",
     "react-chartjs-2": "^5.3.0",
     "react-dom": "^18.3.1",
+    "react-helmet": "^6.1.0",
+    "react-helmet-async": "^2.0.5",
     "react-router-dom": "^7.0.2",
     "styled-components": "^6.1.13"
   },
diff --git a/public/index.html b/public/index.html
index 335ca9f..1c83adb 100644
--- a/public/index.html
+++ b/public/index.html
@@ -7,12 +7,6 @@
     <meta name="description" content="링크메리와 함께 결혼 준비의 시작을 더욱 특별하게. 이제, 종이 청첩장 대신 스마트폰으로 간편하고 빠르게 초대장을 보내보세요"/>
     <meta name="theme-color" content="#000000"/>
 
-    <meta property="og:title" content="링크메리"/>
-    <meta property="og:description" content="링크메리와 함께 결혼 준비의 시작을 더욱 특별하게. 이제, 종이 청첩장 대신 스마트폰으로 간편하고 빠르게 초대장을 보내보세요"/>
-    <meta property="og:image" content="/logo512"/>
-    <meta property="og:url" content="https://www.linkmarry.com/"/>
-    <meta property="og:type" content="website"/>
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png"/>
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
diff --git a/src/App.tsx b/src/App.tsx
index 60e1e8b..81514cd 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -19,6 +19,7 @@ import {dummyWedding} from "@remote/value/Wedding";
 import TemplatesPage from "@page/templates/TemplatesPage";
 import GlobalStyle from "@src/GlobalStyle";
 import WeddingPage from "@page/WeddingPage";
+import {Helmet} from "react-helmet";
 
 const {Kakao} = window as any;
 
@@ -31,8 +32,17 @@ function App() {
     }, []);
 
     return (
-        <Router>
+        <>
             <GlobalStyle/>
+            <Helmet>
+                <meta property="og:title" content="링크메리"/>
+                <meta property="og:description"
+                      content="링크메리와 함께 결혼 준비의 시작을 더욱 특별하게. 이제, 종이 청첩장 대신 스마트폰으로 간편하고 빠르게 초대장을 보내보세요"/>
+                <meta property="og:image" content="/logo512"/>
+                <meta property="og:url" content="https://www.linkmarry.com/"/>
+                <meta property="og:type" content="website"/>
+                <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png"/>
+            </Helmet>
             <Routes>
                 {/*service*/}
                 <Route path={'login/oauth2/code/kakao'} element={<KakaoRedirectPage/>}/>
@@ -69,7 +79,7 @@ function App() {
                     </div>
                 )}/>
             </Routes>
-        </Router>
+        </>
     );
 }
 
diff --git a/src/component/template/TemplateComponent.tsx b/src/component/template/TemplateComponent.tsx
index 7539233..9c33c88 100644
--- a/src/component/template/TemplateComponent.tsx
+++ b/src/component/template/TemplateComponent.tsx
@@ -19,6 +19,7 @@ import InvitationLetterTemplate, {
 import RsvpDialog from "@src/component/template/dialog/rsvp/RsvpDialog";
 import Cookies from "js-cookie";
 import CreateRsvpDialog from "@src/component/template/dialog/rsvp/CreateRsvpDialog";
+import {Helmet} from "react-helmet";
 
 interface Template1Props {
     wedding: Wedding;
@@ -75,6 +76,12 @@ function TemplateComponent(
 
     return (
         <S.container ref={rootRef} $templateFont={templateFont}>
+            <Helmet>
+                <meta property={'og:title'} content={wedding.linkShare.urlTitle}/>
+                <meta property={'og:description'} content={wedding.linkShare.urlContent}/>
+                <meta property={'og:image'} content={wedding.linkShare.urlImg}/>
+                <title>{wedding.linkShare.urlTitle}</title>
+            </Helmet>
             <PreviewTemplate
                 template={wedding.template}
                 baseInfo={wedding.baseInfo}
diff --git a/src/index.tsx b/src/index.tsx
index 952014e..037a995 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,10 +1,16 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import App from '@src/App';
+import {HelmetProvider} from "react-helmet-async";
+import {BrowserRouter} from "react-router-dom";
 
 const root = ReactDOM.createRoot(
     document.getElementById('root') as HTMLElement
 );
 root.render(
-    <App/>
+    <BrowserRouter>
+        <HelmetProvider>
+            <App/>
+        </HelmetProvider>
+    </BrowserRouter>
 );
\ No newline at end of file