Laravel Integration

Integrating OpenGraph.xyz with Laravel lets you generate dynamic Open Graph images by constructing the URL in your controller and passing it to your Blade template.

URL Structure

The dynamic image URL follows this pattern:

https://ogcdn.net/{templateId}/v{version}/{variable1}/{variable2}/.../og.png

templateId – your unique template identifier (found in the dashboard)
version – the published version number, prefixed with v (e.g. v3)
variables – URL-encoded values for each template variable, in order

Here is an example image generated with this URL structure:

Example OG Image

URL Encoding

All variable values must be URL encoded. To use the default value for a variable, pass _ as the value for that segment. The version number updates every time you click "Publish" in the template editor.

Controller Example

This example assumes a template with two variables: a title (text) and an image URL (image source).

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class PostController extends Controller
{
    public function show($slug)
    {
        $post = Post::where('slug', $slug)->firstOrFail();

        // Template details (find these in your dashboard)
        $templateId = '4baf7dd9-4a11-4e55-9837-649e705f44ef';
        $version = 3;

        // Encode your variables
        $title = urlencode($post->title);
        $imageUrl = urlencode($post->featured_image ?? '_');

        // Construct the OG image URL
        $ogImageUrl = "https://ogcdn.net/{$templateId}/v{$version}/{$title}/{$imageUrl}/og.png";

        return view('posts.show', compact('post', 'ogImageUrl'));
    }
}

Replace the template ID and version number with the values from your dashboard.

Blade Template

In your Blade layout (e.g. resources/views/layouts/app.blade.php), add the OG meta tags:

<head>
    <title>@yield('title')</title>

    @hasSection('og_image')
        <meta property="og:image" content="@yield('og_image')" />
        <meta name="twitter:card" content="summary_large_image" />
        <meta name="twitter:image" content="@yield('og_image')" />
    @endif
</head>

And in your post view (resources/views/posts/show.blade.php):

@extends('layouts.app')

@section('title', $post->title)
@section('og_image', $ogImageUrl)

@section('content')
    <article>
        <h1>{{ $post->title }}</h1>
        {!! $post->body !!}
    </article>
@endsection

Dashboard Integration Guides

In your OpenGraph.xyz dashboard, each template has a dedicated Integration tab with ready-to-copy code snippets that include your exact template ID, version, and variable names. Use those for the fastest setup.

Dashboard Integration Guides