Welcome to the first OpenGraph+ update! Over time, changes, new features, and product updates will be shared on here so you’re kept in the loop on changes.

Since this is the first update, let’s talk about the core feature.

Automatic Open Graph images

Most websites don’t have Open Graph. The few that do generally have one static image that’s the same for all their webpages, but that sucks. Why? Because the ideal Open Graph link acts as a window into the page that the person is about to view. Properly contextualizing this content means people are more likely to click the link and stick around after they open it.

Built on web standards

Since OpenGraph+ is designed to have quick setup, then “set it and forget it”, it’s built on top of as many web standards as possible.

Metatag configuration

The viewport for an OpenGraph+ rendition can be controlled with standard HTML meta tags.

<meta name="og:plus:viewport:width" content="800">
<meta name="og:plus:selector" content="#hero">
<meta name="og:plus:style" content="padding: 4rem;">

This example would change the browser viewport size to 800px wide, then capture only the #hero element with a id="hero" style="padding: 4rem;" applied to it.

CSS & Tailwind

Most websites have navigation bars or cookie banners that wouldn’t look good in an Open Graph card, so OG+ makes it easy to hide.

If you only want to use CSS, you can include https://opengraphplus.com/stylesheet/v1.css with a stylesheet and then apply classes like ogplus-hide to HTML elements.

<nav class="ogplus-discord-hide nav-bar">...</nav>

Or if you’re a Tailwind user, you can install the @opengraphplus/tailwind package and apply the following to your DOM.

<nav class="ogplus-discord:hidden">...</nav>

Building on standards minimizes surprises and lowers the learning curve for developers.

HTTP caching

OpenGraph+ images respect the HTTP headers emitted by webpages. If you create pages that have max-age: 3600 in the HTTP cache header, OpenGraph+ caches the rendition for 3600 seconds, or 30 minutes. Works with eTag headers too.

If you don’t use HTTP caching, you can control rendering caches with meta tags:

<meta name="og:plus:cache:max_age" content="3600">
<meta name="og:plus:cache:etag" content="v1.2.4">

Target specific social networks

Want to show a specific message for Slack users? It’s possible in Tailwind with og-slack:visible or with the og-slack-visible CSS class from the hosted stylesheet.

Guides

The documentation guides show how to connect OpenGraph+ to popular web frameworks & platforms. They’re still a work-in-progress and many are coming soon, but there will be a lot of investment in having good docs to make it easy for humans and AI to connect their site to OG+.