feat: improve seo, trust signals, and performance

src/layouts/MainLayout.astro

@@ -14,33 +14,83 @@ interface Props {
   title: string;
   description?: string;
   activeNav?: string;
+  canonical?: string;
+  ogImage?: string;
+  robots?: string;
+  structuredData?: Record<string, unknown> | Array<Record<string, unknown>>;
 }
 
 const {
   title,
   description = 'MNQ Catering y Evento · Experiencias gastronómicas premium para bodas, eventos corporativos y celebraciones familiares.',
   activeNav,
+  canonical,
+  ogImage = '/images/foto-bodas.jpg',
+  robots = 'index,follow',
+  structuredData,
 } = Astro.props;
+
+const site = Astro.site ?? new URL('https://mnq.elkazurrotaberna.es');
+const canonicalUrl = new URL(canonical ?? Astro.url.pathname, site).toString();
+const ogImageUrl = new URL(ogImage, site).toString();
+const baseStructuredData = {
+  '@context': 'https://schema.org',
+  '@type': 'CateringService',
+  name: 'MNQ Catering y Evento',
+  url: site.origin,
+  description:
+    'Servicio de catering para bodas, eventos corporativos y reuniones familiares con enfoque premium.',
+  telephone: '+34 678 17 15 13',
+  serviceType: ['Bodas', 'Eventos corporativos', 'Reuniones familiares'],
+  contactPoint: {
+    '@type': 'ContactPoint',
+    contactType: 'customer service',
+    telephone: '+34 678 17 15 13',
+    availableLanguage: ['es'],
+  },
+};
+const structuredDataScripts = [
+  baseStructuredData,
+  ...((Array.isArray(structuredData)
+    ? structuredData
+    : structuredData
+      ? [structuredData]
+      : []) as Array<Record<string, unknown>>),
+];
 ---
 
 <!doctype html>
-<html lang="es-AR">
+<html lang="es-ES">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>{title}</title>
     <meta name="description" content={description} />
+    <meta name="robots" content={robots} />
+    <link rel="canonical" href={canonicalUrl} />
+    <meta property="og:title" content={title} />
+    <meta property="og:description" content={description} />
+    <meta property="og:type" content="website" />
+    <meta property="og:url" content={canonicalUrl} />
+    <meta property="og:image" content={ogImageUrl} />
+    <meta property="og:site_name" content="MNQ Catering y Evento" />
+    <meta property="og:locale" content="es_ES" />
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:title" content={title} />
+    <meta name="twitter:description" content={description} />
+    <meta name="twitter:image" content={ogImageUrl} />
     <link rel="icon" type="image/png" href="/images/logo-ojo-transparent.webp" />
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link
-      href="https://fonts.googleapis.com/css2?family=Noto+Serif:ital,wght@0,400;0,700;1,400&family=Inter:wght@400;500;600&display=swap"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap"
+      href="https://fonts.googleapis.com/css2?family=Noto+Serif:ital@0;1&family=Inter:wght@400;500;600&display=swap"
       rel="stylesheet"
     />
+    {
+      structuredDataScripts.map((schema) => (
+        <script is:inline type="application/ld+json" set:html={JSON.stringify(schema)} />
+      ))
+    }
   </head>
   <body class="page-ready">
 
@@ -83,7 +133,7 @@ const {
             const scrollTop = window.scrollY;
             const docHeight = document.documentElement.scrollHeight - window.innerHeight;
             const progress = docHeight > 0 ? (scrollTop / docHeight) * 100 : 0;
-            progressBar.style.width = `${progress}%`;
+            progressBar.style.transform = `scaleX(${progress / 100})`;
             progressBar.setAttribute('aria-valuenow', String(Math.round(progress)));
           };
           window.addEventListener('scroll', updateProgress, { passive: true });
@@ -96,6 +146,8 @@ const {
 
         // Fade OUT: intercept internal navigation links
         const handleNavClick = (e: MouseEvent) => {
+          if (e.defaultPrevented || e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return;
+
           const target = e.target as HTMLElement;
           const anchor = target.closest('a');
           if (!anchor) return;
@@ -114,6 +166,9 @@ const {
 
       } else {
         // Reduced motion: show immediately, no transitions
+        document.querySelectorAll('.reveal, .reveal-left, .reveal-scale, .gold-line, .section-eyebrow, .value-card-animate').forEach((el) => {
+          el.classList.add('visible');
+        });
         document.body.classList.add('page-ready');
       }
     </script>