Astro and SvelteKit SEO settings

import { resolveSeoForPath, toSeoHead } from 'fimo/seo';
import config from '../../.fimo/config.json';

const resolved = resolveSeoForPath(pathname, config, { article });
const seo = { ...resolved, title: String(article.title) };
const head = toSeoHead(seo, { canonicalUrl });

• Both functions are pure and bundle-safe. Import paths for config depend on the application's actual file tree.

{
  title: 'An article',
  meta: [
    { property: 'og:type', content: 'website' },
    { property: 'og:title', content: 'An article' },
    { name: 'twitter:card', content: 'summary_large_image' },
    { name: 'twitter:title', content: 'An article' },
  ],
  links: []
}

• No canonical is inferred from seo.url. JSON-LD, alternate languages, article metadata and custom card types remain in the app's head code. The converter is optional if that code already handles Fimo's values.

const seo = resolveSeoForPath(Astro.url.pathname, config, { project });
---
<Base lang={locale} seo={seo} title={seo?.title ?? String(project.title)}>
  <!-- Existing page content -->
</Base>

const head = toSeoHead({
  ...seo,
  ...(title !== undefined ? { title } : {}),
  ...(description !== undefined ? { description } : {}),
}, { canonicalUrl });
---
<title>{head.title ?? 'Fimo + Astro'}</title>
{head.meta.map((attributes) => <meta {...attributes} />)}
{head.links.map((attributes) => <link {...attributes} />)}

• Base resolves a default when no seo prop is supplied. A supplied final object is not merged again with global settings. Its canonicalUrl prop also accepts null to suppress a canonical explicitly.

<title>Native Astro project</title>
<meta name="description" content="Localized project summary">
<meta property="og:title" content="Native Astro project">
<meta property="og:description" content="Localized project summary">
<meta name="twitter:title" content="Native Astro project">

• These values come from the generated content fixture, not hardcoded metadata in the page layout.

const article = await loadArticle(event.params.slug);
const resolved = resolveSeoForPath(event.url.pathname, config, { article });
const seo = { ...resolved, title: String(article.title) };

return {
  article: serializeArticle(article),
  seoHead: toSeoHead(seo, { canonicalUrl: canonicalFor(article) }),
};

• loadArticle, serializeArticle and canonicalFor stand for existing application code. Use the generated content module's serializer for tracked content at the Svelte load boundary. Do not create extra loaders solely to copy this example.

import { page } from '$app/state';
const head = $derived(page.data.seoHead ?? { meta: [], links: [] });

<svelte:head>
  <title>{head.title ?? 'Fimo + SvelteKit'}</title>
  {#each head.meta as attributes}<meta {...attributes} />{/each}
  {#each head.links as attributes}<link {...attributes} />{/each}
</svelte:head>

• Imports and the derived value belong inside the existing script block. Keep the provider and children rendering. Do not add a competing page head for the same tags.

const seo = {
  ...resolved,
  robots: 'noindex',
  image: undefined,
  favicon: '',
};
const head = toSeoHead(seo, {
  canonicalUrl: 'https://sveltekit.example/stories/article/',
});

• An explicit undefined removes a field. Use a conditional spread when an absent optional override should retain the default. The canonical is passed through unchanged, including its path and trailing slash.

const head = toSeoHead(seo, { canonicalUrl });
const meta = head.meta.filter(
  tag => !('property' in tag && tag.property === 'og:type')
);
meta.push({ property: 'og:type', content: 'article' });

// Render meta once, with the app's existing JSON-LD and alternate links.

• Replace a matching tag instead of emitting duplicates. The converter's built-in website/card defaults are convenience, not a universal SEO policy.

Astro/SvelteKit SEO or a new content route → the framework reference,
then references/frameworks/seo-head.md