update metadata and viewport

app/layout.tsx

@@ -3,14 +3,55 @@ import Footer from '@/components/Footer'
 import Header from '@/components/Header'
 import Search from '@/components/Search'
 import config from '@/lib/config'
-import type {Metadata} from 'next'
+import type {Metadata, Viewport} from 'next'
 
 /**
- * Generate default site metadata.
+ * Generate metadata.
+ *
+ * @see https://nextjs.org/docs/app/api-reference/functions/generate-metadata
  */
 export const metadata: Metadata = {
-  title: config.siteName,
-  description: config.metaDescription
+  metadataBase: new URL(config.siteUrl),
+  title: `${config.siteName} - ${config.siteDescription}`,
+  description: config.metaDescription,
+  robots: 'follow, index',
+  alternates: {
+    canonical: config.siteUrl
+  },
+  manifest: '/manifest.json',
+  openGraph: {
+    title: config.siteName,
+    description: config.metaDescription,
+    type: 'website',
+    locale: 'en_US',
+    url: config.siteUrl,
+    images: [
+      {
+        url: `${config.siteUrl}social-share.webp`,
+        width: 1200,
+        height: 630,
+        alt: config.siteName
+      }
+    ]
+  },
+  icons: {
+    icon: '/favicon.ico',
+    apple: '/icon.png',
+    shortcut: '/icon.png'
+  },
+  verification: {
+    google: process.env.NEXT_PUBLIC_GOOGLE_SITE_VERIFICATION || ''
+  }
+}
+
+/**
+ * Setup viewport.
+ *
+ * @see https://nextjs.org/docs/app/api-reference/functions/generate-viewport#the-viewport-object
+ */
+export const viewport: Viewport = {
+  colorScheme: 'dark',
+  themeColor: '#18181b'
 }
 
 /**

app/r/[slug]/page.tsx

@@ -7,12 +7,21 @@ import type {Metadata} from 'next'
 import Link from 'next/link'
 
 /**
- * Generate metadata for the single subreddit route.
+ * Generate metadata.
+ *
+ * @see https://nextjs.org/docs/app/api-reference/functions/generate-metadata
  */
 export async function generateMetadata({params}: PageProps): Promise<Metadata> {
   return {
     title: `${config.siteName} - ${params.slug}`,
-    description: `The latest posts from the r/${params.slug} subreddit`
+    description: `The latest posts from the ${params.slug} subreddit`,
+    alternates: {
+      canonical: `${config.siteUrl}r/${params.slug}`
+    },
+    openGraph: {
+      description: `The latest posts from the ${params.slug} subreddit`,
+      url: `${config.siteUrl}r/${params.slug}`
+    }
   }
 }