# Setup
Install Jigsaw. To get started quickly, install the blog template.
```bash
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.
```blade
// Wrong
// Correct
```
For this reason, it is important to define the `baseUrl` of our site in `config.php`.
```php
'baseUrl' => 'http://myblog.test',
```
Open the `source/_layouts/main.blade.php` file to add the `og:image` tag to the ``.
```php
```
Add the helper `getOgImage` to `config.php`:
```php
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.
```sh
composer require simonhamp/the-og
```
Create a folder to store the images:
```sh
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
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:
```yaml
og_image:
slug: getting-started
title: Getting Started
description: Let's go!
```
# Result
Generated image:
Generated meta tag:
```html
```
You can preview the result using a meta image preview extension.
Feel free to customize the image to match your preferred style.