Skip to content

Instantly share code, notes, and snippets.

@nicodevs
Last active April 30, 2024 18:50
Show Gist options
  • Save nicodevs/550592f8b277faeb659366cd12ddcbe0 to your computer and use it in GitHub Desktop.
Save nicodevs/550592f8b277faeb659366cd12ddcbe0 to your computer and use it in GitHub Desktop.
How to implement OG images on Jigsaw

Setup

Install Jigsaw. To get started quickly, install the blog template.

composer require tightenco/jigsaw
vendor/bin/jigsaw init blog

The OG image tag should contain a full URL as its content. It cannot be a relative path.

// Wrong
<meta property="og:image" content="/path/to/image.png" />

// Correct
<meta property="og:image" content="http://myblog.test/path/to/image.png" />

For this reason, it is important to define the baseUrl of our site in config.php.

'baseUrl' => 'http://myblog.test',

Open the source/_layouts/main.blade.php file to add the og:image tag to the <head>.

<meta property="og:image" content="{{ $page->getOgImage() }}" />

Add the helper getOgImage to config.php:

<?php

use Illuminate\Support\Str;

return [
    // Other properties and helpers...
    'getOgImage' => function ($page) {
        return $page->baseUrl . '/assets/img/default.png';
    }
];

This will print out the same OG image tag for every page. Let's make it dynamic.

Make it dynamic

Install the package for generating OG images. Please note that you need to have the ImageMagick extension.

composer require simonhamp/the-og

Create a folder to store the images:

mkdir source/assets/og-images

Now edit the getOgImage helper to create a custom OG image for every page with a og_image property. If the image exists, just return the URL. If not, create it and then return the URL.

<?php

use Illuminate\Support\Str;
use SimonHamp\TheOg\Image;

return [
    // Other properties and helpers...
    'getOgImage' => function ($page) {
        if (!$page->og_image) {
            return $page->baseUrl . '/assets/img/default.png';
        }

        $target = 'source/assets/og-images/' . $page->og_image['slug'] . '.png';

        if (!file_exists($target)) {
            $image = new Image();
            $image
                ->accentColor('#cc0000')
                ->title($page->og_image['title'])
                ->description($page->og_image['description'])
                ->save($target);
        }

        return $page->baseUrl . str_replace('source', '', $target);
    },
];

Use it as follows:

og_image:
    slug: getting-started
    title: Getting Started
    description: Let's go!

Result

Generated image:

OG Image

Generated meta tag:

<meta property="og:image" content="http://myblog.test/assets/og-images/getting-started.png" />

You can preview the result using a meta image preview extension.

OG Image

Feel free to customize the image to match your preferred style.

@fylzero
Copy link

fylzero commented Apr 28, 2024

@nicodevs just thought I'd add a note here so it doesn't get missed in the article, everything here is perfect - this was super easy to follow, just need to make sure to add use SimonHamp\TheOg\Image; on the config.php

@nicodevs
Copy link
Author

Thank you, @fylzero! Glad to hear that. Yes, indeed, that use was missing. I added it to the gist so I don't forget when writing the article. Thank you!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment