Skip to content

Layout missing og:image

What this means

The check found an Astro layout file in src/layouts/ with no <meta property="og:image"> tag. Pages using this layout will produce social share cards with no image on LinkedIn, Slack, Discord, Twitter/X, and iMessage.

How to fix it

Add an ogImage prop to the layout and render it as an absolute HTTPS URL in og:image. Use Astro.site to resolve relative image paths to absolute URLs. This requires site to be set in astro.config.mjs.

import { defineConfig } from 'astro/config'

export default defineConfig({
  site: 'https://example.com',
})

---
interface Props {
  title: string
  description: string
  ogImage?: string
}
const { title, description, ogImage = '/og.png' } = Astro.props
const ogImageUrl = new URL(ogImage, Astro.site).toString()
---
<!doctype html>
<html lang="en-GB">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>{title}</title>
    <meta name="description" content={description} />
    <meta property="og:title" content={title} />
    <meta property="og:description" content={description} />
    <meta property="og:image" content={ogImageUrl} />
    <meta property="og:image:width" content="1200" />
    <meta property="og:image:height" content="630" />
    <meta property="og:url" content={Astro.url.href} />
  </head>
  <body>
    <slot />
  </body>
</html>

The default ogImage = '/og.png' means all pages get the global OG image unless they pass their own. Pages with a specific image can override it:

---
import Layout from '../layouts/Layout.astro'
---
<Layout
  title="Riverside Project | Acme"
  description="A riverside residential project in Richmond, combining contemporary materials with Victorian proportions."
  ogImage="/images/og-riverside.png"
>
  <article>...</article>
</Layout>

Verify the fix

curl -s https://example.com | grep -i 'og:image'

Confirm the content attribute starts with https://. Re-run the audit:

npx orino audit .