Adding per-page dynamic data to Starlight <head><meta> tags
#1106
-
What version of
|
Beta Was this translation helpful? Give feedback.
Replies: 2 comments 3 replies
-
|
For OG image specifically, overriding the The main issue with overriding ---
import type { Props } from '@astrojs/starlight/props';
import Default from '@astrojs/starlight/components/Head.astro';
---
<Default {...Astro.props}><slot /></Default>
<title>My custom title</title>You end up with two Because Starlight does not inject any That said, Open Graph image support is something we’d like to improve, so I realise this isn’t necessarily an ideal answer just yet. |
Beta Was this translation helpful? Give feedback.
-
|
love that! thanks for the amazing explainer. How can I override the custom Head in Frontmatter? say I overrite the Head component with content: and now in my markdown file frontmatter I want override head tags for the property fc:frame and fc:image In my testing the Markdown Frontmatter Head is just added to the page which means I need to manually write out the head tags in each frontmatter |
Beta Was this translation helpful? Give feedback.
-
Your // src/content/config.ts
import { defineCollection, z } from 'astro:content';
import { docsSchema } from '@astrojs/starlight/schema';
export const collections = {
docs: defineCollection({
schema: docsSchema({
extend: z.object({
// Add a new optional field to the schema.
fcFrame: z.string().optional(),
}),
}),
}),
};This means that you can now add or not a ---
import type { Props } from '@astrojs/starlight/props';
import Default from '@astrojs/starlight/components/Head.astro';
---
<Default {...Astro.props}><slot /></Default>
<!-- Either render the value specified in the frontmatter or a default one. -->
<meta property="fc:frame" content={Astro.props.entry.data?.fcFrame ?? "vNext"} />
// …The same could be done for the |
Beta Was this translation helpful? Give feedback.
-
|
lovely thank you 😍 much appreciated |
Beta Was this translation helpful? Give feedback.
-
|
Starting with Starlight 0.35.0, route data now include the Such data can be customized using a route data middleware. For example, to add some meta tags for Open Graph images, this would look like the following: // src/routeData.ts
import { defineRouteMiddleware } from "@astrojs/starlight/route-data";
export const onRequest = defineRouteMiddleware((context) => {
// Get the URL of the Open Graph image to use.
const ogImageUrl = new URL(`/og/my-og-image.png`, context.site);
// Get the array of all tags to include in the `<head>` of the current page.
const { head } = context.locals.starlightRoute;
// Add the `<meta/>` tags for the Open Graph images.
head.push({
tag: "meta",
attrs: { property: "og:image", content: ogImageUrl.href },
});
head.push({
tag: "meta",
attrs: { name: "twitter:image", content: ogImageUrl.href },
});
// Add the `fc:frame` meta tag.
head.push({
tag: "meta",
attrs: { property: "fc:frame", content: context.locals.starlightRoute.entry.data?.fcFrame ?? "vNext" },
});
});You can of course use any of the route data properties in your middleware e.g. to compute a dynamic Open Graph image URL based on the current page's ID for example or the |
Beta Was this translation helpful? Give feedback.
Starting with Starlight 0.35.0, route data now include the
headproperty which contains an array of all tags to include in the of the current page.Such data can be customized using a route data middleware. For example, to add some meta tags for Open Graph images, this would look like the following: