Generate awesome open graph images with Open Graphy

The Open Graph protocol, initially introduced by Facebook in 2010, is a set of technologies that allows web developers to control how their web pages are represented when shared on social media platforms. By enabling your pages to become "rich" objects in a social graph, Open Graph meta tags dictate the title, description, image, and other vital information that appears in social media previews. This is where Open Graphy steps in: it's a neat Laravel package designed to generate these essential Open Graph images for your application dynamically. Open Graphy helps you to create social cards on the fly, either leveraging its intuitive default templates or allowing you to create your own, ensuring your content always makes a striking impression across social networks.

Main Features

Easily generate open graph images for your website.
Add a title, an image, and your logo to the Open Graph image.
Add a screenshot of the page inside the open graph image to show the preview of the page.
5 different default templates to choose from, stripes, nodes, sunny, verticals and strings.
Customize the colours and styles of the templates.
Cache the generated images.
Create your own template if you want.

Note: Open Graphy requires the Chrome or Chromium browser to be installed on your server to render the images. The README file provides instructions on how to install this on Ubuntu/Debian and MacOS.

Assuming you already have Chrome or Chromium installed, you can then install this package using Composer:

composer require saasykit/laravel-open-graphy

You can also publish the config so you can customize further:

php artisan vendor:publish --tag="open-graphy-config"

Finally, you add the following component to your Blade template in the <head></head> tags:

<x-open-graphy::links title="Laravel News Open Graphy Demo" template="sunny" />

This will output the following:

<meta property="og:image" content="{URL}">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
 
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="{URL}">