> ## Documentation Index
> Fetch the complete documentation index at: https://docs.larafast.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Dynamic OG Images

> How to create Dynamic OG Images for your Larafast application

Dynamic open graph images are images that are generated on the fly based on the content of the page. This is useful for sharing on social media platforms like Facebook, Twitter, LinkedIn, etc.

## Requirements

Dynamic OG Images based on `spatie/browsershot` package and `puppeteer` package. You need to install these packages first.
(You can skip this step if you already installed these packages, packages included in Larafast by default)

```bash theme={null}
composer require spatie/browsershot
composer require spatie/image
npm install puppeteer
```

<Tip>
  Check the official Spatie docs for requirements: [https://spatie.be/docs/browsershot/v4/requirements](https://spatie.be/docs/browsershot/v4/requirements)
</Tip>

## Configuration

Modify the `resources/views/seo/image.blade.php` file to create your own dynamic OG Image template.

## Usage

To have your og image generated dynamically, you need to use following route:

```php theme={null}
route('og-image', ['title' => 'Your Title', 'description' => 'Description'])
```

This will generate an image with `your-title.jpg` file name. If the file already exists, it will not generate a new image.

### Example

```php theme={null}
<meta name="og:image" content="{{ route('og-image', ['title' => 'Your Title', 'description' => 'Description']) }}">
```

or if you are using `@include('seo')` in your layout file, you can use the following inside controllers:

```php theme={null}
return Inertia::render('Blog', [
            ...
            'seo' => [
                'title' => 'Blog',
                'description' => 'Blog Description',
                'image' => route('og-image', ['title' => 'Blog', 'description' => 'Blog Description']),
            ],
        ]);
```

<Tip>
  Dynamic OG image can be used also as an article images, just use the same route instead of image icon
</Tip>

<Note>
  If you need to reset your open graph images cache in Twitter use [https://cards-dev.twitter.com/validator](https://cards-dev.twitter.com/validator) or add ?v1=true after your url for which you want to reset it
</Note>

## Digging deeper

The first load of dynamic og image will be slow, as it will be generated on the fly. After that, generated image will be picked instead of creating new one.

### Articles or other models with image

For every new article that you create or update, og image will be generated automatically. The logic handled in `app/Observers/ArticleObserver.php` file.

If you have existing articles, or if you modified the template and want to regenerated model og images, you can use the following command:

```bash theme={null}
php artisan generate:og-images
```

It will overwrite existing images with new ones or create the ones that are missing.

<Tip>
  If you have other models with images, you can create your own observer and use the same logic to generate og images for them.
  Make sure to update the `generate:og-images` command to include your models.
</Tip>