API

window.__og = window.__og || [];

One of the coolest features, in our opinion, is the ability to link your opengraph images and dynamically change the destination based on the latest render data. When leveraging a clientside framework like React, Vue.js, Svelte, or Ember.js for compositing images you often need to wait for elements to finish loading. To support this, we provide an API via the __og global variable to defer the render completion until you are absolutley ready. All renders are limited to a maximum of 5 seconds before it will be timed out and the default image is returned.

Adding the __og global variable requires you to push the ['ready'] or ['capture', selector_or_element] helper onto the stack telling the image renderer your content is ready for capture.

If you are not using the __og global variable, the renderer will wait for all fonts and images on the page to load.

Helpers

We’ve built in some common helpers to assist with your integration.

ready

window.__og.push(['ready'])

This is required (unless you are using capture) to signal the the image renderer that your content is ready for capture.

When using ready it should be the last helper as it will stop the pipeline.

capture

window.__og.push(['capture', selector_or_element]);

This is a shortcut helper combining link, preload, clip and ready into a single call. The selector_or_element can be any CSS selector that resolves to a single element, or the element itself. If the target element has an href attribute, the href will be used as the link metadata. Once all child img elements are loaded, the clip helper is called with the bounds of the element and finally ready.

When using capture it should be the last helper as it will stop the pipeline.

preload

window.__og.push(['preload', 'fonts', 'https://images.unsplash.com/photo-1636333825251-d921e6ff88e4']);
window.__og.push(['preload', 'fonts', 'images']);
window.__og.push(['preload', 'fonts']);
window.__og.push(['preload', 'https://images.unsplash.com/photo-1636333825251-d921e6ff88e4']);
window.__og.push(['preload', 'images']);

Arguments

‘fonts’ - Waits for all the fonts to load before rendering
‘images’ - Waits for all the images to load before rendering
image url - Waits for the image to load before rendering

clip

window.__og.push(['clip', 0, 0, 1200, 630]);

Allows you to return a clipped portion of the image. Clipping requires the Professional Plan.

link

window.__og.push(['link', 'https://www.example.com']);

Sets the url to redirect the user when using link.opengraphimage.com

metadata

window.__og.push(['metadata', {
  id: 1,
  name: 'Jill Gamer'
}]);

Sets the x-ogi-meta header when “Send Metadata Header” is checked in your origin config.

API