Skip to content

Commit a8e5dab

Browse files
committed
Add custom Head component with dynamic OG images
Introduces a new Head.astro component to set dynamic OpenGraph and Twitter images based on the page title. Updates astro.config.mjs to register the new Head component and adds default meta tags for social sharing.
1 parent b901e89 commit a8e5dab

File tree

2 files changed

+29
-1
lines changed

2 files changed

+29
-1
lines changed

astro.config.mjs

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -79,8 +79,24 @@ export default defineConfig({
7979
],
8080
},
8181
],
82-
head: [], // Fonts are now self-hosted via fontsource
82+
head: [
83+
// OpenGraph / Social (og:image and twitter:image are set dynamically in Head.astro)
84+
{
85+
tag: 'meta',
86+
attrs: { property: 'og:type', content: 'website' },
87+
},
88+
{
89+
tag: 'meta',
90+
attrs: { property: 'og:site_name', content: 'Sprites Documentation' },
91+
},
92+
// Twitter Card
93+
{
94+
tag: 'meta',
95+
attrs: { name: 'twitter:card', content: 'summary_large_image' },
96+
},
97+
],
8398
components: {
99+
Head: './src/components/Head.astro',
84100
Header: './src/components/Header.astro',
85101
ThemeSelect: './src/components/ThemeSelect.astro',
86102
PageTitle: './src/components/PageTitle.astro',

src/components/Head.astro

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
---
2+
import Default from '@astrojs/starlight/components/Head.astro';
3+
4+
const pageTitle = Astro.locals.starlightRoute?.entry?.data?.title ?? 'Sprites Documentation';
5+
const ogImageUrl = `https://og-image.fly.dev/image?template=sprites&text=${encodeURIComponent(pageTitle)}`;
6+
---
7+
8+
<Default {...Astro.props}><slot /></Default>
9+
10+
<!-- Dynamic OG Image -->
11+
<meta property="og:image" content={ogImageUrl} />
12+
<meta name="twitter:image" content={ogImageUrl} />

0 commit comments

Comments
 (0)