fix: metadata tags

Cygra · Jan 11, 2025 · 3a3c688 · 3a3c688
1 parent 6f6342d
commit 3a3c688
Showing 1 changed file with 22 additions and 31 deletions.
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,7 +1,6 @@
 import type { Metadata } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";
-import Head from "next/head";
 import { GoogleAnalytics } from "@next/third-parties/google";
 
 const geistSans = Geist({
@@ -15,8 +14,28 @@ const geistMono = Geist_Mono({
 });
 
 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+  title: "Danmaku Mask",
+  description:
+    "基于 Next.js 和 Mediapipe tasks-vision Image Segmenter 实现的模拟 Bilibili 实时防挡脸弹幕效果。" +
+    "使用机器学习在人脸上渲染一个实时的 mask。" +
+    "This site is developed with Next.js and Mediapipe tasks-vision Image Segmenter." +
+    " Implmenting machine learning to detect human face and render a real-time mask.",
+  openGraph: {
+    type: "website",
+    url: "https://cygra.github.io/danmaku-mask/",
+    title: "Danmaku Mask",
+    description:
+      "基于 Next.js 和 Mediapipe tasks-vision Image Segmenter 实现的模拟 Bilibili 实时防挡脸弹幕效果。" +
+      "使用机器学习在人脸上渲染一个实时的 mask。" +
+      "This site is developed with Next.js and Mediapipe tasks-vision Image Segmenter." +
+      " Implmenting machine learning to detect human face and render a real-time mask.",
+    siteName: "Danmaku Mask",
+    images: [
+      {
+        url: "https://example.com/og.png",
+      },
+    ],
+  },
 };
 
 export default function RootLayout({
@@ -27,34 +46,6 @@ export default function RootLayout({
   return (
     <html lang="en">
       <GoogleAnalytics gaId="G-2ZP5YG0JDG" />
-      <Head>
-        <title>Danmaku Mask</title>
-        <meta
-          name="description"
-          content={
-            "基于 Next.js 和 Mediapipe tasks-vision Image Segmenter 实现的模拟 Bilibili 实时防挡脸弹幕效果。" +
-            "使用机器学习在人脸上渲染一个实时的 mask。" +
-            "This site is developed with Next.js and Mediapipe tasks-vision Image Segmenter." +
-            " Implmenting machine learning to detect human face and render a real-time mask."
-          }
-        />
-        <meta property="og:title" content="Danmaku Mask" />
-        <meta property="og:site_name" content="Danmaku Mask" />
-        <meta property="og:type" content="website" />
-        <meta
-          property="og:description"
-          content={
-            "基于 Next.js 和 Mediapipe tasks-vision Image Segmenter 实现的模拟 Bilibili 实时防挡脸弹幕效果。" +
-            "使用机器学习在人脸上渲染一个实时的 mask。" +
-            "This site is developed with Next.js and Mediapipe tasks-vision Image Segmenter." +
-            " Implmenting machine learning to detect human face and render a real-time mask."
-          }
-        />
-        <meta
-          property="og:url"
-          content="https://cygra.github.io/danmaku-mask/"
-        />
-      </Head>
       <body
         className={`${geistSans.variable} ${geistMono.variable} antialiased`}
       >