Open Graph previews, fixed automatically

OpenGraph+ generates previews that stay in sync with your content

Copy Install https://opengraphplus.com/connect.txt into your coding agent to connect your site to OpenGraph+

Before and after OpenGraph+

OpenGraph+ generates previews directly from existing pages.

Check out this article!

https://legiblenews.com

Legible News

What is this?

Without OpenGraph+

→↓

Looks right wherever it's shared

Captured, formatted, and optimized for Apple, Slack, Discord, LinkedIn, and more.

Built for web developers

Lightweight to connect. No renderer running in your app.

Control rendering with meta tags

Selectors, viewports, and styles in your HTML.

<meta property="og:title" content="March 03, 2026" />
<meta property="og:site_name" content="Legible News" />
<meta property="og:image" content="https://opengraphplus.com/api/websites/v1/MDBKWnFuMG9mWkVwQnV2N0lsMzBrQTqtr64lS9PcfTrh6HdaNHA8/image?url=https%3A%2F%2Flegiblenews.com" />
<!-- Customize how previews render with tags -->
<meta property="og:plus:selector" content="article.post" />
<meta property="og:plus:style" content="padding: 40px;" />
<meta property="og:plus:viewport:width" content="1200" />

Style cards with CSS or Tailwind

Hide nav bars, show social-only content, and customize per platform.

CSS

html[data-ogplus] nav {
  display: none;
}
html[data-ogplus] .social-card {
  display: block;
}

Hosted CDN

<link rel="stylesheet"
  href=".../stylesheets/v1.css">
<nav class="ogplus-hide">
  This site uses 🍪🥠
</nav>
<div class="ogplus-show">
  Come on in! 🤗
</div>

Tailwind

<nav class="ogplus:hidden">
  This site uses 🍪🥠
</nav>
<div class="hidden ogplus:block">
  Come on in! 🤗
</div>

Design cards with HTML templates

Custom card designs that don't change your visible page.

<template id="ogplus">
  <div class="og-card">
    <h1>${document.title}</h1>
    <h2>${document.querySelector('meta[name="description"]').content}</h2>
    <img src="/logo.png" />
  </div>
</template>

Speed up rendering with caching

Control when Open Graph images refresh with HTTP headers or meta tags.

HTTP Headers

HTTP/1.1 200 OK
Cache-Control: max-age=86400
ETag: "abc123"

Meta Tags

<meta property="og:plus:max-age"
  content="86400" />
<meta property="og:plus:etag"
  content="abc123" />

Tools that fit into your stack

Get work done from the terminal or browser.

Command-line interface

Generate meta tags from your terminal or let your AI agent handle it.

$ ogplus meta legiblenews.com

<meta property="og:url" content="http://legiblenews.com">

<meta property="og:type" content="website">

<meta property="og:site_name" content="legiblenews.com">

<meta property="og:image" content="https://opengraphplus.com/api/websites/v1/WWNObVBFSUZEelNsbjRaNUdyR3FIdzqTJXSII4qvGALTpRE83Ytz/image?url=http%3A%2F%2Flegiblenews.com">

<meta property="og:image:secure_url" content="https://opengraphplus.com/api/websites/v1/WWNObVBFSUZEelNsbjRaNUdyR3FIdzqTJXSII4qvGALTpRE83Ytz/image?url=http%3A%2F%2Flegiblenews.com">

<meta property="twitter:card" content="summary_large_image">

In-browser debugging

Preview how your pages render as social cards directly in Chrome, Firefox, or Safari.

OG+ Preview browser tool showing platform preview options — Preview social cards on any page with the OG+ browser tool

Docs for humans and AI

Guides, markdown, and packages for wherever you deploy.

Any Website

Links That Look Right

WordPress

Perfect Link Previews

Next.js

Dynamic by Default

Laravel

Production-Ready Previews

Jekyll

Rich link previews for your blog

Sitepress

Beautiful previews for your content site

Wix

Your Site, Everywhere

Tailwind CSS

Utility-first social card styling

Webflow

Designed to Be Shared

Nuxt

Server-Rendered Shares

Django

Previews That Keep Up

Middleman

Eye-catching cards for static sites

Read The Docs →