A simple stylesheet with utility classes for showing and hiding elements in social card screenshots. For custom styling, see Data Attributes.

Installation

Link directly to the hosted stylesheet. No npm, no build step.

<link rel="stylesheet" href="https://opengraphplus.com/stylesheet/v1.css">

Usage

Add classes to any element to control its visibility in social card screenshots.

Hide elements in social cards

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

<nav class="ogplus-hide">Navigation hidden in screenshots</nav>
<footer class="ogplus-hide">Footer hidden in screenshots</footer>

Show elements only in social cards

Create content that’s invisible to regular visitors but appears in screenshots—like a custom hero or call-to-action designed specifically for social sharing.

<div class="ogplus-show">
  This content is hidden on your site but appears in social card screenshots.
</div>

Platform-specific visibility

Target individual platforms. Use ogplus-{platform}-hide or ogplus-{platform}-show where platform is twitter, linkedin, facebook, discord, whatsapp, apple, or bluesky.

<!-- Hide only on Twitter -->
<div class="ogplus-twitter-hide">Hidden on Twitter cards</div>

<!-- Show only on LinkedIn -->
<div class="ogplus-linkedin-show">LinkedIn-specific content</div>

Custom styles

Need more than show/hide? Write your own CSS targeting the data-ogplus attribute. See Data Attributes for details.