# Chapter 1

## Getting Started

### Add Open Graph meta tags to your Astro site

## Create a connection

1. Sign in to [OpenGraph+](/content/site-root.html)
2. Go to your website’s **Meta Tags** page
3. Create a new connection and 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 in your OpenGraph+ dashboard. Paste a URL from your site to confirm the meta tags and social card image render correctly.