# Astro ## Getting Started ## Create a connection 1. Sign in to [OpenGraph+](/) 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 ``. Use props to pull in dynamic values from each page: ```html --- // src/layouts/Layout.astro const { title, description } = Astro.props const siteUrl = 'https://mysite.com' --- ``` 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: ```html --- // 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) ---

{post.title}

{post.body}

 ``` For content collections: ```html --- // 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) --- ``` ## 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. ## Customize OpenGraph+ captures your page in a headless browser and renders it as an image. You control what gets captured using meta tags in your layout and CSS in your stylesheets. All of the rendering options below are standard HTML meta tags and CSS, so they work the same regardless of framework. The [HTML, CSS, & HTTP guide](/docs/html-css) covers each one in detail. This page shows how to wire them into an Astro site. ## Meta tags Add these to your layout's `` alongside your `og:image` tag. They're all optional. ```html --- // src/layouts/Layout.astro --- ``` See the [Rendering](/docs/html-css/rendering) guide for what each meta tag does and how they interact. ## CSS styling OpenGraph+ adds a `data-ogplus` attribute to your `` element during capture. Use it in your stylesheets to hide navigation, adjust spacing, or restyle anything for the social card without affecting your actual site. ```css /* src/styles/global.css */ html[data-ogplus] { nav { display: none; } footer { display: none; } .hero { padding: 60px; } } ``` If you're using Tailwind, there's a plugin that gives you `ogplus:` variants like `ogplus:hidden` and `ogplus-twitter:bg-sky-500`. See [CSS Styling](/docs/html-css/data-attributes) for plain CSS examples and [Tailwind setup](/docs/html-css/data-attributes#tailwind-css). ## Templates For fully custom social card layouts that pull content from your page, use `