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 covers each one in detail. This page shows how to wire them into a Nuxt app.
Meta tags
Add these to your layout alongside your og:image tag. They’re all optional.
<!-- app.vue or layouts/default.vue -->
<script setup>
useHead({
meta: [
// Render at 800px wide instead of the default
{ property: 'og:plus:viewport:width', content: '800' },
// Only capture this element instead of the full page
{ property: 'og:plus:selector', content: '.post-header' },
// Inject inline styles on the captured element
{ property: 'og:plus:style', content: 'padding: 60px; background: #0f172a; color: white;' },
]
})
</script>
See the Rendering guide for what each meta tag does and how they interact.
CSS styling
OpenGraph+ adds a data-ogplus attribute to your <html> 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.
/* assets/css/main.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 for plain CSS examples and Tailwind setup.
Templates
For fully custom social card layouts that pull content from your page, use <template> elements. These let you build a completely different layout for screenshots without touching your visible page.
<!-- layouts/default.vue -->
<template>
<div>
<slot />
<component :is="'template'" id="ogplus">
<div style="padding: 48px; background: #0f172a; color: white; height: 100%;">
<h1 style="font-size: 48px;">
${document.querySelector('h1')?.textContent}
</h1>
</div>
</component>
</div>
</template>
See the Templates guide for expression syntax, platform-specific templates, and full examples.
Testing locally
The Preview Bookmarklet sets the data-ogplus attribute in your browser so you can see how your CSS and Tailwind variants look without deploying or waiting for a real crawler to hit your page.
Full example
A blog post page with all the pieces together:
<!-- pages/posts/[slug].vue -->
<script setup>
const { data: post } = await useFetch(`/api/posts/${useRoute().params.slug}`)
useSeoMeta({
ogTitle: post.value.title,
ogDescription: post.value.excerpt,
ogType: 'article',
ogImage: `https://$OGPLUS_KEY.ogplus.net/posts/${useRoute().params.slug}`,
twitterCard: 'summary_large_image',
})
useHead({
meta: [
{ property: 'og:plus:selector', content: '.post-header' },
{ property: 'og:plus:style', content: 'padding: 60px; background-color: #0f172a; color: white;' },
{ property: 'og:plus:viewport:width', content: '800' },
]
})
</script>