Getting started | 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)  Basic-usage  Getting started

 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)

 Getting started
===============

###  On this page

1. [ The Blade component ](#content-the-blade-component)
2. [ Migrating from manual meta tags ](#content-migrating-from-manual-meta-tags)
3. [ Using a Blade view ](#content-using-a-blade-view)
4. [ Specifying the image format ](#content-specifying-the-image-format)
5. [ Previewing your OG image ](#content-previewing-your-og-image)
6. [ Design tips ](#content-design-tips)

The Blade component
-----------------------------------------------------------------------------------------------------------------

Place the `` component anywhere in your Blade view:

```

        {{ $post->title }}

```

The component outputs a hidden `` tag (natively invisible in browsers) in the page body. The package middleware automatically injects the `og:image`, `twitter:image`, and `twitter:card` meta tags into the ``:

```

            My Post Title

```

The image URL contains a hash of your HTML content. When the content changes, the hash changes, so crawlers pick up the new image automatically.

The meta tags always point to `/og-image/{hash}.jpeg`. When that URL is first requested, the package generates the screenshot and serves it directly. The response includes `Cache-Control` headers, so CDNs like Cloudflare cache the image automatically.

Migrating from manual meta tags
-----------------------------------------------------------------------------------------------------------------------------------------------------

If your views already have `og:image`, `twitter:image`, or `twitter:card` meta tags, remove them. The package handles these automatically. Keep any other OG meta tags you have (`og:title`, `og:description`, `og:type`, `article:published_time`, etc.). The package only manages the image-related tags.

Using a Blade view
--------------------------------------------------------------------------------------------------------------

Instead of writing your OG image HTML inline, you can reference a Blade view:

```

```

The view receives the `data` array as its variables:

```
{{-- resources/views/og-image/post.blade.php --}}

        {{ $title }}
        by {{ $author }}

```

This is useful when you reuse the same OG image layout across multiple pages or when the template is complex enough that you want it in its own file.

Specifying the image format
-----------------------------------------------------------------------------------------------------------------------------------------

By default, images are generated as JPEG. You can specify a different format:

```

        {{ $title }}

```

Previewing your OG image
--------------------------------------------------------------------------------------------------------------------------------

Append `?ogimage` to any page URL to see exactly what will be screenshotted. This renders just the template content at the configured dimensions (1200×630 by default), using the page's full `` with all CSS and fonts.

Design tips
-----------------------------------------------------------------------------------------

- Design for 1200×630 pixels (the default size)
- Use `w-full h-full` on your root element to fill the entire viewport
- Use `flex` or `grid` for layout
- Keep text large, since it will be viewed as a thumbnail
- Preview your designs by visiting the page URL with `?ogimage` appended