OpenGraph+
Get Started
Chapter 3

Usage

Style social cards with ogplus: variants

Prefix any Tailwind utility with ogplus: to apply it only during social card screenshots.

Hide elements

Remove navigation, footers, and other clutter from your social cards.

<nav class="ogplus:hidden">Hidden in screenshots</nav>
<footer class="ogplus:hidden">Hidden in screenshots</footer>
<div class="cookie-banner ogplus:hidden">Hidden in screenshots</div>

Show elements only in screenshots

Combine hidden with ogplus:block to create screenshot-only content—like a custom hero designed specifically for social sharing.

<div class="hidden ogplus:block ogplus:p-12 ogplus:bg-slate-900 ogplus:text-white">
  This only appears in social card screenshots.
</div>

Adjust styling

Apply any utility—padding, typography, colors—specifically for social cards.

<article class="prose ogplus:prose-2xl ogplus:max-w-none">
  Content with larger text in screenshots
</article>

<h1 class="text-2xl ogplus:text-5xl ogplus:font-bold">
  Bigger headline in social cards
</h1>

<div class="p-4 ogplus:p-12 ogplus:bg-gradient-to-r ogplus:from-blue-500 ogplus:to-purple-600">
  More padding and a gradient in screenshots
</div>

Platform-specific styling

Target individual platforms with ogplus-{platform}: variants.

<div class="ogplus:p-8 ogplus-linkedin:p-12 ogplus-twitter:bg-sky-500">
  Different styles per platform
</div>

<div class="ogplus-twitter:hidden">
  Hidden only on Twitter
</div>

<div class="hidden ogplus-linkedin:block">
  Shows only on LinkedIn
</div>

Available platform variants:

  • ogplus-twitter: — Twitter/X
  • ogplus-linkedin: — LinkedIn
  • ogplus-facebook: — Facebook
  • ogplus-discord: — Discord
  • ogplus-whatsapp: — WhatsApp
  • ogplus-apple: — Apple Messages
  • ogplus-bluesky: — Bluesky