Setup Guide

ShareMagic generates unique OG images for every page on your site. Setup takes about two minutes: buy or claim a template, add your site, and paste one meta tag into your HTML.

1. Get a template

Browse the template gallery and pick a design that fits your site. Templates are available for blogs, e-commerce stores, portfolios, and general-purpose sites. Free and paid options are available.

After purchasing (or claiming a free template), you’ll be prompted to choose a site.

2. Add your site

Enter your site’s URL when prompted during checkout, or add it later from My Templates. ShareMagic assigns your site a unique site code — a short identifier used in your OG image URLs.

You can find your site code on your Sites page at any time.

3. Add the meta tag

Paste this tag into the <head> of every page on your site:

<meta property="og:image" content="https://sharemagic.co/og/YOUR_SITE_CODE/PAGE_PATH" />

Replace YOUR_SITE_CODE with the code from step 2. PAGE_PATH is the path of the current page — for example, /blog/my-post or /products/widget.

You also need the image dimensions and Twitter card type so platforms render the image correctly:

<meta property="og:image" content="https://sharemagic.co/og/YOUR_SITE_CODE/PAGE_PATH" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta name="twitter:card" content="summary_large_image" />

The og:image:width and og:image:height tags tell platforms the exact dimensions to expect, preventing cropping or layout shifts. The twitter:card tag set to summary_large_image ensures X (formerly Twitter) displays the full-width image card instead of a small thumbnail.

Example

If your site code is a1b2c3 and the page is /blog/hello-world:

<meta property="og:image" content="https://sharemagic.co/og/a1b2c3/blog/hello-world" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta name="twitter:card" content="summary_large_image" />

For your homepage, use a trailing slash:

<meta property="og:image" content="https://sharemagic.co/og/a1b2c3/" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta name="twitter:card" content="summary_large_image" />

How it works

When someone shares a link to your page, the platform (X, Facebook, LinkedIn, Discord, iMessage, etc.) fetches the og:image URL. ShareMagic then:

Loads the page at that path on your site.
Extracts metadata — Open Graph tags, JSON-LD structured data, <title>, and meta descriptions.
Renders your chosen template with that metadata.
Returns a 1200x630 image.

The image is generated on the fly and cached, so the first request takes a moment and subsequent requests are fast.

Platform-specific instructions

Static HTML

Add the meta tags directly to each page’s <head>:

<head>
  <meta property="og:image" content="https://sharemagic.co/og/a1b2c3/about" />
  <meta property="og:image:width" content="1200" />
  <meta property="og:image:height" content="630" />
  <meta name="twitter:card" content="summary_large_image" />
</head>

WordPress

Add this to your theme’s header.php or use a plugin like Insert Headers and Footers:

<meta property="og:image" content="https://sharemagic.co/og/YOUR_SITE_CODE<?php echo esc_attr($_SERVER['REQUEST_URI']); ?>" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta name="twitter:card" content="summary_large_image" />

If you use an SEO plugin like Yoast or RankMath, set the OG image URL in the plugin’s social settings for each page, or use a custom filter to set it globally.

Next.js (App Router)

In your root layout.tsx, export a metadata object or use generateMetadata:

export async function generateMetadata({ params }) {
  const path = /* resolve current path */;
  return {
    openGraph: {
      images: [{
        url: `https://sharemagic.co/og/YOUR_SITE_CODE${path}`,
        width: 1200,
        height: 630,
      }],
    },
    twitter: {
      card: "summary_large_image",
    },
  };
}

Hugo

In your base template (e.g., layouts/_default/baseof.html):

<meta property="og:image" content="https://sharemagic.co/og/YOUR_SITE_CODE{{ .RelPermalink }}" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta name="twitter:card" content="summary_large_image" />

Shopify

Add this to your theme.liquid file inside the <head> tag:

<meta property="og:image" content="https://sharemagic.co/og/YOUR_SITE_CODE{{ request.path }}" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta name="twitter:card" content="summary_large_image" />

You may need to remove any existing og:image or twitter:card tags from your theme to avoid duplicates.

Structured data for better images

ShareMagic templates can pull data from your page’s JSON-LD structured data. Templates designed for specific content types (articles, products, organizations) use these fields to generate richer images.

For example, an article template might use:

headline — the article title
author.name — the author’s name
datePublished — the publish date
image — a featured image

A product template might use:

name — the product name
brand.name — the brand
offers.price — the price
image — the product image

If your pages don’t have JSON-LD, ShareMagic falls back to standard OG tags and meta descriptions. You can use the Inspector to see what data ShareMagic can find on any page.

Testing your setup

After adding the meta tag:

Open the Share Preview tool and paste one of your page URLs.
You should see your template rendered with that page’s metadata.
Check a few different pages to make sure the path variable is working correctly.

If the image looks wrong, use the Inspector to verify your page’s metadata is correct. The most common issues are missing or incorrect JSON-LD, or a conflicting og:image tag elsewhere in your HTML.

Troubleshooting

Image not showing up? Make sure your og:image meta tag is the only one in the <head>. Duplicate tags can cause platforms to pick the wrong one.

Wrong data in the image? Check your page’s structured data with the Inspector. ShareMagic uses the first matching JSON-LD object it finds.

Image looks cached/stale? Platforms cache OG images aggressively. Use Facebook’s Sharing Debugger or Twitter Card Validator to force a refresh.