Hardening responsiveness and SEO

hdyc-svelte/src/routes/+page.svelte

@@ -2,6 +2,7 @@
   import { categories, calculators } from '$lib/data/calculators';
   import CategoryCard from '$lib/components/CategoryCard.svelte';
   import SearchBar from '$lib/components/SearchBar.svelte';
+  import { buildSeoMeta, SITE_NAME, SITE_URL, toJsonLd } from '$lib/seo';
 
   const requiredCategoryFallbacks: Record<string, { label: string; icon: string }> = {
     fluids: { label: 'Fluids', icon: '💧' },
@@ -19,18 +20,43 @@
   }));
   const totalCalculators = calculators.length;
   const totalCategories = Object.keys(homepageCategories).length;
+  const pageTitle = `${SITE_NAME} — Free Unit Conversion Calculators`;
+  const pageDescription = 'Convert between hundreds of units instantly. Free online calculators for length, weight, temperature, volume, area, speed, energy, power, data and more.';
+  const seo = buildSeoMeta({
+    title: pageTitle,
+    description: pageDescription,
+    pathname: '/',
+  });
+  const websiteJsonLd = toJsonLd({
+    '@context': 'https://schema.org',
+    '@type': 'WebSite',
+    name: SITE_NAME,
+    description: pageDescription,
+    url: SITE_URL,
+  });
 </script>
 
 <svelte:head>
-  <title>HowDoYouConvert.com — Free Unit Conversion Calculators</title>
-  <meta name="description" content="Convert between hundreds of units instantly. Free online calculators for length, weight, temperature, volume, area, speed, energy, power, data and more." />
+  <title>{pageTitle}</title>
+  <meta name="description" content={pageDescription} />
+  <meta name="robots" content={seo.robots} />
+  <link rel="canonical" href={seo.canonical} />
+  <meta property="og:type" content={seo.og.type} />
+  <meta property="og:title" content={seo.og.title} />
+  <meta property="og:description" content={seo.og.description} />
+  <meta property="og:url" content={seo.og.url} />
+  <meta property="og:site_name" content={seo.og.siteName} />
+  <meta name="twitter:card" content={seo.twitter.card} />
+  <meta name="twitter:title" content={seo.twitter.title} />
+  <meta name="twitter:description" content={seo.twitter.description} />
+  <script type="application/ld+json">{websiteJsonLd}</script>
 </svelte:head>
 
 <section class="hero">
   <h1>How Do You Convert?</h1>
   <p>Fast, bidirectional unit conversions with no ads.</p>
   <div class="search-center">
-    <SearchBar />
+    <SearchBar idPrefix="home-search" />
   </div>
 </section>