Getting Started

Create a connection

Sign in to OpenGraph+
Go to your website’s Meta Tags page
On your first visit you’ll see the Terms of Service; click Agree & Create Connection, then copy your connection URL

Your connection URL looks like https://$OGPLUS_KEY.ogplus.net.

Find your layout

Open src/layouts/Layout.astro. Astro pages use layouts via the layout frontmatter property or by wrapping content in a layout component. This is where you’ll add Open Graph meta tags so every page inherits them.

Add Open Graph meta tags

Add the full set of Open Graph tags to your layout’s <head>. Use props to pull in dynamic values from each page:

---
// src/layouts/Layout.astro
const { title, description } = Astro.props
const siteUrl = 'https://mysite.com'
---
<html>
  <head>
    <meta property="og:title" content={title || 'My Site'} />
    <meta property="og:description" content={description || 'Welcome to my site'} />
    <meta property="og:url" content={`${siteUrl}${Astro.url.pathname}`} />
    <meta property="og:site_name" content="My Site" />
    <meta property="og:type" content="website" />
    <meta property="og:image" content={`https://$OGPLUS_KEY.ogplus.net${Astro.url.pathname}`} />
    <meta name="twitter:card" content="summary_large_image" />
  </head>
  <body>
    <slot />
  </body>
</html>

Replace https://$OGPLUS_KEY.ogplus.net with the connection URL you copied.

Tag reference

Tag	Value	Source
`og:title`	Page title	`title` prop from each page
`og:description`	Page description	`description` prop from each page
`og:url`	Canonical URL	`siteUrl` + `Astro.url.pathname`
`og:site_name`	Site name	Hardcoded in layout
`og:type`	Content type	`website` (override per page if needed)
`og:image`	Social card image	OpenGraph+ connection URL + page path
`twitter:card`	Card format	`summary_large_image` for large previews

Dynamic tags from pages

Astro pages pass props to layouts. Here’s a dynamic blog post page:

---
// src/pages/posts/[slug].astro
import Layout from '../../layouts/Layout.astro'
import { getPost } from '../../lib/posts'

const { slug } = Astro.params
const post = await getPost(slug)
---
<Layout title={post.title} description={post.excerpt}>
  <h1>{post.title}</h1>
  <p>{post.body}</p>
</Layout>

For content collections:

---
// src/pages/blog/[...slug].astro
import Layout from '../../layouts/Layout.astro'
import { getCollection } from 'astro:content'

const { slug } = Astro.params
const post = (await getCollection('blog')).find(p => p.slug === slug)
---
<Layout title={post.data.title} description={post.data.description}>
  <!-- content -->
</Layout>

Static and SSR

This works with both Astro’s default static output and SSR mode. In static mode, the meta tags are baked into every page at build time. In SSR mode, they’re generated per-request.

Verify

Deploy your site and open the preview tool. Paste a URL from your site to confirm the meta tags and social card image render correctly.

Multiple domains

Running staging and production, subdomains, or several sites under one account? See Multiple domains & environments. For a single site, the connection tag above is all you need.