Install Jigsaw. To get started quickly, install the blog template.
composer require tightenco/jigsaw
vendor/bin/jigsaw init blogThe 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.
Install the package for generating OG images. Please note that you need to have the ImageMagick extension.
composer require simonhamp/the-ogCreate a folder to store the images:
mkdir source/assets/og-imagesNow 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!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.
Thank you, @fylzero! Glad to hear that. Yes, indeed, that
usewas missing. I added it to the gist so I don't forget when writing the article. Thank you!