OpenGraph+
Get Started
Chapter 2

Rendering

How OpenGraph+ captures your pages

When a social platform requests your page’s og:image, OpenGraph+ loads your page in a headless browser and captures it as an image.

The render process

  1. Social platform (LinkedIn, Twitter, etc.) requests your page
  2. Your server returns HTML with og:image pointing to OpenGraph+
  3. Platform fetches the image URL
  4. OpenGraph+ loads your page in a headless browser
  5. OpenGraph+ injects data-ogplus on <html>
  6. Your CSS responds to the attribute (hiding nav, showing social content, etc.)
  7. OpenGraph+ captures the viewport as an image
  8. Image is returned to the social platform

The data attribute

When rendering, OpenGraph+ adds data-ogplus to your <html> element:

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

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

This attribute is your hook for styling. Any CSS that targets [data-ogplus] only applies during social card rendering—not to regular visitors.

Viewport

The renderer captures a fixed-width viewport. Mobile widths (600-800px) tend to work best for social cards since they force a simpler, more focused layout.

Configure the viewport width in your framework’s OpenGraph+ settings. See your framework’s documentation for specifics.