Optimiser votre SEO avec les données Structurées
Les données structurées peuvent faciliter l'analyse et l'indexation de votre contenu par les automates SEO des moteurs de recherches.
Schema.org propose une suite de schémas structurés et de types de données qui informe un utilisateur ou un robot sur les informations que celui-ci peut trouver dans le contenu qu'il consulte.
Par exemple, pour votre portfolio, vous pouvez commencer par indiquer sur votre page d'accueil qu'il s'agit d'un site web, rappeler son nom et sa description.
Puis poursuivre le schéma en ajoutant vos informations d'éditeur, en renseignant votre nom ainsi que des informations de profil comme vos réseaux sociaux.
Oui, parfois ces informations seront déjà mise en avant dans vos meta tags HTML, les schémas seront néanmoins plus complets et plus détaillés.
Voici un exemple :
1<script type="application/ld+json"> 2{ 3 "@context": "https:\/\/schema.org", 4 "@type": "WebSite", 5 "name": "Antoine Benevaut", 6 "description": "Mon portfolio qui présente mes créations", 7 "publisher": { 8 "@type": "Person", 9 "name": "Antoine Benevaut",10 "sameAs": [11 "https:\/\/github.com\/abenevaut"12 ]13 }14}15</script>
Vous n'en avez pas sur votre site web ? Découvrons comment les mettre en place avec spatie/schema-org.
Passons à l'action !
Imaginons que nous souhaitons ajouter, sur notre page d'accueil, le schéma vu précédemment.
On commence par installer le package de gestion des schémas.
1composer require spatie/schema-org
Enfin, nous pouvons completer le controller de notre page d'accueil avec les informations SEO qui vont constituer le schéma.
1<?php 2 3namespace App\Http\Controllers; 4 5use Inertia\Inertia; 6use Inertia\Response; 7use Spatie\SchemaOrg\Schema; 8 9class DashboardController extends Controller10{11 public function home(): Response12 {13 $pageTitle = 'Antoine Benevaut | Home';14 $pageDescription = "Mon portfolio qui présente mes créations";15 16 $schema = Schema::webSite() 17 ->name($pageTitle)18 ->description($pageDescription)19 ->publisher(20 Schema::person()21 ->name('Antoine Benevaut')22 ->sameAs([23 'https://github.com/abenevaut/',24 ])25 );26 27 return Inertia::render('Home', [28 'seo' => [29 'title' => $pageTitle,30 'description' => $pageDescription,31 'url' => config('app.url'),32 'schema' => $schema 33 ],34 // ...35 ]);36 }37}
Maintenant que notre schéma est généré, nous pouvons l'insérer dans notre code HTML, entre les balises <head/>
.
1<head>2 {{ $schema }}3</head>
Ça y est, nous avons intégré notre schéma à notre site !
Pour couvrir vos besoins, retrouver d'autres exemples sur Github.
Il ne reste plus qu'à valider vos schémas avec l'outil schema.org ou celui de Google.
Source : https://gist.github.com/abenevaut/39bb1bf0a4aef3334b13b74f28183820
A lire
Autres articles de la même catégorie
Communiquez avec ChatGPT depuis Laravel
L'IA accessible depuis votre code grace à openai-php/laravel !
Mathieu De Gracia
Traiter du Markdown avec league/commonmark
Découvrons ensemble comment ce paquet nous fait gagner beaucoup de temps lors de l’écriture de nos articles !
William Suppo
Maîtriser vos données avec un DTO !
Analyse du paquet data-transfer-object de Spatie qui permet, à travers une entité, de rendre notre code plus consistant.
William Suppo