feat(seo): add open graph metadata

sawaYch · Mar 6, 2024 · 79e697f · 79e697f
1 parent 309ba08
commit 79e697f
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 4 deletions.
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -10,10 +10,51 @@ import StoreProvider from '@/stores/store-provider';
 
 const inter = Inter({ subsets: ['latin'] });
 
-// TODO:SEO stuffs, og image
 export const metadata: Metadata = {
-  title: 'MyaPoll🐼',
-  description: 'MyaPoll🐼',
+  title: 'Mya88🐼',
+  description:
+    'Youtube live stream polling app powered by Next & official data APIv3',
+  applicationName: 'MyaPoll',
+  authors: [{ name: 'No.159 Sawa', url: 'https://sawaych.github.io/' }],
+  generator: 'Next.js',
+  keywords: ['youtube', 'mya', 'vtuber', 'hkvtuber'],
+  referrer: 'origin',
+  creator: 'No.159 Sawa',
+  publisher: 'Vercel',
+  themeColor: [{ media: '(prefers-color-scheme: dark)', color: '#da2777' }],
+  colorScheme: 'dark',
+  viewport: {
+    width: 'device-width',
+    initialScale: 1,
+    maximumScale: 1,
+  },
+  robots: 'index, follow',
+  openGraph: {
+    type: 'website',
+    url: 'https://myapoll.vercel.app/',
+    title: 'MyaPoll🐼',
+    description:
+      'Youtube live stream polling app powered by Next & official data APIv3',
+    siteName: 'Mya88',
+    images: [
+      {
+        url: 'https://myapoll.vercel.app/og',
+      },
+    ],
+  },
+  twitter: {
+    card: 'summary_large_image',
+    site: '@site',
+    creator: '@creator',
+    images: 'https://myapoll.vercel.app/og',
+  },
+  icons: [
+    {
+      rel: 'icon',
+      url: '/greeting.webp',
+      type: 'image/webp',
+    },
+  ],
 };
 
 export default function RootLayout({

diff --git a/app/og/route.tsx b/app/og/route.tsx
@@ -21,7 +21,7 @@ export async function GET() {
           tw='opacity-30 absolute'
           width='1024'
           height='570'
-          src={'https://myapoll.vercel.app/mya-bg.jpg'}
+          src={'https://myapoll.vercel.app/mya-bg.png'}
           alt='og-image'
         />
         <h2 tw='flex flex-col text-3xl sm:text-4xl font-bold tracking-tight text-gray-900 text-left'>