Use articleMeta from @skyscribe-sdk/react-router-framework. It returns MetaDescriptor[] for React Router's meta export.

// app/routes/blog.$articleSlug.tsx
import { articleMeta } from '@skyscribe-sdk/react-router-framework';
import { fetchArticleBySlug, fetchSite } from '@skyscribe-sdk/core';
import type { Route } from './+types/Article';

export async function loader({ request, params }: Route.LoaderArgs) {
  const [{ article, uri: documentUri }, site] = await Promise.all([
    fetchArticleBySlug('alice.bsky.social', 'https://alice.bsky.social', params.articleSlug!, request.signal),
    fetchSite('alice.bsky.social', 'https://alice.bsky.social', request.signal),
  ]);
  return { article, documentUri, publicationUri: site.uri, site };
}

export function meta({ loaderData }: Route.MetaArgs) {
  if (!loaderData) return [{ title: 'My Blog' }];
  return [
    ...articleMeta(loaderData.article, loaderData.site),
    { title: `${loaderData.article.title} | My Blog` },
  ];
}

Use articleMetadata from @skyscribe-sdk/next. It returns a Next.js Metadata object for generateMetadata.

// app/blog/[groupSlug]/[articleSlug]/page.tsx
import { articleMetadata } from '@skyscribe-sdk/next';
import { fetchArticleBySlug, fetchSite } from '@skyscribe-sdk/core';

export async function generateMetadata({
  params,
}: {
  params: Promise<{ articleSlug: string }>;
}) {
  const { articleSlug } = await params;
  const [{ article }, site] = await Promise.all([
    fetchArticleBySlug('alice.bsky.social', 'https://alice.bsky.social', articleSlug),
    fetchSite('alice.bsky.social', 'https://alice.bsky.social'),
  ]);
  return {
    ...articleMetadata(article, site),
    title: `${article.title} — My Blog`,  // override title format if needed
  };
}

Metadata has no field for structured data. To add it, render generateArticleJsonLd(article, site) in a <script type="application/ld+json"> in the page itself. Import it from @skyscribe-sdk/core: @skyscribe-sdk/next doesn't re-export it.

The createScribeSite factory's generateArticleMetadata is simpler: it works from the Site record alone, without the canonical URL or Twitter Card. Use articleMetadata when you want the full set.

Use articleSeoMeta from @skyscribe-sdk/nuxt. It returns an object shaped for useSeoMeta().

<!-- pages/blog/[slug].vue -->
<script setup lang="ts">
import { articleSeoMeta, buildCanonicalUrl, generateArticleJsonLd } from '@skyscribe-sdk/nuxt';
import { fetchArticleBySlug, fetchSite } from '@skyscribe-sdk/core';

const route = useRoute();
const [{ article }, site] = await Promise.all([
  fetchArticleBySlug('alice.bsky.social', 'https://alice.bsky.social', route.params.slug as string),
  fetchSite('alice.bsky.social', 'https://alice.bsky.social'),
]);

useSeoMeta(articleSeoMeta(article, site));
useHead({
  title: `${article.title} — My Blog`,
  link: [{ rel: 'canonical', href: buildCanonicalUrl(article, site) }],
  script: [{ type: 'application/ld+json', innerHTML: JSON.stringify(generateArticleJsonLd(article, site)) }],
});
</script>

useSeoMeta has no field for a canonical link or structured data, so those go through useHead. buildCanonicalUrl and generateArticleJsonLd are re-exported from @skyscribe-sdk/nuxt.

Use generateArticleMeta from @skyscribe-sdk/core directly. It returns a ScribeMetaTag[] array:

import { generateArticleMeta } from '@skyscribe-sdk/core';

const tags = generateArticleMeta(article, site);
// [
//   { title: "My Post — My Blog" },
//   { property: "og:type", content: "article" },
//   { property: "og:title", content: "My Post" },
//   { name: "twitter:card", content: "summary_large_image" },
//   ...
// ]

Convert the output to whatever your framework's head management expects. Each element is one of:

• { title: string }: the <title> tag
• { tagName: "link"; rel: "canonical"; href: string }: the canonical link
• { property: string; content: string }: a <meta property="…"> tag
• { name: string; content: string }: a <meta name="…"> tag
• { "script:ld+json": object }: JSON-LD structured data for a <script type="application/ld+json">

import { siteMeta } from '@skyscribe-sdk/react-router-framework';

export function meta({ loaderData }: Route.MetaArgs) {
  if (!loaderData) return [{ title: 'My Blog' }];
  return [
    ...siteMeta(loaderData.site),
    { title: 'My Blog' },
  ];
}

import { siteSeoMeta } from '@skyscribe-sdk/nuxt';

useSeoMeta(siteSeoMeta(site));

import { generateSiteMeta } from '@skyscribe-sdk/core';

const tags = generateSiteMeta(site);