How do I set an og image in a Starlight docs site

[remote goblet]

I have an image I want to use whenever a link is shared on Twitter or other social sites.

[bold grail]

No-one around right now?

It looks like no-one has responded to your question yet. People might not be available right now or don’t know how to answer your question. Want an answer while you wait? Try asking our experimental bot in #1095492539085230272.

[pure beacon]

Hey @remote goblet! You can specify the image in the head config in astro.config.mjs:

import { defineConfig } from 'astro/config';
import starlight from '@astrojs/starlight';

export default defineConfig({
  integrations: [
    starlight({
      title: 'Site with og image',
      head: [
        {
          tag: 'meta',
          attrs: {
            property: 'og:image',
            content: 'https://example.com/og.jpg'
          },
        },
      ],
    }),
  ],
});

You can put your image in the public/ directory so it’s available for your site.

And here’s a real-life example of what we do in the Starlight docs site.