Hardening responsiveness and SEO

hdyc-svelte/src/routes/[slug]/+page.svelte

@@ -4,35 +4,95 @@
   import { browser } from '$app/environment';
   import { onMount } from 'svelte';
   import type { PageData } from './$types';
+  import { buildSeoMeta, canonicalUrl, SITE_NAME, SITE_URL, toJsonLd } from '$lib/seo';
 
   export let data: PageData;
 
   $: calc = data.calculator;
   $: related = data.related;
+  $: pageTitle = `${calc.name} — ${SITE_NAME}`;
+  $: pageDescription = `Convert ${calc.labels.in1} to ${calc.labels.in2} instantly with our free online calculator. Accurate bidirectional conversion with the exact formula shown.`;
+  $: seo = buildSeoMeta({
+    title: pageTitle,
+    description: pageDescription,
+    pathname: `/${calc.slug}`,
+  });
+  $: breadcrumbJsonLd = toJsonLd({
+    '@context': 'https://schema.org',
+    '@type': 'BreadcrumbList',
+    itemListElement: [
+      {
+        '@type': 'ListItem',
+        position: 1,
+        name: 'Home',
+        item: SITE_URL,
+      },
+      {
+        '@type': 'ListItem',
+        position: 2,
+        name: data.categoryLabel,
+        item: canonicalUrl(`/category/${calc.category}`),
+      },
+      {
+        '@type': 'ListItem',
+        position: 3,
+        name: calc.name,
+        item: seo.canonical,
+      },
+    ],
+  });
+  $: webPageJsonLd = toJsonLd({
+    '@context': 'https://schema.org',
+    '@type': 'WebPage',
+    name: calc.name,
+    description: pageDescription,
+    url: seo.canonical,
+    isPartOf: {
+      '@type': 'WebSite',
+      name: SITE_NAME,
+      url: SITE_URL,
+    },
+  });
+
+  afterNavigate(() => {
+    if (!browser) return;
+    window.scrollTo({ top: 0 });
+  });
 
   onMount(() => {
     if (!browser) return;
     window.scrollTo({ top: 0 });
-    return afterNavigate(() => {
-      window.scrollTo({ top: 0 });
-    });
   });
 </script>
 
 <svelte:head>
-  <title>{calc.name} — HowDoYouConvert.com</title>
-  <meta name="description" content="Convert {calc.labels.in1} to {calc.labels.in2} instantly with our free online calculator. Accurate bidirectional conversion with the exact formula shown." />
+  <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">{breadcrumbJsonLd}</script>
+  <script type="application/ld+json">{webPageJsonLd}</script>
 </svelte:head>
 
-<nav class="breadcrumbs">
-  <a href="/">Home</a>
-  <span class="sep">›</span>
-  <a href="/category/{calc.category}">{data.categoryIcon} {data.categoryLabel}</a>
-  <span class="sep">›</span>
-  <span>{calc.name}</span>
+<nav class="breadcrumbs" aria-label="Breadcrumb">
+  <ol>
+    <li><a href="/">Home</a></li>
+    <li><a href="/category/{calc.category}">{data.categoryIcon} {data.categoryLabel}</a></li>
+    <li aria-current="page">{calc.name}</li>
+  </ol>
 </nav>
 
-<Calculator config={calc} />
+<h1 class="page-title calculator-page-title">{calc.name}</h1>
+
+<Calculator config={calc} showTitle={false} />
 
 <div class="seo-content">
   {#if calc.descriptionHTML}