Make it possible to choose a hero (og:image) in starlight without changing the layout #1300
Closed
tmcw
started this conversation in
Feature Requests
Replies: 1 comment
-
|
Thanks for your feedback.
This is not the case. Starlight nevers defines an To define an
For example, using a route data middleware, you could do something like this: // src/routeData.ts
import { defineRouteMiddleware } from '@astrojs/starlight/route-data'
export const onRequest = defineRouteMiddleware((context) => {
// Get the URL of the generated image for the current page using its ID and
// append the `.png` file extension.
const ogImageUrl = new URL(
`/og/${context.locals.starlightRoute.id || 'index'}.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 },
})
})With this approach, you could either generate such images or have them all in your |
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Uh oh!
There was an error while loading. Please reload this page.
-
What version of
starlightare you using?0.15.1
What is your idea?
I'd like to have
og:imagemetadata on all pages that can have it, for infernal SEO reasons. Docs often don't have a good, splashy image, or benefit from having a splash layout. However, theherofrontmatter option controls both og:image and the layout.It would be nice for there to be something like
Why is this feature necessary?
For terrible SEO reasons,
Do you have examples of this feature in other projects?
No response
Participation
Beta Was this translation helpful? Give feedback.
All reactions