Hussain Afeef

As I migrated my blog from Nova to Filament, I realized that I needed to add a better Open Graph image to improve the visibility and shareability of my content. After some research, I developed a package that simplifies the process of creating custom Open Graph images for anyone facing the same challenge. In this article, I will guide you through the package and show you how to customize it to suit your specific requirements. This article is ideal for bloggers, developers, and website owners who want to optimize their content for social media and search engines.

The package was created using Spatie Browsershot, which requires Puppeteer to function. Therefore, you will need to install Puppeteer before using the package. For instructions on how to install it, you can refer to the Spatie Browsershot documentation requirements.

Suppose we want to add an Open Graph image to each post on our blog. For the purposes of this article, let's assume that our post model has a title, a unique slug, content, author's name, and an Open Graph image URL. Here is our post migration schema:

Schema::create('posts', function (Blueprint $table) {
    $table->id();
    $table->string('title');
    $table->string('slug')->unique();
    $table->string('author_name');
    $table->text('content')->nullable();
    $table->string('og_image_url')->nullable();
    $table->timestamps();
});

Note: by default the package will look for og_image_url field, however you can customize this behavior. Refer to documentation for more information.

The first thing we need to do is install the package. Use the following Composer command:

composer require ibnnajjaar/graphify

Then, we are going to publish the configuration file using the following Artisan command:

php artisan vendor:publish --tag="graphify-config"

Now we are going to modify our post model as required.

namespace App\Models;

use Illuminate\Database\Eloquent\Model;
use Ibnnajjaar\Graphify\Support\HasGraphify;
use Ibnnajjaar\Graphify\Support\GraphifyTrait;

class Post extends Model implements HasGraphify
{
    use GraphifyTrait;
}

That is pretty much it. Now, the post should generate an OG image every time we create one. To include the generated image in our blog meta tags, we are going to add the following meta tags:

<meta property="og:image" content="{{ $post->graphify_image }}">
<meta name="twitter:image" content="{{ $post->graphify_image }}">

Of course, there are customizations available. However, I have just demonstrated the easiest and shortest way to accomplish OG image generation. Some of the customizations you may want are listed below. All these customizations and features available in this package are documented here:

Customize default OG image URL using getOpenGraphImageUrlField()
Manually trigger image generation using $yourModel->generateGraphify();
Add a fallback image
Select a custom disk for storing OG images
Select a custom directory for storing OG images in the given disk
Customize the view used to render OG image
Customize the file name of the OG image
Define which fields that will auto trigger an update of OG image when changed.
Take control of the save process to customize how the OG image is saved, for example, to save it in Spatie media library collection.
Turn on and off the OG image creation events

In conclusion, the Graphify package simplifies the process of creating custom Open Graph images, which can improve the visibility and shareability of your blog posts on social media.

Adding a Custom Open Graph Image to Posts