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"],
},
};