Laravel 12 - How to Fetch OpenGraph Meta Data from Any URL
Laravel 12 - How to Fetch OpenGraph Meta Data from Any URL
In this tutorial, we’ll fetch OpenGraph meta data from any URL using the shweshi/opengraph package in Laravel 12. Easily get the title, description, and image for link previews.
If you're a video person, feel free to skip the post and check out the video instead!
Quick Overview
This guide walks you through integrating OpenGraph functionality in a Laravel project. It covers the setup of a new Laravel 12 project with MySQL, installing the shweshi/opengraph package, and creating routes to fetch OpenGraph data for social media sharing. You will also configure the system to retrieve essential metadata, including extended data such as audio, video, and music metadata. After testing the setup using Laravel's development server, you can pass optional parameters for fetching extended metadata and language-specific data. If necessary, you can also adjust PHP settings to prevent execution time errors, ensuring smooth data retrieval from social media platforms like Facebook, Twitter, and LinkedIn. This process allows you to easily customize how your content appears when shared on various social platforms.
Step # 1 : Set Up a New Laravel Project.
You can either use an existing Laravel project or create a new one, based on your current setup. To create a new project using the Laravel installer, run.
laravel new Opengraph
Or, if you prefer using Composer.
composer create-project laravel/laravel --prefer-dist Opengraph
During the setup, make the following selections to match the development stack.
- Starter Kit: Select None to keep the installation minimal and free of frontend scaffolding.
- Database: Choose MySQL as the default database for your application.
- Run Migrations: Type Yes when prompted to run the default Laravel migrations and set up your database schema.
- Npm install && npm run dev: Type Yes to install frontend dependencies and compile assets using Laravel Mix.
This setup gives you a fresh Laravel 12 project with MySQL configured, migrations applied, and assets compiled, ready for custom development. It provides a clean foundation to build and scale your application efficiently, ensuring a solid starting point for both backend and frontend functionality.
Step # 2 : Access the project.
Open your terminal (e.g., Git Bash) and navigate to the root directory of your Laravel project. This will allow you to interact with your project via command-line commands. For example, if you're using Git Bash, run.
cd c:xampp/htdocs/Opengraph
This command changes the directory to the project folder, giving you access to your Laravel files and allowing you to run Artisan commands, migrations, or other tasks directly from the terminal.
Step # 3 : Install the OpenGraph Package.
To integrate OpenGraph functionality, install the shweshi/opengraph package. This package generates OpenGraph meta tags for social media sharing. Run the following command in your project’s root directory.
composer require "shweshi/opengraph"
This command will download and install the package and its dependencies, making it available for use in your Laravel application. The shweshi/opengraph package simplifies the process of generating OpenGraph meta tags, allowing you to easily customize how your content appears when shared on social media platforms like Facebook, Twitter, and LinkedIn. Additionally, it supports fetching metadata in different languages and provides detailed insights into the content's OpenGraph data.
Step # 4 : Create a Route.
Define a route to fetch OpenGraph data for a given URL. This will allow you to test the integration and inspect the data retrieved. Add the following code to your web.php routes file.
Route::get('/openGraph', function () {
$data = OpenGraph::fetch("https://facebook.com/");
dd($data);
});
This route will fetch the OpenGraph data from the provided URL (in this case, Facebook) and dump the result using dd() for you to inspect. It allows you to verify that OpenGraph meta tags are being correctly retrieved and parsed.
Step # 5 : It's time to test.
Start the Laravel development server to test the OpenGraph functionality. Run the following command.
php artisan serve
Once the server is running, visit the following URL in your browser to check the OpenGraph data.
127.0.0.1:8000/openGraph
This will trigger the route you created in Step # 4 and display the OpenGraph data.
You can pass an optional true or false parameter with the URL. When set to false, it will fetch only the basic metadata, including title, description, and image. If set to true, it will also retrieve additional metadata, such as audio, video, music, and Twitter meta tags, providing a more comprehensive set of information. Update your route like this.
Route::get('/openGraph', function () {
$data = OpenGraph::fetch("https://facebook.com/", true);
dd($data);
});
Additionally, you can specify the language by passing it as the third argument. This will be used as the Accept-Language header for the request, ensuring that the metadata is returned in the specified language, if available.
Route::get('/openGraph', function () {
$data = OpenGraph::fetch("https://facebook.com/", true, 'en');
dd($data);
});
If you run into the Maximum execution time of 60 seconds exceeded error, you will need to increase the PHP script execution time by editing the php.ini file. This file is responsible for configuring various PHP settings, including the execution time limit for scripts. The location of the php.ini file depends on your development environment, so here's how to find it.
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 located, look for the following lines.
;max_execution_time = 30
;max_input_time = 30
These lines are responsible for controlling the maximum execution time and input processing time. They are usually commented out by default (indicated by the semicolon ; at the beginning of each line). To modify the values. Uncomment them by removing the semicolon (;) and adjust the values as needed. By doing so, you will enable the changes to take effect.
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 following this guide, you've successfully integrated OpenGraph functionality into your Laravel application, enabling the generation of OpenGraph meta tags for improved social media sharing. Your app can now fetch and display OpenGraph data from URLs, allowing you to enhance the way your content appears when shared on platforms like Facebook, Twitter, and LinkedIn. With the OpenGraph package in place, you're ready to customize how your Laravel app handles metadata, providing a more engaging experience for users. Moving forward, you can expand this integration by adding more advanced features, fine-tuning the fetched data to fit your app’s needs, or even integrating additional social media APIs for further enhancement.
For more details, refer to the OpenGraph package documentation.
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