Laravel OG Image

https://github.com/spatie/laravel-og-image
Admin
Laravel OG Image is a Laravel package that automatically generates Open Graph images for your...
Tokens:9,736
Snippets:136
Trust Score:10
License:MIT
Update:3 months ago
Show doc for...
Tokens:
Raw
### Install Package

Source: https://github.com/spatie/laravel-og-image/blob/main/README.md

Install the package via Composer.

```bash
composer require spatie/laravel-og-image
```

--------------------------------

### Chaining Configuration Methods

Source: https://github.com/spatie/laravel-og-image/blob/main/docs/basic-usage/customizing-screenshots.md

All configuration methods can be chained together for concise setup in your AppServiceProvider.

```php
OgImage::format('webp')
    ->size(1200, 630)
    ->disk('s3', 'og-images');
```

--------------------------------

### Install Chromium on macOS

Source: https://github.com/spatie/laravel-og-image/blob/main/docs/advanced-usage/troubleshooting.md

Install the Chromium browser using Homebrew on macOS.

```bash
brew install --cask chromium
```

--------------------------------

### Install Chromium on Ubuntu/Debian

Source: https://github.com/spatie/laravel-og-image/blob/main/docs/advanced-usage/troubleshooting.md

Install the Chromium browser package on Ubuntu or Debian-based systems.

```bash
apt-get install -y chromium-browser
```

--------------------------------

### Configure Cloudflare Driver for OG Images

Source: https://github.com/spatie/laravel-og-image/blob/main/docs/installation-setup.md

Use Cloudflare's Browser Rendering API instead of local installations of Node.js and Chrome. Configure this in your AppServiceProvider and add credentials to your .env file.

```php
use Spatie\OgImage\Facades\OgImage;

public function boot(): void
{
    OgImage::useCloudflare(
        apiToken: env('CLOUDFLARE_API_TOKEN'),
        accountId: env('CLOUDFLARE_ACCOUNT_ID'),
    );
}
```

```dotenv
CLOUDFLARE_API_TOKEN=your-api-token
CLOUDFLARE_ACCOUNT_ID=your-account-id
```

--------------------------------

### Example Blade View for OG Image

Source: https://github.com/spatie/laravel-og-image/blob/main/docs/basic-usage/getting-started.md

This is an example of a Blade view that can be referenced by the `<x-og-image>` component. It uses the data passed via the `data` attribute.

```blade
{{-- resources/views/og-image/post.blade.php --}}
<div class="w-full h-full bg-blue-900 text-white flex items-center justify-center p-16">
    <div>
        <h1 class="text-6xl font-bold">{{ $title }}</h1>
        <p class="text-2xl mt-4">by {{ $author }}</p>
    </div>
</div>
```

--------------------------------

### Customize Screenshot URL Resolution

Source: https://github.com/spatie/laravel-og-image/blob/main/resources/boost/skills/laravel-og-image/SKILL.md

Modify how the package resolves the URL for cached screenshots, for example, to include query parameters.

```php
OgImage::resolveScreenshotUrlUsing(function (Request $request) {
    return $request->fullUrl();
});
```

--------------------------------

### Resolve Screenshot URL Using Full URL

Source: https://github.com/spatie/laravel-og-image/blob/main/docs/advanced-usage/customizing-the-page-url.md

Use this to include all query parameters in the cached URL, ensuring each unique combination of path and query parameters gets its own screenshot. Register this in your AppServiceProvider.

```php
use Illuminate\\Http\\Request;
use Spatie\\OgImage\\Facades\\OgImage;

public function boot(): void
{
    OgImage::resolveScreenshotUrlUsing(function (Request $request) {
        return $request->fullUrl();
    });
}
```

--------------------------------

### Conditionally Include Specific Query Parameters

Source: https://github.com/spatie/laravel-og-image/blob/main/docs/advanced-usage/customizing-the-page-url.md

Customize URL resolution to selectively include only certain query parameters. This example includes the 'category' parameter if it exists.

```php
OgImage::resolveScreenshotUrlUsing(function (Request $request) {
    $url = $request->url();

    if ($request->has('category')) {
        $url .= '?category=' . $request->query('category');
    }

    return $url;
});
```

--------------------------------

### Configure Global Screenshot Settings

Source: https://github.com/spatie/laravel-og-image/blob/main/resources/boost/skills/laravel-og-image/SKILL.md

Set global configurations for image format, size, and disk using the `OgImage` facade in `AppServiceProvider`.

```php
use Spatie\OgImage\Facades\OgImage;

OgImage::format('webp')
    ->size(1200, 630)
    ->disk('s3', 'og-images');
```

--------------------------------

### Publish Configuration

Source: https://github.com/spatie/laravel-og-image/blob/main/README.md

Optionally publish the package configuration file to your application.

```bash
php artisan vendor:publish --tag="og-image-config"
```

--------------------------------

### Run Tests

Source: https://github.com/spatie/laravel-og-image/blob/main/README.md

Execute the package test suite.

```bash
composer test
```

--------------------------------

### Configure Screenshot Builder

Source: https://github.com/spatie/laravel-og-image/blob/main/docs/basic-usage/customizing-screenshots.md

Use `configureScreenshot()` to pass a closure that receives the `ScreenshotBuilder` instance for advanced customization. This allows setting options like `waitUntil`.

```php
use Spatie\LaravelScreenshot\Enums\WaitUntil;
use Spatie\LaravelScreenshot\ScreenshotBuilder;

OgImage::configureScreenshot(function (ScreenshotBuilder $screenshot) {
    $screenshot->waitUntil(WaitUntil::NetworkIdle0);
});
```

--------------------------------

### Configure Chrome/Chromium Path

Source: https://github.com/spatie/laravel-og-image/blob/main/docs/advanced-usage/troubleshooting.md

Set a custom path for the Chrome or Chromium binary if it's not in a standard location. This is done within a service provider.

```php
use Spatie\OgImage\Facades\OgImage;

OgImage::configureScreenshot(function ($screenshot) {
    $screenshot->setChromePath('/usr/bin/chromium');
});
```

--------------------------------

### Publish Laravel OG Image Configuration

Source: https://github.com/spatie/laravel-og-image/blob/main/docs/installation-setup.md

Optionally publish the configuration file to customize package settings like disk, path, dimensions, and cache settings.

```bash
php artisan vendor:publish --tag=og-image-config
```

--------------------------------

### Set Storage Disk and Path

Source: https://github.com/spatie/laravel-og-image/blob/main/docs/basic-usage/customizing-screenshots.md

Specify the storage disk and directory where OG images should be saved. The default is the 'public' disk in the 'og-images' directory.

```php
OgImage::disk('s3', 'og-images');
```

--------------------------------

### Implement ScreenshotDriver Interface

Source: https://github.com/spatie/laravel-og-image/blob/main/docs/advanced-usage/using-a-custom-screenshot-driver.md

Implement the ScreenshotDriver interface to create a custom screenshot driver. The generateScreenshot method should return the image as a binary string, while saveScreenshot should save it to a specified path. The ScreenshotOptions object provides access to configured options.

```php
use Spatie\LaravelScreenshot\Drivers\ScreenshotDriver;
use Spatie\LaravelScreenshot\ScreenshotOptions;

class MyScreenshotDriver implements ScreenshotDriver
{
    public function generateScreenshot(
        string $input,
        bool $isHtml,
        ScreenshotOptions $options,
    ): string {
        // Take the screenshot and return the image as a binary string.
        //
        // $input is a URL (when $isHtml is false) or an HTML string (when $isHtml is true).
        // $options contains width, height, type, deviceScaleFactor, etc.
    }

    public function saveScreenshot(
        string $input,
        bool $isHtml,
        ScreenshotOptions $options,
        string $path,
    ): void {
        // Take the screenshot and save it to $path.
    }
}
```

--------------------------------

### Configure Image Quality

Source: https://github.com/spatie/laravel-og-image/blob/main/docs/basic-usage/customizing-screenshots.md

Set the quality for JPEG and WebP images. This can be done in the `config/og-image.php` file or via `configureScreenshot()` for more granular control. A value of `null` uses the driver's default.

```php
// config/og-image.php
'quality' => 80,
```

--------------------------------

### Nginx Configuration for Direct Serving

Source: https://github.com/spatie/laravel-og-image/blob/main/docs/basic-usage/managing-caching-and-storage.md

Add this Nginx location block to serve generated OG images directly from disk, bypassing PHP for improved performance. It checks for the image file and serves it if found, otherwise falls back to PHP.

```nginx
location ~ ^/og-image/([a-f0-9]+\.(jpeg|jpg|png|webp)) {
    try_files /storage/og-images/$1 /index.php?$query_string;
}
```

--------------------------------

### Registering Custom Action

Source: https://github.com/spatie/laravel-og-image/blob/main/docs/advanced-usage/customizing-actions.md

After creating your custom action class, register it in your `config/og-image.php` file to replace the default action.

```php
'actions' => [
    'generate_og_image' => \App\Actions\CustomGenerateOgImageAction::class,
],
```

--------------------------------

### Set WaitUntil NetworkIdle0

Source: https://github.com/spatie/laravel-og-image/blob/main/docs/advanced-usage/troubleshooting.md

Configure the screenshot process to wait until the network is idle before taking the screenshot. This helps ensure all assets like CSS and web fonts are loaded.

```php
use Spatie\LaravelScreenshot\Enums\WaitUntil;

OgImage::configureScreenshot(function ($screenshot) {
    $screenshot->waitUntil(WaitUntil::NetworkIdle0);
});
```

--------------------------------

### Default Actions Configuration

Source: https://github.com/spatie/laravel-og-image/blob/main/docs/advanced-usage/customizing-actions.md

This configuration shows the default actions registered in the `og-image` config file. These actions handle various aspects of OG image generation and injection.

```php
        '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,
        ],
```

--------------------------------

### Preview OG Image with ?ogimage

Source: https://github.com/spatie/laravel-og-image/blob/main/docs/advanced-usage/troubleshooting.md

Append `?ogimage` to a URL to preview the OG image content and dimensions before it's screenshotted. This is useful for debugging rendering and asset loading.

```url
https://yourapp.com/blog/my-post?ogimage
```

--------------------------------

### Combine Cloudflare with Screenshot Configuration

Source: https://github.com/spatie/laravel-og-image/blob/main/docs/basic-usage/customizing-screenshots.md

You can combine `useCloudflare()` with `configureScreenshot()` to leverage Cloudflare's rendering while applying custom screenshot builder settings.

```php
OgImage::useCloudflare(
        apiToken: env('CLOUDFLARE_API_TOKEN'),
        accountId: env('CLOUDFLARE_ACCOUNT_ID'),
    )
    ->configureScreenshot(function (ScreenshotBuilder $screenshot) {
        $screenshot->waitUntil(WaitUntil::NetworkIdle0);
    });
```

--------------------------------

### Generate OG Images with Artisan Command

Source: https://github.com/spatie/laravel-og-image/blob/main/docs/basic-usage/pre-generating-images.md

Use the Artisan command to pre-generate OG images for multiple URLs simultaneously. This is useful for bulk generation.

```bash
php artisan og-image:generate https://yourapp.com/page1 https://yourapp.com/page2
```

--------------------------------

### Use Cloudflare Browser Rendering

Source: https://github.com/spatie/laravel-og-image/blob/main/docs/basic-usage/customizing-screenshots.md

Configure the package to use Cloudflare's Browser Rendering service instead of the default Browsershot. You need to provide your Cloudflare API token and account ID.

```php
OgImage::useCloudflare(
    apiToken: env('CLOUDFLARE_API_TOKEN'),
    accountId: env('CLOUDFLARE_ACCOUNT_ID'),
);
```

--------------------------------

### Registering a Fallback OG Image

Source: https://github.com/spatie/laravel-og-image/blob/main/docs/basic-usage/defining-fallback-images.md

Register a closure in `AppServiceProvider` to define a fallback OG image. The closure receives the current request and should return a view.

```php
use Illuminate\Http\Request;
use Spatie\OgImage\Facades\OgImage;

public function boot(): void
{
    OgImage::fallbackUsing(function (Request $request) {
        return view('og-image.fallback', [
            'title' => config('app.name'),
        ]);
    });
}
```

--------------------------------

### Configure Storage Disk

Source: https://github.com/spatie/laravel-og-image/blob/main/docs/basic-usage/managing-caching-and-storage.md

Set the storage disk and directory for generated OG images using the OgImage facade. This is useful for directing images to specific storage locations like S3.

```php
use Spatie\OgImage\Facades\OgImage;

OgImage::disk('s3', 'og-images');
```

--------------------------------

### Using an Existing Image URL

Source: https://github.com/spatie/laravel-og-image/blob/main/docs/basic-usage/getting-started.md

Provide an existing image URL using the `url` attribute if you prefer to use a pre-existing image instead of generating one. The package will use this URL for the meta tags.

```blade
@if($post->og_image)
    <x-og-image :url="$post->og_image" />
@else
    <x-og-image view="og-image.post" :data="['title' => $post->title]" />
@endif
```

--------------------------------

### Publish OG Image Views

Source: https://github.com/spatie/laravel-og-image/blob/main/docs/advanced-usage/customizing-the-screenshot-layout.md

Publish the OG image views to customize the screenshot layout. This makes `screenshot.blade.php` available for modification.

```bash
php artisan vendor:publish --tag=og-image-views
```

--------------------------------

### Register Custom Screenshot Driver

Source: https://github.com/spatie/laravel-og-image/blob/main/docs/advanced-usage/using-a-custom-screenshot-driver.md

Register your custom screenshot driver with the OgImage facade. This tells the package to use your driver for generating screenshots.

```php
use Spatie\OgImage\Facades\OgImage;

OgImage::useDriver(new MyScreenshotDriver());
```

--------------------------------

### Extending GenerateOgImageAction

Source: https://github.com/spatie/laravel-og-image/blob/main/docs/advanced-usage/customizing-actions.md

Create a custom action class by extending the default `GenerateOgImageAction` and overriding the `generateImage` method to implement custom image generation logic.

```php
namespace App\Actions;

use Spatie\OgImage\Actions\GenerateOgImageAction;

class CustomGenerateOgImageAction extends GenerateOgImageAction
{
    protected function generateImage(array $cached, string $path, $disk): void
    {
        // Custom generation logic...
    }
}
```

--------------------------------

### Default Laravel OG Image Configuration

Source: https://github.com/spatie/laravel-og-image/blob/main/docs/installation-setup.md

This is the content of the published configuration file, showing default settings for disk, path, dimensions, format, quality, preview parameter, cache settings, and custom actions.

```php
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,
    ],

];
```

--------------------------------

### Programmatically Generate OG Image for a URL

Source: https://github.com/spatie/laravel-og-image/blob/main/docs/basic-usage/pre-generating-images.md

Generate an OG image for a specific URL programmatically. This method fetches the page, finds the OG image template, takes a screenshot, and saves it.

```php
use Spatie\OgImage\Facades\OgImage;

$imageUrl = OgImage::generateForUrl('https://yourapp.com/blog/my-post');
```

--------------------------------

### Dispatch Job to Generate OG Image After Content Publish

Source: https://github.com/spatie/laravel-og-image/blob/main/docs/basic-usage/pre-generating-images.md

Dispatch a queued job to generate an OG image after content is published. This ensures the image is ready before it's requested by crawlers.

```php
use Spatie\OgImage\Facades\OgImage;

class PublishPostAction
{
    public function execute(Post $post): void
    {
        // ... publish logic ...

        dispatch(function () use ($post) {
            OgImage::generateForUrl($post->url);
        });
    }
}
```

--------------------------------

### Specifying Image Format

Source: https://github.com/spatie/laravel-og-image/blob/main/docs/basic-usage/getting-started.md

You can specify the desired image format (e.g., 'webp') using the `format` attribute on the `<x-og-image>` component. By default, images are generated as JPEG.

```blade
<x-og-image format="webp">
    <div class="w-full h-full bg-gradient-to-r from-purple-500 to-pink-500 text-white flex items-center justify-center">
        <h1 class="text-6xl font-bold">{{ $title }}</h1>
    </div>
</x-og-image>
```

--------------------------------

### Generated Meta Tags and HTML Structure

Source: https://github.com/spatie/laravel-og-image/blob/main/docs/basic-usage/getting-started.md

The package automatically injects `og:image`, `twitter:image`, and `twitter:card` meta tags into the `<head>`. It also outputs a hidden `<template>` tag in the body containing the image content.

```html
<head>
    <!-- your existing head content -->
    <meta property="og:image" content="https://yourapp.com/og-image/a1b2c3d4e5f6.jpeg">
    <meta name="twitter:image" content="https://yourapp.com/og-image/a1b2c3d4e5f6.jpeg">
    <meta name="twitter:card" content="summary_large_image">
</head>
<body>
    <template data-og-image>
        <div class="w-full h-full bg-blue-900 text-white flex items-center justify-center">
            <h1 class="text-6xl font-bold">My Post Title</h1>
        </div>
    </template>
</body>
```

--------------------------------

### Set Global Image Size

Source: https://github.com/spatie/laravel-og-image/blob/main/docs/basic-usage/customizing-screenshots.md

Change the default dimensions for all OG images generated by the package. This is typically done in your AppServiceProvider.

```php
use Spatie\OgImage\Facades\OgImage;

public function boot(): void
{
    OgImage::size(1200, 630);
}
```

--------------------------------

### Set Image Format

Source: https://github.com/spatie/laravel-og-image/blob/main/docs/basic-usage/customizing-screenshots.md

Change the default image format from JPEG to PNG or WebP. This method can be called in your AppServiceProvider.

```php
OgImage::format('webp');
```

--------------------------------

### Customizing Fallback with Request Data

Source: https://github.com/spatie/laravel-og-image/blob/main/docs/basic-usage/defining-fallback-images.md

Utilize request data within the fallback closure to dynamically set the OG image title and URL. This allows for personalized fallbacks based on route parameters or other request attributes.

```php
OgImage::fallbackUsing(function (Request $request) {
    $title = $request->route('post')?->title ?? config('app.name');

    return view('og-image.fallback', [
        'title' => $title,
        'url' => $request->url(),
    ]);
});
```

--------------------------------

### Define OG Image Template

Source: https://github.com/spatie/laravel-og-image/blob/main/README.md

Use the Blade component to define the HTML structure for your Open Graph image.

```blade
<x-og-image>
    <div class="w-full h-full bg-blue-900 text-white flex items-center justify-center">
        <h1 class="text-6xl font-bold">{{ $post->title }}</h1>
    </div>
</x-og-image>
```

--------------------------------

### Conditional Fallback Image

Source: https://github.com/spatie/laravel-og-image/blob/main/resources/boost/skills/laravel-og-image/SKILL.md

Conditionally skip the fallback OG image for specific requests by returning `null` from the `fallbackUsing` closure.

```php
OgImage::fallbackUsing(function (Request $request) {
    if ($request->routeIs('admin.*')) {
        return null;
    }

    return view('og-image.fallback', ['title' => config('app.name')]);
});
```

--------------------------------

### Clear Generated OG Images

Source: https://github.com/spatie/laravel-og-image/blob/main/docs/basic-usage/clearing-generated-images.md

Run this artisan command to delete all generated OG images from the configured disk path. Images will be regenerated on the next request or cache refresh.

```bash
php artisan og-image:clear
```

--------------------------------

### Custom OG Image Format

Source: https://github.com/spatie/laravel-og-image/blob/main/resources/boost/skills/laravel-og-image/SKILL.md

Change the image format (e.g., 'webp') from the default JPEG by using the `format` attribute on the `<x-og-image>` component.

```blade
<x-og-image format="webp">
    <div>WebP format</div>
</x-og-image>
```

--------------------------------

### Skipping Fallback for Specific Routes

Source: https://github.com/spatie/laravel-og-image/blob/main/docs/basic-usage/defining-fallback-images.md

Return `null` from the fallback closure to prevent OG image generation for specific requests, such as those matching admin routes.

```php
OgImage::fallbackUsing(function (Request $request) {
    if ($request->routeIs('admin.*')) {
        return null;
    }

    return view('og-image.fallback', [
        'title' => config('app.name'),
    ]);
});
```

--------------------------------

### Referencing a Blade View for OG Image Content

Source: https://github.com/spatie/laravel-og-image/blob/main/docs/basic-usage/getting-started.md

Instead of inline HTML, you can specify a Blade view using the `view` attribute and pass data to it via the `data` attribute. This is useful for reusable or complex layouts.

```blade
<x-og-image view="og-image.post" :data="['title' => $post->title, 'author' => $post->author->name]" />
```

--------------------------------

### Fallback View Structure

Source: https://github.com/spatie/laravel-og-image/blob/main/docs/basic-usage/defining-fallback-images.md

The fallback view should be a simple Blade file containing only the necessary HTML for the OG image. It inherits the page's head, making CSS, fonts, and Vite assets available.

```blade
{{-- resources/views/og-image/fallback.blade.php --}}
<div class="w-full h-full bg-blue-900 text-white flex items-center justify-center p-16">
    <h1 class="text-6xl font-bold">{{ $title }}</h1>
</div>
```

--------------------------------

### Set Redirect Cache Max Age

Source: https://github.com/spatie/laravel-og-image/blob/main/docs/basic-usage/managing-caching-and-storage.md

Configure the cache duration for OG image redirects in the `config/og-image.php` file. This controls the `Cache-Control: max-age` header, allowing for longer caching periods when using content-hashed URLs.

```php
// config/og-image.php
'redirect_cache_max_age' => 60 * 60 * 24 * 7, // 7 days
```

--------------------------------

### Override Action Classes

Source: https://github.com/spatie/laravel-og-image/blob/main/resources/boost/skills/laravel-og-image/SKILL.md

Customize the action classes used by the package by modifying the `actions` configuration in `config/og-image.php`.

```php
'actions' => [
    'generate_og_image' => \App\Actions\CustomGenerateOgImageAction::class,
    'inject_og_image_fallback' => \Spatie\OgImage\Actions\InjectOgImageFallbackAction::class,
    'render_og_image_screenshot' => \Spatie\OgImage\Actions\RenderOgImageScreenshotAction::class,
],
```

--------------------------------

### Increase Lock Timeout

Source: https://github.com/spatie/laravel-og-image/blob/main/docs/advanced-usage/troubleshooting.md

Adjust the lock timeout duration in the configuration file if you encounter timeout issues when generating large images or on slow servers.

```php
// config/og-image.php
'lock_timeout' => 120,
```

--------------------------------

### HTML Output for OG Image Generation

Source: https://github.com/spatie/laravel-og-image/blob/main/docs/basic-usage/how-it-works.md

This HTML structure is outputted by the Blade component and middleware. The meta tags point to the generated image URL, and the template tag contains the HTML content for the OG image. Visitors do not see the template tag.

```html
<head>
    <!-- your existing head content -->
    <meta property="og:image" content="https://yourapp.com/og-image/a1b2c3d4e5f6.jpeg">
    <meta name="twitter:image" content="https://yourapp.com/og-image/a1b2c3d4e5f6.jpeg">
    <meta name="twitter:card" content="summary_large_image">
</head>
<body>
    <template data-og-image>
        <div class="...">My Post Title</div>
    </template>
</body>
```

--------------------------------

### Set Per-Component Image Size

Source: https://github.com/spatie/laravel-og-image/blob/main/docs/basic-usage/customizing-screenshots.md

Override the global image dimensions for a specific OG image component. These dimensions take precedence over the global configuration.

```blade
<x-og-image :width="800" :height="400">
    <div>This OG image will be 800×400</div>
</x-og-image>
```

--------------------------------

### Custom OG Image Dimensions

Source: https://github.com/spatie/laravel-og-image/blob/main/resources/boost/skills/laravel-og-image/SKILL.md

Override the default OG image dimensions (1200x630) by specifying `:width` and `:height` attributes on the `<x-og-image>` component.

```blade
<x-og-image :width="800" :height="400">
    <div>This OG image will be 800x400</div>
</x-og-image>
```
Tokens:
Raw