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.