Harden calculator SEO signals

hdyc-svelte/src/lib/seo.ts

@@ -84,6 +84,7 @@ export const calculatorSeo = (calc: CalculatorDef) => {
     title,
     description,
     canonicalUrl: canonical,
+    canonicalSlug,
     noindex,
   };
 };

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

@@ -1,7 +1,7 @@
-import { error } from '@sveltejs/kit';
+import { error, redirect } from '@sveltejs/kit';
 import type { PageServerLoad } from './$types';
 import { getCalculatorBySlug, getCalculatorsByCategory, categories, getEffectiveCategory } from '$lib/data/calculators';
-import { calculatorJsonLd, calculatorSeo } from '$lib/seo';
+import { calculatorJsonLd, calculatorSeo, toJsonLd } from '$lib/seo';
 
 export const load: PageServerLoad = ({ params, setHeaders }) => {
   const calc = getCalculatorBySlug(params.slug);
@@ -13,13 +13,17 @@ export const load: PageServerLoad = ({ params, setHeaders }) => {
   }
 
   const effectiveCategory = getEffectiveCategory(calc);
+  const seo = calculatorSeo(calc);
+
+  if (seo.canonicalSlug !== calc.slug) {
+    throw redirect(301, `/${seo.canonicalSlug}`);
+  }
 
   const related = getCalculatorsByCategory(effectiveCategory)
     .filter(c => c.slug !== calc.slug)
     .slice(0, 8);
 
   const categoryMeta = categories[effectiveCategory];
-  const seo = calculatorSeo(calc);
   if (seo.noindex) {
     setHeaders({
       'X-Robots-Tag': 'noindex, follow'
@@ -30,7 +34,7 @@ export const load: PageServerLoad = ({ params, setHeaders }) => {
     calculator: calc,
     related,
     seo,
-    jsonLd: JSON.stringify(calculatorJsonLd(calc, seo.canonicalUrl)),
+    jsonLd: toJsonLd(calculatorJsonLd(calc, seo.canonicalUrl)),
     category: effectiveCategory,
     categoryLabel: categoryMeta?.label ?? calc.category,
     categoryIcon: categoryMeta?.icon ?? '🔢'

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

@@ -68,6 +68,7 @@
   <meta name="twitter:card" content={seo.twitter.card} />
   <meta name="twitter:title" content={seo.twitter.title} />
   <meta name="twitter:description" content={seo.twitter.description} />
+  {@html `<script type="application/ld+json">${data.jsonLd}</script>`}
   {@html `<script type="application/ld+json">${breadcrumbJsonLd}</script>`}
   {@html `<script type="application/ld+json">${webPageJsonLd}</script>`}
 </svelte:head>