Installation & setup | laravel-og-image | Spatie SPATIE Laravel Open Graph Image =========================== spatie.be/open-source [Docs](https://spatie.be/docs) [Laravel-og-image](https://spatie.be/docs/laravel-og-image/v1) Installation & setup Version v1 Other versions for crawler [v1](https://spatie.be/docs/laravel-og-image/v1) - [ Introduction ](https://spatie.be/docs/laravel-og-image/v1/introduction) - [ Requirements ](https://spatie.be/docs/laravel-og-image/v1/requirements) - [ Installation & setup ](https://spatie.be/docs/laravel-og-image/v1/installation-setup) - [ Support us ](https://spatie.be/docs/laravel-og-image/v1/support-us) - [ Questions and issues ](https://spatie.be/docs/laravel-og-image/v1/questions-issues) - [ Changelog ](https://spatie.be/docs/laravel-og-image/v1/changelog) - [ About us ](https://spatie.be/docs/laravel-og-image/v1/about-us) Basic usage ----------- - [ How it works ](https://spatie.be/docs/laravel-og-image/v1/basic-usage/how-it-works) - [ Getting started ](https://spatie.be/docs/laravel-og-image/v1/basic-usage/getting-started) - [ Customizing screenshots ](https://spatie.be/docs/laravel-og-image/v1/basic-usage/customizing-screenshots) - [ Defining fallback images ](https://spatie.be/docs/laravel-og-image/v1/basic-usage/defining-fallback-images) - [ Caching and storage ](https://spatie.be/docs/laravel-og-image/v1/basic-usage/managing-caching-and-storage) - [ Pre-generating images ](https://spatie.be/docs/laravel-og-image/v1/basic-usage/pre-generating-images) - [ Clearing generated images ](https://spatie.be/docs/laravel-og-image/v1/basic-usage/clearing-generated-images) Advanced usage -------------- - [ Customizing the page URL ](https://spatie.be/docs/laravel-og-image/v1/advanced-usage/customizing-the-page-url) - [ Using a custom screenshot driver ](https://spatie.be/docs/laravel-og-image/v1/advanced-usage/using-a-custom-screenshot-driver) - [ Customizing the screenshot layout ](https://spatie.be/docs/laravel-og-image/v1/advanced-usage/customizing-the-screenshot-layout) - [ Customizing actions ](https://spatie.be/docs/laravel-og-image/v1/advanced-usage/customizing-actions) - [ Troubleshooting ](https://spatie.be/docs/laravel-og-image/v1/advanced-usage/troubleshooting) - [ Using a hosted solution ](https://spatie.be/docs/laravel-og-image/v1/advanced-usage/using-a-hosted-solution) - [ Using Laravel Boost ](https://spatie.be/docs/laravel-og-image/v1/advanced-usage/using-laravel-boost) Installation & setup ======================== ### On this page 1. [ Configuring the screenshot driver ](#content-configuring-the-screenshot-driver) 2. [ Publishing the config file ](#content-publishing-the-config-file) You can install the package via composer: ``` composer require spatie/laravel-og-image ``` The package automatically registers a middleware in the `web` middleware group that handles OG image processing (injecting meta tags, fallback images, and preview rendering). No manual middleware configuration is needed. Configuring the screenshot driver ----------------------------------------------------------------------------------------------------------------------------------------------------------- This package uses [spatie/laravel-screenshot](https://github.com/spatie/laravel-screenshot) to take screenshots of your OG image HTML. You can use either Browsershot or Cloudflare to take these screenshots. ### Browsershot (default) Browsershot is the default driver and requires Node.js and Chrome/Chromium on your server. No extra configuration is needed if these are already installed. See the [Browsershot requirements](https://spatie.be/docs/browsershot/v4/requirements) and [installation instructions](https://spatie.be/docs/browsershot/v4/installation-setup) for how to set these up, including instructions for [Forge](https://spatie.be/docs/browsershot/v4/installation-setup#content-forge). ### Cloudflare If you don't want to install Node.js and Chrome on your server, you can use [Cloudflare's Browser Rendering API](https://developers.cloudflare.com/browser-rendering/) instead. Add this to your `AppServiceProvider`: ``` use Spatie\OgImage\Facades\OgImage; public function boot(): void { OgImage::useCloudflare( apiToken: env('CLOUDFLARE_API_TOKEN'), accountId: env('CLOUDFLARE_ACCOUNT_ID'), ); } ``` Then add your credentials to `.env`: ``` CLOUDFLARE_API_TOKEN=your-api-token CLOUDFLARE_ACCOUNT_ID=your-account-id ``` You can find your account ID in the Cloudflare dashboard URL (`https://dash.cloudflare.com/`). To create an API token, go to [API Tokens](https://dash.cloudflare.com/profile/api-tokens) and create a token with the `Workers Scripts: Edit` permission. Publishing the config file -------------------------------------------------------------------------------------------------------------------------------------- Optionally, you can publish the config file with: ``` php artisan vendor:publish --tag=og-image-config ``` This is the content of the published config file: ``` return [ /* * The filesystem disk used to store generated OG images. */ 'disk' => 'public', /* * The path within the disk where OG images will be stored. */ 'path' => 'og-images', /* * The dimensions of the generated OG images in pixels. */ 'width' => 1200, 'height' => 630, /* * The default image format. Supported: "jpeg", "png", "webp". */ 'format' => 'jpeg', /* * The image quality for JPEG and WebP formats (1-100). * Set to null to use the driver's default quality. */ 'quality' => null, /* * The query parameter used to trigger OG image preview mode. * Appending this parameter to any page URL renders just the * template content at the configured dimensions. */ 'preview_parameter' => 'ogimage', /* * The number of seconds that CDNs and browsers may cache the image * response from /og-image/{hash}.jpeg. * Since image URLs are content-hashed, this is safe to cache aggressively. * Set to 0 to disable caching. */ 'redirect_cache_max_age' => 60 * 60 * 24, /* * The maximum number of seconds to wait for a lock when generating * an OG image. This prevents concurrent requests from generating * the same image simultaneously. */ 'lock_timeout' => 60, /* * The actions used by this package. You can replace any of them with * your own class to customize the behavior. Your custom class should * extend the default action. * * Learn more: https://spatie.be/docs/laravel-og-image/v1/advanced-usage/customizing-actions */ 'actions' => [ 'generate_og_image' => \Spatie\OgImage\Actions\GenerateOgImageAction::class, 'inject_og_image_fallback' => \Spatie\OgImage\Actions\InjectOgImageFallbackAction::class, 'render_og_image_screenshot' => \Spatie\OgImage\Actions\RenderOgImageScreenshotAction::class, ], ]; ```