feat: issue latina-in-tech#29 (improve site seo)

salvatorericcardi · May 1, 2024 · 3a2f891 · 3a2f891
1 parent cccdfbd
commit 3a2f891
Show file tree

Hide file tree

Showing 2 changed files with 80 additions and 11 deletions.
diff --git a/src/components/CommunityEditionHead.tsx b/src/components/CommunityEditionHead.tsx
@@ -0,0 +1,71 @@
+import { Locale } from "i18n.config";
+import Head from "next/head";
+import { ReactNode } from "react";
+
+type Props = {
+    children?: ReactNode;
+    metadata: {
+        title: string;
+        description: string;
+        keywords: string[];
+        opengraph?: {
+            title: string;
+            description: string;
+            locale: Locale & {
+                alternate: Locale;
+            };
+            image: string & {
+                width: string;
+                height: string;
+                alt: string;
+            };
+        };
+        twitter?: {
+            type: string;
+            title: string;
+            description: string;
+            image: string & {
+                width: string;
+                height: string;
+                alt: string;
+            }; 
+        };
+    };
+};
+
+export default function CommunityEditionHead({children, metadata}: Props) {
+    const opengraph = metadata.opengraph;
+    const twitter = metadata.twitter;
+
+    return (
+        <Head>
+            <title>{metadata.title}</title>
+            <meta name="description" content={metadata.description} />
+            <meta name="keywords" content={metadata.keywords.join(',')} />
+            {opengraph && 
+                <>
+                    <meta property="og:title" content={opengraph.title} />
+                    <meta property="og:description" content={opengraph.description} />
+                    <meta property="og:locale" content={opengraph.locale} />
+                    <meta property="og:image" content={opengraph.image} />
+                    <meta property="og:image:width" content={opengraph.image.width} />
+                    <meta property="og:image:height" content={opengraph.image.height} />
+                    <meta property="og:image:alt" content={opengraph.image.alt} />
+                    <meta property="og:locale:alternate" content={opengraph.locale.alternate} />
+                </>
+            }
+            {twitter && 
+                <>
+                    <meta name="twitter:card" content={twitter.type} />
+                    <meta name="twitter:title" content={twitter.title} />
+                    <meta name="twitter:description" content={twitter.description} />
+                    <meta name="twitter:image" content={twitter.image} />
+                    <meta name="twitter:image:width" content={twitter.image.width} />
+                    <meta name="twitter:image:height" content={twitter.image.height} />
+                    <meta name="twitter:image:alt" content={twitter.image.alt} />
+                </>
+            }
+            {children}
+        </ Head>
+    );
+}
diff --git a/src/pages/[lang]/index.tsx b/src/pages/[lang]/index.tsx
@@ -20,6 +20,7 @@ import { getAllLocales, setLocaleAttribute } from '@/utils/locale';
 import { useRouter } from 'next/router';
 import { Locale, i18n } from 'i18n.config';
 import { getDictionary } from '@/utils/dictionary';
+import CommunityEditionHead from '@/components/CommunityEditionHead';
 
 const MAX_PAST_EVENTS = 3;
 
@@ -51,21 +52,18 @@ const Home: React.FC<InferGetStaticPropsType<typeof getStaticProps>> = ({
   );
 
   const hasMorePastEvents = allPastEvents.length > pastEventsPreview.length;
+
+  const metadata = {
+    title: 'LiT - Latina In Tech',
+    description: 'Community che raccoglie gli sviluppatori della provincia di Latina',
+    keywords: ['Latina', 'User Group', 'Lazio', 'Roma', 'Sviluppatori Latina', 'Latina In Tech', 'LiT'],
+  }
 
   return (
     <>
-      <Head>
-        <title>LiT - Latina In Tech</title>
-        <meta
-          name='description'
-          content='Community che raccoglie gli sviluppatori della provincia di Latina'
-        />
-        <meta
-          name='keywords'
-          content='Latina, User Group, Lazio, Roma, Sviluppatori Latina, Latina In Tech, LiT'
-        ></meta>
+      <CommunityEditionHead metadata={metadata}>
         <link rel='icon' href='/favicon.ico' />
-      </Head>
+      </CommunityEditionHead>
       <Header lang={locale} />
       <main className='flex flex-col gap-6 px-4 pb-8'>
         <Hero />