Laravel 11 - OpenGraph
Laravel 11 - OpenGraph
In this tutorial, we'll implement OpenGraph in Laravel 11, which enhances social media link previews, improving visibility, engagement, and sharing of your content.
If you're a video person, feel free to skip the post and check out the video instead!
Quick Overview
In this guide, we’ll walk through integrating OpenGraph functionality in a Laravel 11 project. We’ll start by setting up a new Laravel 11 app with MySQL, then install the shweshi/opengraph package to handle OpenGraph metadata. You'll learn how to create routes that fetch and display OpenGraph data, making it easy to control how your pages appear when shared on social media. We’ll also explore how to retrieve extended metadata such as audio, video, and music tags, along with support for language-specific data. Plus, we’ll cover how to tweak your PHP settings to avoid execution timeouts. By the end, your Laravel 11 app will be fully equipped to serve rich link previews across platforms like Facebook, Twitter, and LinkedIn.
Step # 1 : Set Up a New Laravel Project or Use One You Already Have.
To begin working with OpenGraph, you can either spin up a new Laravel 11 project or use one that’s already on your machine. If you’ve got Laravel installed globally, simply run.
laravel new Opengraph
Or, if you prefer using Composer, you can use this command instead.
composer create-project laravel/laravel --prefer-dist Opengraph
During setup, make the following selections when prompted.
- Starter Kit: Select None.
- Testing Framework: Choose Pest.
- Database Selection: Go with MySQL.
- Run Migrations: Type yes to apply the default migrations.
Once done, you’ll have a new Laravel 11 project named Opengraph, ready to go, configured with MySQL as the database and Pest set up for testing.
Step # 2 : Open the Project Directory in Your Terminal.
Now that your project is set up, open your terminal (e.g., Git Bash or CMD) and move into your Laravel project’s root folder. This lets you run Laravel commands from within the app’s directory. For example, run
cd c:xampp/htdocs/Opengraph
This changes your working directory to the Laravel project folder so you can start executing Artisan commands, create routes, run migrations, and more all from within the project context.
Step # 3 : Install the OpenGraph Integration Package.
To make use of OpenGraph meta tags, you need to install the shweshi/opengraph package. This package helps generate OpenGraph data used by social media platforms for previews. From your terminal, run.
composer require "shweshi/opengraph"
This command installs the OpenGraph package and any required dependencies. Once installed, the package makes it easy to fetch OpenGraph metadata, allowing you to control how your content appears when shared on sites like Facebook, Twitter, and LinkedIn. It also supports different languages and gives you access to rich metadata elements.
Step # 4 : Add a Route to Fetch OpenGraph Data.
The next step is to define a route in your web.php file that will allow you to test if the OpenGraph package is working correctly. Open routes/web.php and add this code.
Route::get('/openGraph', function () {
$data = OpenGraph::fetch("https://unsplash.com/");
dd($data);
});
This route sends a request to Unsplash and dumps the metadata response using Laravel's dd() function. It's a quick way to verify that the data is being pulled correctly from the given URL.
Step # 5 : Run the App and See It in Action.
With your route set up, it’s time to run the Laravel development server so we can test our implementation. Start the server by running.
php artisan serve
Then go to the following URL in your web browser: http://127.0.0.1:8000/openGraph. This triggers the route you just created and displays the OpenGraph metadata for the Unsplash website.
Fetch Extended Metadata or Use Additional Parameters
By default, the fetch() method retrieves basic OpenGraph fields like the title, image, and description. But if you want to extract more detailed metadata like video, audio, music, or even Twitter-specific tags you can pass true as the second argument.
Route::get('/openGraph', function () {
$data = OpenGraph::fetch("https://unsplash.com/", true);
dd($data);
});
You can also specify the language of the metadata by passing a third argument. This sets the Accept-Language header on the request, and if the website supports it, metadata will be returned in that language. Here’s how it looks.
Route::get('/openGraph', function () {
$data = OpenGraph::fetch("https://unsplash.com/", true, 'es');
dd($data);
});
Maximum Execution Time Exceeded
You might encounter a common PHP error.
Maximum execution time of 60 seconds exceeded
This error message indicates that your PHP script exceeded the maximum time limit allowed for execution. In other words, the process took too long to complete, and PHP stopped it to avoid server overload. This can often happen when you're trying to fetch large amounts of metadata or making requests to slower websites. To fix this issue, you’ll need to increase the execution time allowed for PHP scripts. This setting is controlled through your php.ini file the main configuration file for PHP. The location of the php.ini file varies depending on the development environment you’re using. Here’s how to find it based on the most common setups.
Local Development (e.g., XAMPP, WAMP, MAMP):
- For XAMPP: C:\xampp\php\php.ini
- For WAMP: C:\wamp64\bin\php\phpX.X.X\php.ini
- For MAMP: /Applications/MAMP/bin/php/phpX.X.X/conf/php.ini
Once you open the file, search for these two lines.
;max_execution_time = 30
;max_input_time = 30
These lines control how long a PHP script is allowed to run and how long PHP will wait for input data. You’ll notice they are likely commented out by default that’s what the semicolon (;) at the beginning of each line means. In order to apply custom settings, you need to uncomment these lines by simply removing the semicolon at the start. Next, increase the values to allow your scripts more breathing room. Here’s how your updated lines should look.
max_execution_time = 120 ; Increase the maximum execution time to 120 seconds
max_input_time = 120 ; Increase the maximum input time to 120 seconds
These adjustments ensure that the script has sufficient time to complete the process, especially when working with large URLs or retrieving extensive metadata. Once you've tested the OpenGraph functionality, you're all set to integrate rich meta tags into your Laravel application and enhance social media sharing.
Conclusion
By completing this walkthrough, you've now added OpenGraph capabilities to your Laravel 11 project, making it easier to manage how your content looks when shared across social platforms. Your application can fetch and present metadata from any URL, helping you create rich previews on sites like Facebook, Twitter, and LinkedIn. With the shweshi/opengraph package in place, you’ve got a solid foundation for handling social media metadata. You can now fine-tune the output, extend the data being fetched, or even build on this setup with additional social sharing tools.
Need more details? Be sure to check out the official package documentation for deeper insights.
Share this with friends!
To engage in commentary, kindly proceed by logging in or registering
Subscribe to Our Newsletter
Stay ahead of the curve! Join our newsletter to see what everyone’s talking about.
Continue with Google
0 Comments