Accueil » Laravel » Laravel – Créer des URL SEO Friendly avec des slugs facilement !

Laravel – Créer des URL SEO Friendly avec des slugs facilement !

Il y a peu, j’ai découvert Laravel, un framework qui devrait être considéré d’utilité publique de par sa souplesse, facilité d’apprentissage, d’utilisation et un atout indéniable, sa communauté très large.

J’ai profité de la refonte de mon outil de gestion de bibliothèque pour m’y mettre et je peux vous dire que je n’ai pas été déçu. J’ai donc décidé de vous faire partager quelques points, qui me semblent intéressants et qui m’ont été utiles lors du développement de mon projet.

J’ai donc eu besoin de créer des URLs SEO Friendly grâce à des slugs, comme ceux que l’on peut trouver par défaut sur WordPress. Par défaut, les URLs de vos modèles Laravels sont uniquement constituées des ID de votre modèle (hormis les endpoints utilisés par défaut : edit, create, etc.).

Pour la fonction show de mon controller Book, je voulais avoir une URL constitué de l’ID de mon livre ainsi qu’un slug généré automatiquement à partir du titre. Voici ce que l’on souhaite obtenir :

https://www.mondomaine.com/book/1/book-title

Pour cet article, je vais partir de mon exemple, c’est à dire une classe Book composée d’un id ainsi qu’un attribut title. Pour faire simple, le slug sera une version « slugifiée » du titre de mon livre.

Création du slug

Dans un premier temps, nous allons créer l’attribut slug pour notre livre comme suit :

<?php

use Illuminate\Database\Eloquent\Model;

class Book extends Model
{
    public function getSlugAttribute(): string
    {
        return str_slug($this->title);
    }
}

Gestion de la route

Dans votre fichier de routes, web.php, le format d’URL que nous désirons ressemble donc à ceci :

Route::get('/book/{id}/{slug?}', 'BookController@show')->name('book.show');

Pour nous simplifier la vie, je rends le paramètre slug non obligatoire dans ma route. Dans un premier temps, je ne l’utiliserai pas dans mon controller.

Gestion du Controller

Dans le BookController, rien ne change vraiment. Nous ne prenons que l’ID en compte, comme avant la mise en place du slug.

<?php

use App\Models\Book;

class BookController
{
    public function show($id)
    {
        return view('book.show')
            ->withBook(Book::findOrFail($id));
    }
}

Utiliser votre URL SEO Friendly

Désormais, dans vos templates Blade, vous pouvez générer une URL SEO Friendly pour accéder à la vue de votre objet Book.

{{ route('book.show',[$book->id, $book->slug])}}

Pour aller plus loin

Si vous ne souhaitez pas en rester là, je vous propose quelques petits bouts de codes supplémentaires 😉

Générer un attribut URL pour votre modèle

Il peut s’avérer utile d’avoir, directement dans votre objet un attribut url contenant l’URL complète et déjà générée menant à la vue de l’objet.

<?php

class Book extends Model
{
    // ...

    public function getUrlAttribute(): string
    {
        return action('BookController@show', [$this->id, $this->slug]);
    }
	
	// ...
}

Vous pouvez désormais utiliser l’attribut $book->url dans vos vues Blade ou directement dans le PHP de votre projet.

Éviter le contenu dupliqué

Avec la création de slugs pour votre objet, il se peut que vous ayez plusieurs URLs pour une même entité. Soit car vous avez encore des liens sans slugs qui se baladent sur votre site ou alors, un slug mal formé. Pour résoudre ce problème, je vous propose deux solutions, soit rediriger automatiquement vers la bonne page si le slug ne s’avère pas être le bon, ou bien en mettant en place une balise canonical.

Redirection automatique

Pour rediriger automatiquement une mauvaise URL, je vous propose de vérifier si le slug donné dans l’URL correspond au slug généré par notre attribut ajouté plus haut. Si le slug ne correspond pas, nous redirigeons automatiquement vers la bonne URL.

<?php

use App\Models\Book;

class BookController
{
    public function show($id, $slug = '')
    {
        $book = Book::findOrFail($id);

        if ($slug !== $book->slug) {
            return redirect()->to($book->url); 
			// Vous pouvez utiliser également redirect()->to($book->url, 301); 
        }

        return view('book.show')
            ->withBook($book);
    }
}

Générer une balise canonical

Certains n’aiment pas les redirections et préféreraient une solution plus douce, via la mise en place d’une balise canonical.

Pour rappel, voici ce qu’est une balise canonical

Une Balise Canonical sert à indiquer aux moteurs de recherche comme Google ou Bing le fait qu’une page web est dupliquée et reprend le contenu d’un autre document. Cette balise contient alors l’adresse de la page originale, appelée canonique.

Citation issue du site Définitions SEO

Passons au code. Dans un premier temps, il vous faut ajouter une balise canonical (seulement si elle existe) dans votre fichier de layout, par défaut : app.blade.php

...
  <head>
    @if(isset($canonical))
    <link rel="canonical" href="{{ $canonical }}" />
    @endif
  </head>
...

Dans votre controller, il faut désormais ajouter le passage de la balise canonical à la vue, comme ceci

<?php

use App\Models\Book;

class BookController
{
    // ...
    public function show($id, $slug = '')
    {
        $book = Book::findOrFail($id);

        return view('book.show')
            ->withBook($book)
            ->withCanonical($book->url);
    }
    // ...

Voilà, vous avez désormais une page accessible depuis une URL clairement plus lisible et plus SEO Friendly pour vos modèles Laravel. N’hésitez pas si vous avez des suggestions à me proposer ou des corrections, je suis preneur 😉

Image à la une : lmonk72 / Pixabay

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.