Guides › Frameworks & CMS

How to add Open Graph tags in Astro

Set site in astro.config.mjs, then build absolute URLs in your layout's <head>:

---
const { title, description, image = '/og/default.png' } = Astro.props
const canonical = new URL(Astro.url.pathname, Astro.site)
const ogImage = new URL(image, Astro.site)
---
<meta property="og:title" content={title} />
<meta property="og:description" content={description} />
<meta property="og:image" content={ogImage} />
<meta property="og:url" content={canonical} />
<meta name="twitter:card" content="summary_large_image" />

Pass title and description from each page or from content-collection frontmatter. Since Astro renders HTML on the server by default, crawlers see the tags.

Verify

Deploy, then run the live URL through the OG previewer. It fetches the page like a social crawler (no JavaScript), so tags added only on the client side won't show up. That matches what Facebook, LinkedIn and X see.

Related