One Meta Tag to Connect Them All

You can now connect OpenGraph+ to your site with a single <meta> tag. No SDK, no API key, no build step. Put it in your <head> and every page on your site gets its own Open Graph image.

How it works

Go to your site’s dashboard in OpenGraph+ and create a connection. You’ll get a URL on ogplus.net like this:

https://abc12345.ogplus.net

Then add two meta tags to your site’s <head>. The first one points og:image at your connection URL plus the current page’s path. The second tells platforms like Twitter to render a large image card:

<meta property="og:image" content="https://abc12345.ogplus.net/about">
<meta name="twitter:card" content="summary_large_image">

When someone shares a link to your site on Twitter, Slack, LinkedIn, or anywhere else, that platform’s crawler hits the og:image URL. OpenGraph+ sees the request, loads your page, takes a screenshot, and sends back the image. The /about part of the URL tells it which page to screenshot.

Works with everything

The only thing that changes between frameworks is how you output the current page path. Here’s what it looks like in a few popular ones:

Rails

<head>
  <meta property="og:image"
    content="https://abc12345.ogplus.net<%= request.path %>">
  <meta name="twitter:card"
    content="summary_large_image">
</head>

Django

<head>
  <meta property="og:image"
    content="https://abc12345.ogplus.net{{ request.path }}">
  <meta name="twitter:card"
    content="summary_large_image">
</head>

WordPress

<head>
  <meta property="og:image"
    content="https://abc12345.ogplus.net<?= $_SERVER['REQUEST_URI'] ?>">
  <meta name="twitter:card"
    content="summary_large_image">
</head>

Next.js

export const metadata = {
  openGraph: {
    images: [`https://abc12345.ogplus.net${pathname}`],
  },
  twitter: {
    card: 'summary_large_image',
  },
}

Shopify

<head>
  <meta property="og:image"
    content="https://abc12345.ogplus.net{{ request.path }}">
  <meta name="twitter:card"
    content="summary_large_image">
</head>

Jekyll

<head>
  <meta property="og:image"
    content="https://abc12345.ogplus.net{{ page.url }}">
  <meta name="twitter:card"
    content="summary_large_image">
</head>

Same idea everywhere. Your connection URL, plus whatever your framework uses for the current path.

Why I killed the old setup flow

The old integration required an API secret. I was recording a demo of setting up OpenGraph+ in a Rails app and caught myself blabbering way too long about configuring the secret, trying not to flash it on screen, fumbling through environment variables. If I can’t demo my own product without spending five minutes on credential management, the onboarding is broken.

With meta tags there’s no secret to manage, nothing to hide in a screencast, nothing to put in your .env file. Copy a meta tag, paste it in your layout, done. The connection URL only serves images, so there’s nothing sensitive about it.

If it’s hard to explain, it’s probably hard to use. If it’s easy to explain, it’s probably easy to use too.

Why this beats a traditional API

Most OG image services want you to construct signed URLs, pass titles and descriptions as query parameters, or make server-side API calls to a rendering endpoint. That’s a lot of plumbing for what should be a simple thing.

With a meta tag you skip all of that:

No API keys in your markup. The connection URL handles auth.
No server-side calls. It’s just a URL in your HTML.
No SDK. Works with any language or framework.
No build step. Paste it in your layout and move on.

OpenGraph+ takes care of the rest: figuring out which platform made the request, rendering your page at the right size for that platform, caching it, and serving the image.

Get started

Head to your website’s dashboard and create a connection. You’ll get your ogplus.net URL and code snippets for your framework, ready to paste in.