fix(seo): change meta tag injection to follow Next.js' way

- move static assets to app directory
Jaewoook · Jan 23, 2024 · 21691b4 · 21691b4
1 parent f9d7041
commit 21691b4
Show file tree

Hide file tree

Showing 10 changed files with 29 additions and 14 deletions.
diff --git a/public/apple-touch-icon.png → app/apple-icon.png b/public/apple-touch-icon.png → app/apple-icon.png
diff --git a/public/favicon.ico → app/favicon.ico b/public/favicon.ico → app/favicon.ico
diff --git a/public/favicon-32x32.png → app/icon1.png b/public/favicon-32x32.png → app/icon1.png
diff --git a/public/favicon-16x16.png → app/icon2.png b/public/favicon-16x16.png → app/icon2.png
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,3 +1,4 @@
+import type { Metadata } from "next";
 import "normalize.css";
 
 import { Wallpaper } from "./components/Wallpaper";
@@ -9,18 +10,6 @@ const RootLayout = ({ children }: PropsWithChildren) => {
   return (
     <html lang="ko">
       <head>
-        <title>Jaewook Ahn - Portfolio</title>
-        <meta name="description" content="Jaewook Ahn's Portfolio Website" />
-        <meta name="og:type" content="website" />
-        <meta name="og:title" content="Jaewook Ahn - Portfolio" />
-        <meta name="og:description" content="Jaewook Ahn's Portfolio Website" />
-        <meta name="og:url" content="https://portfolio.jaewook.me" />
-        <meta name="og:image" content="https://portfolio.jaewook.me/thumbnail.png" />
-        <meta name="og:locale" content="en_US" />
-        <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
-        <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
-        <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
-        <link rel="manifest" href="/site.webmanifest" />
         <link rel="preconnect" href="https://fonts.googleapis.com" />
         <link
           href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@200;300;400;500;600;700;800;900&display=swap"
@@ -37,4 +26,28 @@ const RootLayout = ({ children }: PropsWithChildren) => {
   );
 };
 
+export const metadata: Metadata = {
+  title: "Jaewook Ahn - Portfolio",
+  description: "Jaewook Ahn's Portfolio Website",
+  applicationName: "Jaewook Ahn | Portfolio",
+  authors: {
+    name: "Jaewook Ahn",
+    url: "https://jaewook.me",
+  },
+  appleWebApp: {
+    capable: true,
+    title: "Jaewook Ahn | Portfolio",
+  },
+  category: "Portfolio",
+  colorScheme: "dark",
+  openGraph: {
+    type: "website",
+    description: "Jaewook Ahn's Portfolio Website",
+    title: "Jaewook Ahn - Portfolio",
+    url: "https://portfolio.jaewook.me",
+    locale: "ko_KR",
+    alternateLocale: "en_US",
+  },
+};
+
 export default RootLayout;
diff --git a/public/site.webmanifest → app/manifest.webmanifest b/public/site.webmanifest → app/manifest.webmanifest
@@ -2,16 +2,17 @@
     "name": "Jaewook Ahn - Portfolio",
     "short_name": "Jaewook Ahn - Portfolio",
     "theme_color": "#FFFFFF",
+    "start_url": "/",
     "background_color": "#FFFFFF",
     "display": "standalone",
     "icons": [
        {
-          "src": "/android-chrome-192x192.png",
+          "src": "icons/android-chrome-192x192.png",
           "sizes": "192x192",
           "type": "image/png"
        },
        {
-        "src": "/android-chrome-512x512.png",
+        "src": "icons/android-chrome-512x512.png",
         "sizes": "512x512",
         "type": "image/png"
         }

diff --git a/app/opengraph-image.alt.txt b/app/opengraph-image.alt.txt
@@ -0,0 +1 @@
+/** Jaewook Ahn - Portfolio */
diff --git a/public/thumbnail.png → app/opengraph-image.png b/public/thumbnail.png → app/opengraph-image.png
diff --git a/public/android-chrome-192x192.png → public/icons/android-chrome-192x192.png b/public/android-chrome-192x192.png → public/icons/android-chrome-192x192.png
diff --git a/public/android-chrome-512x512.png → public/icons/android-chrome-512x512.png b/public/android-chrome-512x512.png → public/icons/android-chrome-512x512.png