CSS Styling

How it works

When OpenGraph+ renders your page as a social card, it adds a data-ogplus attribute to the root <html> element:

<!-- Generic render -->
<html data-ogplus>

<!-- Platform-specific render -->
<html data-ogplus="twitter">
<html data-ogplus="linkedin">

This attribute only exists during screenshot capture—your regular visitors never see it. Use CSS selectors to target this attribute and style your page differently for social cards.

Plain CSS

With CSS nesting, you can group all your social card styles in one block:

html[data-ogplus] {
  nav { display: none; }
  footer { display: none; }
  .cookie-banner { display: none; }

  .hero {
    padding: 60px;
    font-size: 1.5rem;
  }
}

Target specific platforms:

html[data-ogplus="twitter"] {
  .hero { background: #1da1f2; }
}

html[data-ogplus="linkedin"] {
  .hero { padding: 80px; }
}

Show elements only in social cards

Hide content from regular visitors, reveal it in screenshots:

.social-only {
  display: none;
}

html[data-ogplus] .social-only {
  display: block;
}

Without nesting

If you’re not using CSS nesting, prefix each rule with the attribute selector:

html[data-ogplus] nav { display: none; }
html[data-ogplus] footer { display: none; }
html[data-ogplus] .hero { padding: 60px; }
html[data-ogplus="twitter"] .hero { background: #1da1f2; }

Tailwind CSS

Install the OpenGraph+ Tailwind plugin for ogplus: variants:

npm install @opengraphplus/tailwind

Tailwind 4

@import "tailwindcss";
@plugin "@opengraphplus/tailwind";

Tailwind 3

// tailwind.config.js
module.exports = {
  plugins: [require('@opengraphplus/tailwind')],
}

Usage

<!-- Hide in social cards -->
<nav class="ogplus:hidden">...</nav>

<!-- Show only in social cards -->
<div class="hidden ogplus:block ogplus:p-8">
  Social card content
</div>

<!-- Consumer-specific -->
<div class="ogplus:p-8 ogplus-linkedin:p-12 ogplus-twitter:bg-sky-500">
  Platform-optimized content
</div>

Available variants

Variant	Matches
`ogplus:`	All OpenGraph+ renders
`ogplus-linkedin:`	LinkedIn
`ogplus-twitter:`	Twitter/X
`ogplus-facebook:`	Facebook
`ogplus-discord:`	Discord
`ogplus-whatsapp:`	WhatsApp
`ogplus-apple:`	Apple Messages
`ogplus-bluesky:`	Bluesky