Embed your OG image

Every saved template has a permanent URL:

https://opengraphly.com/api/og/YOUR_TEMPLATE_ID

Copy it from the editor or the templates dashboard, then add it wherever your platform asks for an Open Graph or social sharing image.

Plain HTML

Add both tags inside the page's <head>:

<meta
  property="og:image"
  content="https://opengraphly.com/api/og/YOUR_TEMPLATE_ID"
/>
<meta
  name="twitter:image"
  content="https://opengraphly.com/api/og/YOUR_TEMPLATE_ID"
/>

You should also have og:title, og:description, and og:url tags. Opengraphly supplies the image only.

Next.js App Router

Use the metadata API in a page or layout:

import type { Metadata } from "next";
 
const imageUrl = "https://opengraphly.com/api/og/YOUR_TEMPLATE_ID";
 
export const metadata: Metadata = {
  openGraph: {
    images: [imageUrl],
  },
  twitter: {
    card: "summary_large_image",
    images: [imageUrl],
  },
};

For dynamic pages, return the same fields from generateMetadata.

Webflow

Open Page settings

In the Pages panel, hover over the page and select the settings icon.

Find Open Graph settings

Scroll to the Open Graph section. Use the image URL field rather than uploading a static file.

Paste and publish

Paste the Opengraphly URL, save the settings, and publish the site.

For CMS pages, use a CMS field if Webflow requires the image value to vary by item.

Framer

Open the page settings, go to SEO → Social Image, switch the image source to a URL where available, and paste the Opengraphly URL. Publish the site after saving.

If your Framer project only offers file upload for a particular page type, add the Open Graph meta tag through custom code in the page head.

WordPress

SEO plugins normally control social images:

Yoast SEO: Open the page's Social settings and set the Facebook/X image.
Rank Math: Open the Social tab and set the social image.
Custom theme: Add the HTML meta tags to the document head.

Some WordPress media pickers accept uploaded files only. In that case, use a plugin or theme field that supports an external image URL, or add the meta tags directly.

Test the result

After publishing:

View the page source and search for og:image.
Confirm the content value is the Opengraphly URL.
Open the URL directly and confirm an image loads.
Use the sharing debugger for the platform you care about.