---
title: "Crear OG images con laravel y browsershot"
excerpt: "Hay muchos servicios por ahí que sirven para crear este tipo de imágenes pero para no depender de ellos usaremos browsershot, que es un paquete creado por la gente de spatie."
date: "2022-01-17T02:28:00.000Z"
category: "Laravel"
seo_title: "Generar OG Images automáticamente en Laravel con Browsershot"
seo_description: "Crea Open Graph images dinámicas en Laravel usando Browsershot y Puppeteer. Genera screenshots desde vistas Blade, guárdalos en storage y actualiza la base de datos con un comando Artisan."
author:
  name: "angel cruz"
  picture: "https://angelcruzdevcdn.nyc3.cdn.digitaloceanspaces.com/images/me/angel-cruz.png"
ogImage:
  url: "/images/open-graph/laravel-opengraph-image.png"
---

Primero que todo es importante seguir los pasos de instalación del paquete que en su [documentacion](https://github.com/spatie/browsershot) explica como hacerlo. 


<div class="not-prose">
	<div class="flex bg-yellow-100 rounded p-4 mb-4 text-sm text-yellow-700" role="alert">
		<svg class="w-5 h-5 inline mr-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
			<path fill-rule="evenodd"
				d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
				clip-rule="evenodd"></path>
		</svg>
		<div>
			<p>
				Spoiler: necesitas tener nodejs, puppeteer y chromium. 
			</p>
		</div>
	</div>
</div>

### como se usa

Asumiendo que leyeron la documentación del propio paquete ya saben como se usa, por lo que voy a pasar a explicarles un ejemplo práctico

En mi caso tengo una serie de publicaciones en este blog al cual quería actualizar la "og image" y lo que hice fue crear un comando para hacerlo automatico.

## hagamos la magia

![](https://media.tenor.com/DNCBqbguizsAAAAC/magic.gif)

Primero creamos el comando:

```shell
php artisan make:command GenerateOgImage
```

Cambiamos la firma del comando a algo como esto:

```php
protected $signature = 'generate:ogimage';
```

No se olviden de que tienen que ejecutar:

```shell
php artisan storage:link
```

En mi caso, tengo un campo en la base de datos llamado `file` el cual vamos a actualizar con el nuevo valor correspondiente a la imagen que vamos a crear.

Ahora pasamos hacer lo siguiente:

```php
/**
 * Execute the console command.
 *
 * @return int
 */
public function handle()
{
	$articles = Article::get();
    $articles->each(function ($item, $key) {
		$item->file = $this->browswerShoot($item);
		$item->save();
    });

	return self::SUCCESS;
}
```

Lo que hacemos aquí es simplemente es encontrar todos los artículos e iterar por cada uno de ellos para actualizar el campo `file` 

Y ya para finalizar:

```php

public function browswerShoot($item)
{
	$html = view('ogImage', ['post' => $item])->render();
    $imageData = Browsershot::html($html)
        ->devicePixelRatio(2)
        ->windowSize(1200, 630)
        ->screenshot();

    $this->saveOgImage($imageData, $item->slug);
    return $this->ogImageUrl($item->slug);
}

public function saveOgImage(string $file, $param)
{
    Storage::disk('public')->put($this->ogImagePath($param), $file);
}

public function ogImagePath($param): string
{
	return "post/{$param}.png";
}

public function ogImageUrl($param): string
{
	return Storage::disk('public')->url($this->ogImagePath($param));
}
```

Y bueno, creo que todo esto se explica solo pero por si acaso:

Creamos una instancia de `browsershot` donde le indicamos una vista que va a renderizar y le pasamos una variable, esta variable contiene el título de nuestro artículo. 

a partir de este momento, `browsershot` se encarga de hacer su magia y genera el screenshot y guarda la imagen en una carpeta llamada `post` y el nombre de la imagen será el slug de dicho artículo y ya por ultimo lo que hacemos es retornar la url de la imagen para que sea actualizado en nuestra base de datos.

Espero que les sea de utilidad.

---

## Sitemap

Índice completo del sitio: [/sitemap.md](https://angelcruz.dev/sitemap.md)

Canónico HTML: [https://angelcruz.dev/post/crear-og-images-con-laravel-y-browsershot](https://angelcruz.dev/post/crear-og-images-con-laravel-y-browsershot)