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) Getting started - [ 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. [ Using an existing image URL ](#content-using-an-existing-image-url) 5. [ Specifying the image format ](#content-specifying-the-image-format) 6. [ Previewing your OG image ](#content-previewing-your-og-image) 7. [ 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. Using an existing image URL ----------------------------------------------------------------------------------------------------------------------------------------- If you already have an OG image URL (for example, a custom designed image from a CMS), you can pass it directly using the `url` attribute: ``` @if($post->og_image) @else @endif ``` When a `url` is provided, the package skips screenshot generation entirely and injects the given URL in the `og:image` and `twitter:image` meta tags. This is useful when you want the generated OG image as a fallback, but prefer a hand crafted image when one is available. 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 A good match? ------------- ### What we do best - All things Laravel - Custom frontend components - Building APIs - AI-powered features - Simplifying things - Clean solutions - Integrating services ### Not our cup of tea - WordPress themes - Cutting corners - Free mockups to win a job - "Just execute the briefing" In short: we'd like to be a **substantial part** of your project. [ Get in touch via email ](mailto:info@spatie.be?subject=A%20good%20match%21&body=Tell%20us%20as%20much%20as%20you%20can%20about%0A-%20your%20online%20project%0A-%20your%20planning%0A-%20your%20budget%0A-%20%E2%80%A6%0A%0AAnything%20that%20helps%20us%20to%20start%20straightforward%21)