Using OG Kit with Statamic SEO Pro addon

I wanted dynamic Open Graph images across my Statamic site, and OG Kit looked like a really nice way to do it. The complication was that I was already using the Statamic SEO Pro addon, so I did not want to throw out {{ seo_pro:meta }} and rebuild all of my meta tags from scratch just to change the image URLs.

What I wanted was fairly simple: keep SEO Pro for titles, descriptions, canonicals and everything else, but override the default open graph and Twitter image output so those tags point to OG Kit instead.

This post walks through that setup step by step: adding the OG Kit key to Laravel config, creating the OG template, and then, most importantly, using AppServiceProvider to inject the correct image URL into the SEO Pro meta view. OG Kit is built by Peter Suhm, currently at Tailwind and previously the founder of Reform.

• Add the OG Kit API key to .env and config/services.php.

• Create the OG Kit template in your Antlers layout.

• Copy SEO Pro's default meta view into your app so you can override it safely.

• Use AppServiceProvider to inject the OG Kit image URL into the SEO Pro meta view.

Step 1: Add the OG Kit key

The first step was adding the OG Kit API key to my environment file and exposing it through config/services.php. That keeps the key in the normal Laravel config flow instead of hardcoding it in a template.

// .env
OGKIT_API_KEY="your-key-here"

// config/services.php
'ogkit' => [
    'key' => env('OGKIT_API_KEY'),
],

Once that is in place I can read the key anywhere with config('services.ogkit.key').

Step 2: Create the OG template

I then created the OG Kit template in my Antlers layout. I am not doing anything especially fancy here. The important part is the data-og-template wrapper so OG Kit can render the preview and generate the image from the page markup.

{{ if config:services.ogkit.key }}
<template data-og-template>
    <!-- your OG image markup -->
</template>
{{ /if }}

I also only load the OG Kit preview script locally, which makes it easier to work on the image design without affecting production pages.

Step 3: Copy the SEO Pro meta view

The part I cared about most was keeping {{ seo_pro:meta }} in place. I still wanted SEO Pro to handle the title, description, canonical URL and everything else. I only wanted to swap out the image-based tags so they point to OG Kit instead of the default SEO Pro asset output.

To do that, I overrode the SEO Pro meta view and then used AppServiceProvider to pass a computed ogkit_image_url into that view.

The practical first step was copying SEO Pro's default meta view out of vendor and into my own resources directory so I had an app-level override I could edit safely.

// SEO Pro default view
vendor/statamic/seo-pro/resources/views/meta.antlers.html

// My override
resources/views/vendor/seo-pro/meta.antlers.html

That gave me a copy of the existing SEO Pro output to work from. Instead of rebuilding the whole thing from scratch, I could keep the original structure and only change the image-related tags.

Step 4: Use AppServiceProvider to inject the image URL

This is the important part. I prepend the SEO Pro view namespace so my app override is used first, then I use a view composer to inject the OG Kit URL only for the SEO Pro meta view.

<?php

namespace App\Providers;

use Illuminate\Support\Facades\View;
use Illuminate\Support\ServiceProvider;
use Illuminate\View\View as ViewInstance;

class AppServiceProvider extends ServiceProvider
{
    public function boot(): void
    {
        View::prependNamespace('seo-pro', resource_path('views/vendor/seo-pro'));

        View::composer('seo-pro::meta', function (ViewInstance $view): void {
            $view->with('ogkit_image_url', $this->buildOgkitImageUrl(
                $view->getData()['canonical_url'] ?? null
            ));
        });
    }

    private function buildOgkitImageUrl(mixed $canonicalUrl): ?string
    {
        $key = trim((string) config('services.ogkit.key'));
        $appUrl = config('app.url');

        // Bail out unless we have an API key and a fully-qualified canonical URL.
        if ($key === '' || ! is_string($canonicalUrl) || ! filter_var($canonicalUrl, FILTER_VALIDATE_URL)) {
            return null;
        }

        $scheme = parse_url($canonicalUrl, PHP_URL_SCHEME);

        // Only allow web URLs through to OGKit.
        if (! in_array($scheme, ['http', 'https'], true)) {
            return null;
        }

        $appHost = is_string($appUrl) ? parse_url($appUrl, PHP_URL_HOST) : null;
        $canonicalHost = parse_url($canonicalUrl, PHP_URL_HOST);

        // Only generate OG images for URLs on this app's configured host.
        if (! is_string($appHost) || ! is_string($canonicalHost) || ! hash_equals($appHost, $canonicalHost)) {
            return null;
        }

        // Encode both segments so the generated OGKit URL stays well-formed.
        return 'https://ogkit.dev/img/'.rawurlencode($key).'.jpeg?url='.rawurlencode($canonicalUrl);
    }
}

What this does is fairly simple. SEO Pro already knows the page canonical URL, so the composer reads that value from the view data, builds the OG Kit image URL, and passes it back into the view as ogkit_image_url.

That means I do not need to rebuild SEO Pro from scratch. I just override the part I care about and leave the rest of the meta output alone.

Step 5: Update the SEO Pro image tags

In the override itself, I keep things very small. If ogkit_image_url exists, I output that for og:image and twitter:image. If not, SEO Pro falls back to its normal image handling.

{{ if ogkit_image_url }}
    <meta property="og:image" content="{{ ogkit_image_url }}" />
    <meta property="og:image:width" content="1200" />
    <meta property="og:image:height" content="630" />
    <meta name="twitter:image" content="{{ ogkit_image_url }}" />
{{ elseif image }}
    <!-- fallback to SEO Pro's normal image output -->
{{ /if }}

That was the balance I wanted: OG Kit for the social image URL, SEO Pro for everything else.

Current limitation

One thing I have not fixed yet is the SEO preview inside the Statamic CMS. If you have uploaded a global default Open Graph image in SEO Pro, the preview still shows that default image rather than the OG Kit version. On the actual front end though, everything is working properly and the rendered meta tags are using the OG Kit URL.