feat: Implement PWA, Open Graph meta tags (#2)

romantech · Feb 17, 2024 · 5c7203a · 5c7203a
1 parent 909a7f9
commit 5c7203a
Show file tree

Hide file tree

Showing 10 changed files with 1,802 additions and 85 deletions.
diff --git a/index.html b/index.html
@@ -2,11 +2,29 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link href="/favicon.png" rel="icon" type="image/png" />
     <meta content="width=device-width, initial-scale=1.0" name="viewport" />
+
+    <meta content="A customizable Tic-Tac-Toe game built with React" name="description" />
+    <meta content="Romantech" name="author" />
+    <meta content="Game, TicTacToe, Tic-Tac-Toe" name="keywords" />
     <!-- 웹 사이트 테마 색상; 모바일 브라우저 주소창, PWA 툴바, 아이폰 노치바 등 -->
     <meta content="#1E293B" name="theme-color" />
-    <title>TicTacToe</title>
+
+    <!-- Open Graph 기본 정보 -->
+    <meta content="website" property="og:type" />
+    <meta content="Tic-Tac-Toe" property="og:title" />
+    <meta content="Tic-Tac-Toe" property="og:site_name" />
+    <meta content="A customizable Tic-Tac-Toe game built with React" property="og:description" />
+    <meta content="https://tictactoe.romantech.net" property="og:url" />
+    <meta content="https://bit.ly/42Q0EFl" property="og:image" />
+
+    <!-- 파비콘 -->
+    <link href="/favicon.png" rel="icon" sizes="512x512" type="image/png" />
+    <!-- iOS 에서 웹앱을 홈화면에 추가할 때 사용하는 아이콘 -->
+    <link href="/icon-maskable-512.png" rel="apple-touch-icon" sizes="512x512" type="image/png" />
+
+    <link href="/manifest.json" rel="manifest" />
+    <title>Tic-Tac-Toe</title>
   </head>
   <!-- 처음 로드시 하얀색 깜빡임 방지 -->
   <body style="background-color: #1e293b">

diff --git a/package.json b/package.json
@@ -42,6 +42,7 @@
     "tailwindcss": "^3.4.1",
     "typescript": "^5.2.2",
     "vite": "^5.0.8",
+    "vite-plugin-pwa": "^0.18.2",
     "vite-plugin-svgr": "^4.2.0",
     "vite-tsconfig-paths": "^4.3.1"
   }