فهرست منبع

feat(layout.tsx): enhance metadata structure for improved SEO and social sharing capabilities, including Open Graph and Twitter card support, and add alternate language links for better localization.

Mathias 10 ماه پیش
والد
کامیت
53af654046
1فایلهای تغییر یافته به همراه73 افزوده شده و 34 حذف شده
  1. 73 34
      app/[locale]/layout.tsx

+ 73 - 34
app/[locale]/layout.tsx

@@ -21,9 +21,69 @@ import type { Metadata } from "next";
 import "@/shared/styles/globals.css";
 import "@/shared/styles/globals.css";
 
 
 export const metadata: Metadata = {
 export const metadata: Metadata = {
-  title: SiteConfig.title,
+  title: {
+    default: SiteConfig.title,
+    template: `%s | ${SiteConfig.title}`,
+  },
   description: SiteConfig.description,
   description: SiteConfig.description,
   metadataBase: new URL(getServerUrl()),
   metadataBase: new URL(getServerUrl()),
+  robots: {
+    index: true,
+    follow: true,
+    googleBot: {
+      index: true,
+      follow: true,
+      "max-snippet": -1,
+      "max-image-preview": "large",
+      "max-video-preview": -1,
+    },
+  },
+  openGraph: {
+    title: SiteConfig.title,
+    description: SiteConfig.description,
+    url: getServerUrl(),
+    siteName: SiteConfig.title,
+    images: [
+      {
+        url: `${getServerUrl()}/images/default-og-image_fr.png`,
+        width: 1200,
+        height: 630,
+        alt: SiteConfig.title,
+      },
+      {
+        url: `${getServerUrl()}/images/default-og-image_en.png`,
+        width: 1200,
+        height: 630,
+        alt: SiteConfig.title,
+      },
+    ],
+    locale: "fr_FR",
+    type: "website",
+  },
+  twitter: {
+    card: "summary_large_image",
+    site: "@workout_cool",
+    title: SiteConfig.title,
+    description: SiteConfig.description,
+    images: [`${getServerUrl()}/images/default-og-image_fr.png`],
+  },
+  alternates: {
+    canonical: "https://www.workout.cool",
+    languages: {
+      fr: "https://www.workout.cool/fr",
+      en: "https://www.workout.cool/en",
+    },
+  },
+  authors: [{ name: "Workout Cool", url: "https://www.workout.cool" }],
+  icons: {
+    icon: [
+      { url: "/images/favicon-32x32.png", sizes: "32x32", type: "image/png" },
+      { url: "/images/favicon-16x16.png", sizes: "16x16", type: "image/png" },
+      { url: "/images/favicon.ico", type: "image/x-icon" },
+    ],
+    apple: "/apple-touch-icon.png",
+  },
+  manifest: "/site.webmanifest",
 };
 };
 
 
 const inter = Inter({
 const inter = Inter({
@@ -54,40 +114,19 @@ export default async function RootLayout({ params, children }: RootLayoutProps)
       <html className="h-full" dir="ltr" lang={locale} suppressHydrationWarning>
       <html className="h-full" dir="ltr" lang={locale} suppressHydrationWarning>
         <head>
         <head>
           <meta charSet="UTF-8" />
           <meta charSet="UTF-8" />
-          <meta content="width=device-width, initial-scale=1" name="viewport" />
-
-          {/* SEO */}
-          <meta content="index, follow" name="robots" />
-          <meta content="Workout Cool" name="author" />
-
-          {/* Favicon */}
-          <link href="/apple-touch-icon.png" rel="apple-touch-icon" sizes="180x180" />
-          <link href="/images/favicon-32x32.png" rel="icon" sizes="32x32" type="image/png" />
-          <link href="/images/favicon-16x16.png" rel="icon" sizes="16x16" type="image/png" />
-          <link href="/images/favicon.ico" rel="shortcut icon" />
-
-          {/* Open Graph */}
-          <meta content={SiteConfig.title} property="og:title" />
-          <meta content={SiteConfig.description} property="og:description" />
-          <meta content={"https://www.workout.cool"} property="og:url" />
-          <meta content="website" property="og:type" />
-          <meta content={`${getServerUrl()}/images/default-og-image_${locale}.png`} property="og:image" />
-
-          {/* Twitter */}
-          <meta content="summary_large_image" name="twitter:card" />
-          <meta content="@workout_cool" name="twitter:site" />
-          <meta content={SiteConfig.title} name="twitter:title" />
-          <meta content={SiteConfig.description} name="twitter:description" />
-          <meta content={`${getServerUrl()}/images/default-og-image_${locale}.png`} name="twitter:image" />
-
-          {/* Canonical */}
-          <link href="https://www.workout.cool" rel="canonical" />
-
-          {/* Open Graph Locale */}
-          <meta content={locale === "fr" ? "fr_FR" : "en_US"} property="og:locale" />
-          <meta content="fr_FR" property="og:locale:alternate" />
-          <meta content="en_US" property="og:locale:alternate" />
+          <meta content="#f3f4f6" media="(prefers-color-scheme: light)" name="theme-color" />
+          <meta content="#18181b" media="(prefers-color-scheme: dark)" name="theme-color" />
+          <meta content="width=device-width, initial-scale=1, maximum-scale=1 viewport-fit=cover" name="viewport" />
+          <link href="/site.webmanifest" rel="manifest" />
 
 
+          {/* eslint-disable-next-line @next/next/no-page-custom-font */}
+          <link as="style" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="preload" />
+
+          {/* Alternate hreflang for i18n */}
+          <link href="https://www.workout.cool/fr" hrefLang="fr" rel="alternate" />
+          <link href="https://www.workout.cool/en" hrefLang="en" rel="alternate" />
+
+          {/* TODO: maybe add some ads ? */}
           <noscript>
           <noscript>
             <Image
             <Image
               alt="Facebook Pixel"
               alt="Facebook Pixel"