Hotfix-S : SEO 작업 html 파일에 임시로 넣어두기 (#408)

* hotfix: App, WorkspacePage에 isLoaded 상태 추가 (#402) * hotfix : 임시로 html 파일에 meta 태그 추가 Co-authored-by: Won-hee Cho <[email protected]> Co-authored-by: hodun <[email protected]> Co-authored-by: Seyoung Kim <[email protected]>
boostcampwm-2022 · Dec 17, 2022 · 36656cd · 36656cd
1 parent e3de233
commit 36656cd
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 23 deletions.
diff --git a/client/index.html b/client/index.html
@@ -2,6 +2,27 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="🖥️ 화상회의와 회의록 작성을 한번에, Wabinar🖋️" />
+    <meta name="keywords" content="회의툴, 공유 회의록, 화상회의, 실시간 공동 편집" />
+
+    <meta property="og:url" content="https://www.wabinar.live" />
+    <meta property="og:type" content="website" />
+    <meta property="og:title" content="Wabinar" />
+    <meta property="og:type" content="website" />
+    <meta property="og:site_name" content="Wabinar" />
+    <meta property="og:description" content="🖥️ 화상회의와 회의록 작성을 한번에, Wabinar🖋️" />
+    <meta property="og:image" content="/og-img.png" />
+
+    <link rel="apple-touch-icon" href="/og-img.png" />
+    <link rel="canonical" href="/og-img.png" />
+
+    <title>Wabinar</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/client/public/og-img.png b/client/public/og-img.png
diff --git a/client/src/App.tsx b/client/src/App.tsx
@@ -5,7 +5,6 @@ import UserContext from 'src/contexts/user';
 import { User } from 'src/types/user';
 
 import 'styles/reset.scss';
-import MetaHelmet from './components/MetaHelmet';
 
 const LoginPage = lazy(() => import('src/pages/Login'));
 const OAuthPage = lazy(() => import('src/pages/OAuth'));
@@ -36,23 +35,20 @@ function App() {
   }, []);
 
   return (
-    <>
-      <MetaHelmet title="화상회의와 회의록 작성을 한번에, Wabinar" />
-      <Suspense fallback={<LoadingPage />}>
-        {isLoaded ? (
-          <UserContext.Provider value={{ user, setUser }}>
-            <Routes>
-              <Route path="/" element={<LoginPage />} />
-              <Route path="/oauth" element={<OAuthPage />} />
-              <Route path="/workspace/*" element={<WorkspacePage />} />
-              <Route path="/404" element={<NotFoundPage />} />
-            </Routes>
-          </UserContext.Provider>
-        ) : (
-          <LoadingPage />
-        )}
-      </Suspense>
-    </>
+    <Suspense fallback={<LoadingPage />}>
+      {isLoaded ? (
+        <UserContext.Provider value={{ user, setUser }}>
+          <Routes>
+            <Route path="/" element={<LoginPage />} />
+            <Route path="/oauth" element={<OAuthPage />} />
+            <Route path="/workspace/*" element={<WorkspacePage />} />
+            <Route path="/404" element={<NotFoundPage />} />
+          </Routes>
+        </UserContext.Provider>
+      ) : (
+        <LoadingPage />
+      )}
+    </Suspense>
   );
 }
 

diff --git a/client/src/main.tsx b/client/src/main.tsx
@@ -1,5 +1,4 @@
 import ReactDOM from 'react-dom/client';
-import { HelmetProvider } from 'react-helmet-async';
 import { BrowserRouter } from 'react-router-dom';
 
 import 'react-toastify/dist/ReactToastify.css';
@@ -8,9 +7,7 @@ import Toaster from './components/common/Toaster';
 
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
   <BrowserRouter>
-    <HelmetProvider>
-      <App />
-      <Toaster />
-    </HelmetProvider>
+    <App />
+    <Toaster />
   </BrowserRouter>,
 );