Rendering

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

Social platform (LinkedIn, Twitter, etc.) requests your page
Your server returns HTML with og:image pointing to OpenGraph+
Platform fetches the image URL
OpenGraph+ loads your page in a headless browser
OpenGraph+ injects data-ogplus on <html>
OpenGraph+ checks for templates or applies CSS styling
OpenGraph+ captures the viewport as an image
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>

<!-- Platform-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.

Rendering modes

OpenGraph+ supports three rendering modes, checked in this order:

Templates — Custom layouts using <template id="ogplus"> elements. See Templates.
Selector isolation — Extract a specific element using og:plus:selector meta tag.
Full page — Render the entire viewport with CSS styling via data-ogplus.

Meta tags reference

Control rendering behavior directly in your HTML with meta tags.

Meta tag	Description
`og:plus:viewport:width`	Viewport width in pixels
`og:plus:selector`	CSS selector to isolate
`og:plus:style`	Inline CSS for body
`og:plus:cache:max_age`	Cache TTL in seconds
`og:plus:cache:etag`	Cache version identifier

Viewport width

Override the viewport width for this page:

<meta property="og:plus:viewport:width" content="800">

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

Selector

Capture only a specific element instead of the full viewport:

<meta property="og:plus:selector" content="#social-card">

If the selector matches a <template> element, OpenGraph+ treats it as a template (evaluating ${...} expressions). Otherwise, it clones the element and places it directly in <body> before capturing. Cloned elements may have rendering issues if they rely on inherited styles from parent elements or CSS that uses descendant selectors.

Style

Inject inline styles during rendering:

<meta property="og:plus:style" content="background: white; padding: 40px;">

These styles apply to the <body> element during capture. Use this for quick adjustments without modifying your CSS.

Cache max age

Set how long the rendered image stays fresh (in seconds):

<meta property="og:plus:cache:max_age" content="86400">

This overrides HTTP Cache-Control headers. See HTTP Caching for details.

Cache etag

Set a version identifier for cache invalidation:

<meta property="og:plus:cache:etag" content="v1.2.3">

When the etag changes, OpenGraph+ re-renders even if the cache hasn’t expired. See HTTP Caching for details.

Example

Combine meta tags to fully control rendering:

<head>
  <meta property="og:plus:viewport:width" content="800">
  <meta property="og:plus:selector" content=".blog-hero">
  <meta property="og:plus:style" content="padding: 20px;">
  <meta property="og:plus:cache:max_age" content="86400">
</head>

This renders at 800px wide, extracts the .blog-hero element, adds padding around it, and caches the result for 24 hours.