Un tutoriel pour générer dynamiquement les éléments <title> et <meta> pour le SEO en utilisant le package cagilo/cagilo dans un projet Laravel
Un meta tag (ou métaélément, ou élément meta ou encore balise meta) est une information qui porte sur la nature et le contenu d'une page web. On l'insère dans l'en-tête <header>
d'une page à travers la balise <meta>
:
<meta name="propriété" content="valeur" />
Les balises <meta>
jouent un rôle essentiel sur le référencement organique (SEO) d'une page web sur les moteurs de recherche et sa présentation sur les médias sociaux (Facebook, Twitter, LinkedIn, ...). Ils permettent de renseigner les informations telles que le titre, la description, l'URL canonique, l'image, les métadonnées Open Graph, ... d'une page web.
Nous voulons voir comment insérer dynamiquement les balises SEO <title>
et <meta>
(description et Open Graph) dans une page web en utilisant le package Cagilo ou cagilo/cagilo dans un projet Laravel.
Le package cagilo/cagilo est un kit de composants Blade open-source pour le framework Laravel. Parmi ses composants, on retrouve « Meta » qui permet d'insérer les balises <title>
et <meta>
, y compris les métadonnées Open Graph pour les médias sociaux.
Pour installer cagilo/cagilo, on exécute la commande composer suivante :
composer require cagilo/cagilo
cagilo/cagilo nécessite php 8 et Laravel 8 comme on peut le voir au fichier composer.json :
"php": "^8.0",
"laravel/framework": "^8.59",
Une fois Cagilo installé, nous pouvons publier son fichier de configuration cagilo.php en exécutant la commande artisan suivante :
php artisan vendor:publish --tag=cagilo
Cette commande importe le fichier /config/cagilo.php où nous pouvons référencer les composants Cagilo à charger dans l'application et le chemin d'icônes à utiliser :
<?php
use Cagilo\UI\Components;
return [
// Les composants à charger dans l'application
'components' => [
// 'alert' => Components\Alert::class,
// 'device' => Components\Device::class,
// 'error' => Components\Error::class,
// 'icon' => Components\Icon::class,
// 'logout' => Components\Logout::class,
'meta' => Components\Meta::class,
],
/* Le chemin vers le dossier d'icônes SVG.
Example: [ 'fa' => storage_path('app/fontawesome') ]
*/
'icons' => [
],
];
Nous commentons les composants alert
, device
, error
, icon
et logout
de Cagilo pour de raisons de performance et laissons le composant meta
que nous allons utiliser.
Pour insérer dynamiquement les balises SEO <title>
et <meta>
(description, Open Graph, ...) dans une page web, Cagilo propose la balise <x-meta />
à laquelle nous pouvons transmettre les données via les attributs HTML suivants :
Considérons que nous avons un objet $post
(une publication) représentée par le modèle app/Models/Post.php. Pour insérer les balises <title>
et <meta>
avec les informations du $post
(titre, description, image, auteur et url) sur une vue (template Blade), nous devons compléter la balise <x-meta />
de la manière suivante :
<x-meta
title="{{ $post->title }}"
description="{{ $post->description }}"
image="{{ asset('storage/'.$post->picture) }}"
author="{{ $post->user->name }}"
url="{{ route('posts.show', $post) }}"
/>
Ce qui va générer le code HTML suivant pour le $post
:
<!-- Le titre -->
<title>Laravel</title>
<!-- Balises méta principales -->
<meta name="title" content="Laravel">
<meta name="description" content="The PHP Framework for Web Artisans">
<!-- L'auteur -->
<meta name="author" content="Wilo Ahadi">
<!-- Open Graph / Facebook / LinkedIn -->
<meta property="og:type" content="website">
<meta property="og:url" content="http://exemple.test/posts/2"/>
<meta property="og:locale" content="en"/>
<meta property="og:title" content="Laravel"/>
<meta property="og:description" content="The PHP Framework for Web Artisans">
<meta property="og:image" content="http://exemple.test/storage/posts/2.png">
<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image"/>
<meta name="twitter:url" content="http://exemple.test/posts/2">
<meta name="twitter:title" content="Laravel">
<meta name="twitter:description" content="The PHP Framework for Web Artisans">
<meta name="twitter:image" content="http://exemple.test/storage/posts/2.png">
Portez-vous bien ! 😉
Cette publication vous a plu ?
Partagez-la avec vos ami(e)s sur les réseaux sociaux.
Wilo Ahadi, l'auteur
Passionné de l'informatique, je suis spécialiste en techniques des systèmes et réseaux, développeur web et mobile, infographiste et designer, ... J'aime partager mon expérience en formant sur la plateforme Akili School
Voir profilAutres publications
Voir toutes les publication de Wilo Ahadi
Sélection ebook
10 Laravel tips and techniques for your next PHP project
Développement web
Commentaires