Introduction
When creating an SEO-friendly application, setting dynamic titles and meta descriptions for your pages can greatly improve your site’s visibility and user experience. The Laravel framework along with its templating engine, Blade, provides an elegant solution to manage these elements dynamically. In this tutorial, we will explore various ways to set dynamic page titles and meta descriptions using Blade in a Laravel application.
Basic Dynamic Titles and Meta Descriptions
To begin with, ensure that you have a Laravel project setup. Following is a step-by-step guide to set up dynamic page titles and meta tags.
Step 1 – Setting up a layout file:
<!-- resources/views/layouts/app.blade.php -->
<!DOCTYPE html>
<html>
<head>
<title>{{ $title ?? 'Default Title' }}</title>
<meta name="description" content="{{ $metaDescription ?? 'Default description' }}">
<!-- Other head elements -->
</head>
<body>
@yield('content')
</body>
</html>
Step 2 – Passing values from a route:
In your web.php:
Route::get('/welcome', function () {
$data = [
'title' => 'Welcome to SlingAcademy.com',
'metaDescription' => 'Explore the vast collection of our products and enjoy a unique shopping experience.'
];
return view('welcome', $data);
});
Now, the welcome.blade.php will inherit the title and meta description defined in the route. Your welcome.blade.php:
@extends('layouts.app')
@section('content')
<!-- Your content here -->
@endsection With this basic setup, your page title and meta descriptions are dynamic and contingent on what is passed in from your routes.
Utilizing Controllers
To advance our implementation, you might want to define the title and meta within a controller instead of directly in the route.
Example of setting dynamic titles and meta in a Controller
class PageController extends Controller
{
public function show($id)
{
$page = Page::findOrFail($id);
return view('pages.show', [
'title' => $page->title,
'metaDescription' => $page->meta_description
]);
}
}
Using Middleware for Default Values
If you want to set a default page title and meta description across your entire application, Middleware is a useful approach.
Creating Middleware:
php artisan make:middleware SetDefaultMeta
In app/Http/Middleware/SetDefaultMeta.php:
public function handle($request, Closure $next)
{
View::share('title', 'Your Default Page Title');
View::share('metaDescription', 'Your default meta description for each page.');
return $next($request);
}
Don’t forget to register your newly created Middleware in app/Http/Kernel.php
Advanced – Setting Meta Tags with Components
Laravel 8 introduces the concept of components which can be leveraged to manage inclusion of meta tags.
Creating a Meta Component:
php artisan make:component MetaTag
In resources/views/components/meta-tag.blade.php:
<title>{{ $title }}</title>
<meta name="description" content="{{ $description }}">
Utilizing the Meta Component in your layout:
<x-meta-tag :title="$title" :description="$metaDescription" />
This approach enhances reusability and organization of your meta tags.
SEO Packages for Meta Management
There are Laravel packages, like SEOTools, that provide more advanced methods for managing SEO needs including setting dynamic meta tags.
Installing SEOTools:
composer require artesaos/seotools
Utilizing SEOTools:
use SEOMeta;
public function show($id)
{
$page = Page::findOrFail($id);
SEOMeta::setTitle($page->title);
SEOMeta::setDescription($page->meta_description);
return view('pages.show');
}
The package automatically sets the appropriate tags in your Blade template.
Conclusion
Setting dynamic page titles and meta descriptions in Laravel Blade is a flexible process that can be tailored to your application’s needs. Whether using basic techniques, middleware, components, or specialized packages, you can greatly improve your application’s SEO and user experience with minimal effort.
