SEO Laravel : Gérer les meta tags avec Cagilo

Introduction au meta tag

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.

Installer et configurer Cagilo

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.

Balises SEO title et meta avec Cagilo

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 :

• « title » : Le titre
• « description » : La description
• « image » : L'image de présentation
• « url » : L'URL canonique
• « keywords » : Les mots clés
• « robots » : Règle d'indexation pour les moteurs de recherche
• « author » : L'auteur
• ...

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 ! 😉