SEO optimizations

app/beach/BeachClientPage.tsx

@@ -61,7 +61,7 @@ export default function BeachClientPage({ config, turnstileSiteKey }: { config:
                         <Image
                             className="w-full max-w-62.5 md:max-w-75 relative drop-shadow-2xl transform hover:scale-105 transition-transform duration-500"
                             src={matsommar}
-                            alt="Mat- & Sommarfesten"
+                            alt="Mat- och Sommarfesten Höganäs Logo"
                         />
                     </div>
 
@@ -123,7 +123,7 @@ export default function BeachClientPage({ config, turnstileSiteKey }: { config:
                                     <p className="font-bold">{timeInfo.dateStr}</p>
                                     <p>{timeInfo.matchStr}</p>
                                     <p className="text-sm italic pt-3 border-t border-blue-100 mt-2">
-                                        Samtidigt som <a target="_blank" rel="noreferrer" className="text-[#39979f] hover:underline" href={config.beachPage.festivalLink}>Höganäs Mat- & Sommarfest</a>
+                                        Samtidigt som <a target="_blank" rel="noopener noreferrer" className="text-[#39979f] hover:underline" href={config.beachPage.festivalLink}>Höganäs Mat- & Sommarfest</a>
                                     </p>
                                 </div>
                             </div>

app/beach/page.tsx

@@ -1,17 +1,88 @@
 // app/beach/page.tsx
+import { Metadata } from 'next';
 import { getConfig } from '../lib/config';
 import BeachClientPage from './BeachClientPage';
 
 export const dynamic = 'force-dynamic';
 
-export const metadata = {
-    title: 'Beachturnering',
+export async function generateMetadata(): Promise<Metadata> {
+    const config = await getConfig();
+    const matchDate = new Date(config.beachPage.matchStart);
+    const year = matchDate.getFullYear();
+    const dateFormatted = matchDate.toLocaleDateString('sv-SE', { day: 'numeric', month: 'long' });
+
+    const isClosed = config.beachPage.isClosedOverride;
+    const title = isClosed
+        ? `Höganäs Beach Open ${year} (Fulltecknat)`
+        : `Anmälan: Höganäs Beach Open ${year} - ${dateFormatted}`;
+
+    const description = isClosed
+        ? `Turneringen den ${dateFormatted} är nu fullbokad. Välkommen ner till Kvickbadet för att titta på beachvolleyboll i toppklass!`
+        : `Välkommen till Höganäs Beach Open den ${dateFormatted}! Turneringsinfo, regler och anmälan för beachvolleyboll vid Kvickbadet.`;
+
+    return {
+        title: title,
+        description: description,
+        openGraph: {
+            title: title,
+            description: description,
+            url: 'https://lerbergetsvolleyboll.se/beach',
+            siteName: 'Lerbergets Volleybollsällskap',
+            locale: 'sv_SE',
+            type: 'website',
+            images: [
+                {
+                    url: '/images/beach-tournament.webp',
+                    width: 1200,
+                    height: 630,
+                    alt: `Höganäs Beach Open ${year}`,
+                },
+            ],
+        },
+        twitter: {
+            card: 'summary_large_image',
+            title: title,
+            description: description,
+            images: ['/images/beach-tournament.webp'],
+        },
     };
+}
 
 export default async function BeachPage() {
     const config = await getConfig();
-    
     const turnstileSiteKey = process.env.TURNSTILE_SITE_KEY || '';
 
-    return <BeachClientPage config={config} turnstileSiteKey={turnstileSiteKey} />;
+    const jsonLd = {
+        '@context': 'https://schema.org',
+        '@type': 'Event',
+        'name': 'Höganäs Beach Open',
+        'startDate': config.beachPage.matchStart,
+        'location': {
+            '@type': 'Place',
+            'name': 'Kvickbadet',
+            'address': {
+                '@type': 'PostalAddress',
+                'addressLocality': 'Höganäs',
+                'addressCountry': 'SE',
+            },
+        },
+        'eventStatus': config.beachPage.isClosedOverride
+            ? 'https://schema.org/EventScheduled'
+            : 'https://schema.org/EventScheduled',
+        'organizer': {
+            '@type': 'Organization',
+            'name': 'Lerbergets Volleybollsällskap',
+            'url': 'https://lerbergetsvolleyboll.se'
+        }
+    };
+
+    return (
+        <>
+            <script
+                type="application/ld+json"
+                dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
+            />
+            <BeachClientPage config={config} turnstileSiteKey={turnstileSiteKey} />
+        </>
+    );
 }

app/components/HomeClientContent.tsx

@@ -25,12 +25,15 @@ export default function HomeClientContent() {
                 <div className="flex flex-col md:flex-row max-w-300 my-12.5 mx-5 w-full">
                     <div className="flex flex-col justify-center flex-1">
                         <div className="w-fit">
-                            <h1 className="uppercase text-[2.5rem] font-bold leading-[1.1] mb-2.5">LVS</h1>
-                            <div className="bg-white w-full h-1.5"></div>
+                            {/* Combine the abbreviation and full name for the H1 */}
+                            <h1 className="uppercase text-[2.5rem] font-bold leading-[1.1] mb-2.5">
+                                LVS <span className="sr-only">Lerbergets Volleybollsällskap</span>
+                            </h1>
+                            <div className="bg-white w-full h-1.5" aria-hidden="true"></div>
                         </div>
-                        <h4 className="italic text-xl my-2.5 font-bold">Lerbergets Volleybollsällskap</h4>
+                        <h2 className="italic text-xl my-2.5 font-bold">Lerbergets Volleybollsällskap</h2>
                         <p className="max-w-200 leading-[1.1]">
-                            Klubben startade den 1 mars 2018 och har i snabb takt utvecklats med både kidsvolley, 4-mannavolley och ett gott gäng killar och tjejer som tränar tillsammans minst två gånger i veckan och på sommaren spelas det beachvolley
+                            Klubben startade den 1 mars 2018 och har i snabb takt utvecklats med både <strong>kidsvolley</strong>, <strong>4-mannavolley</strong> och träning för alla nivåer. På sommaren flyttar vi ner till stranden för <strong>beachvolleyboll</strong> i Höganäs.
                         </p>
                         <div className="flex flex-col gap-2.5 mt-10">
                             <HeroButton onClick={() => setActiveModal('member')}>Bli Medlem</HeroButton>
@@ -67,15 +70,15 @@ export default function HomeClientContent() {
 
                     {/* Sociala Medier Ikoner */}
                     <div className="flex flex-wrap justify-center items-center gap-10">
-                        <SocialIcon title="Instagram" href="https://www.instagram.com/lerbergets_volleyboll/">
+                        <SocialIcon title="Instagram" href="https://www.instagram.com/lerbergets_volleyboll/" aria-label="Följ LVS på Instagram">
                             <FaInstagram className="h-20 w-20" />
                         </SocialIcon>
 
-                        <SocialIcon title="Facebook" href="https://www.facebook.com/lerbergetsvolleyboll">
+                        <SocialIcon title="Facebook" href="https://www.facebook.com/lerbergetsvolleyboll" aria-label="Följ LVS på Facebook">
                             <FaFacebookSquare className="h-20 w-20" />
                         </SocialIcon>
 
-                        <SocialIcon title="Laget.se" href="https://www.laget.se/LVS">
+                        <SocialIcon title="Laget.se" href="https://www.laget.se/LVS" aria-label="Kolla träningstider på Laget.se">
                             <Image src={laget} alt="Laget.se" className="h-18 w-18" />
                         </SocialIcon>
                     </div>

app/layout.tsx

@@ -10,11 +10,12 @@ const montserrat = Montserrat({
 });
 
 export const metadata: Metadata = {
+  metadataBase: new URL('https://lerbergetsvolleyboll.se'),
   title: {
     template: '%s | LVS',
-    default: 'Lerbergets Volleybollsällskap',
+    default: 'LVS - Lerbergets Volleybollsällskap',
   },
-  description: 'Klubben startade den 1 mars 2018 och har i snabb takt utvecklats...',
+  description: 'Volleybollklubben i Höganäs för barn, ungdomar och vuxna.',
   icons: {
     icon: '/images/favicon.svg',
     shortcut: '/favicon.svg',

app/page.tsx

@@ -1,21 +1,66 @@
 // app/page.tsx
+import { Metadata } from 'next';
 import BeachPromo from './components/BeachPromo';
 import Footer from './components/Footer';
 import Header from './components/Header';
 import HomeClientContent from './components/HomeClientContent';
 import { getConfig } from './lib/config';
 
+export async function generateMetadata(): Promise<Metadata> {
+  const config = await getConfig();
+
+  const beachSuffix = config.showBeachPromo ? ' Just nu: Anmälan öppen till Höganäs Beach Open!' : '';
+
+  return {
+    title: 'LVS – Volleyboll för alla i Höganäs',
+    description: `Välkommen till Lerbergets Volleybollsällskap. Vi erbjuder kidsvolley och inomhusvolleyboll för alla åldrar i Höganäs.${beachSuffix}`,
+    openGraph: {
+      title: 'LVS | Lerbergets Volleybollsällskap',
+      description: 'Häng med och spela volleyboll med oss i Höganäs!',
+      url: 'https://lerbergetsvolleyboll.se',
+      siteName: 'Lerbergets Volleybollsällskap',
+      locale: 'sv_SE',
+      type: 'website',
+    },
+  };
+}
+
 export default async function Home() {
   const config = await getConfig();
 
+  const jsonLd = {
+    '@context': 'https://schema.org',
+    '@type': 'SportsOrganization',
+    'name': 'Lerbergets Volleybollsällskap',
+    'alternateName': 'LVS',
+    'url': 'https://lerbergetsvolleyboll.se',
+    'logo': 'https://lerbergetsvolleyboll.se/images/favicon.svg',
+    'address': {
+      '@type': 'PostalAddress',
+      'streetAddress': 'Friluftsvägen 14',
+      'addressLocality': 'Höganäs',
+      'postalCode': '263 54',
+      'addressCountry': 'SE',
+    },
+    'sameAs': [
+      'https://www.instagram.com/lerbergets_volleyboll/',
+      'https://www.facebook.com/lerbergetsvolleyboll',
+      'https://www.laget.se/LVS'
+    ]
+  };
+
   return (
+    <>
+      <script
+        type="application/ld+json"
+        dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
+      />
       <main>
         <Header />
-      {config.showBeachPromo && (
-        <BeachPromo />
-      )}
+        {config.showBeachPromo && <BeachPromo />}
         <HomeClientContent />
         <Footer />
       </main>
+    </>
   );
 }