nicodevs/draft.md

## draft.md

      
    Raw
  

              draft.md
            
          
    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:

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.

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