(edited)
I have added the metadata under app/layout.tsx
export const metadata: Metadata = { title: { template: `%s | Ottoni`, default: APP_NAME, }, description: APP_DESCRIPTION, metadataBase: new URL(SERVER_URL), icons: { icon: [ { url: "/favicon-96x96.png", type: "image/png", sizes: "96x96" }, { url: "/web-app-manifest-192x192.png", type: "image/png", sizes: "192x192", }, { url: "/web-app-manifest-512x512.png", type: "image/png", sizes: "512x512", }, { url: "/favicon.svg", type: "image/svg+xml" }, { url: "/favicon.ico", type: "image/x-icon" }, ], apple: "/apple-touch-icon.png", }, manifest: "/site.webmanifest", openGraph: { title: "Ottoni Pesca", description: APP_DESCRIPTION, url: "https://ottoni-pesca.com", siteName: "Ottoni", images: [ { url: "https://ottoni-pesca.com/apple-touch-icon.png", width: 1200, height: 630, alt: APP_DESCRIPTION, }, ], type: "website", }, twitter: { card: "summary_large_image", title: "Ottoni Pesca", description: APP_DESCRIPTION, images: ["https://ottoni-pesca.com/apple-touch-icon.png"], },};