OpenGraph+
Get Started
Chapter 4

How It Works

Understanding the ogplus: variants

The plugin creates custom variants that target the data-ogplus attribute.

The data attribute

When OpenGraph+ captures your page as a social card, it adds a data-ogplus attribute to the <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—regular visitors never see it.

Generated CSS

The ogplus: variant generates CSS that targets this attribute:

/* ogplus:hidden generates */
html[data-ogplus] .ogplus\:hidden {
  display: none;
}

/* ogplus-twitter:bg-sky-500 generates */
html[data-ogplus="twitter"] .ogplus-twitter\:bg-sky-500 {
  background-color: #0ea5e9;
}

Custom CSS

For styles beyond what utilities provide, you can write custom CSS targeting the same attribute. See Data Attributes for details.