Optimiser votre SEO avec les données Structurées

Publié le 5 septembre 2024

Couverture de l'article 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 Controller
10{
11    public function home(): Response
12    {
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

27 janvier 2022

Découverte de paquets

Laravel Orion

Une API à portée de clics

Mathieu De Gracia

16 août 2023

Découverte de paquets

Améliorez vos tests avec Infection

Vos tests seront-ils suffisamment exhaustifs pour être à l'épreuve de mutations ?

Mathieu De Gracia

5 septembre 2024

Découverte de paquets

Optimiser votre SEO avec les données Structurées

Les données structurées facilitent l'analyse et l'indexation de votre contenu par les automates SEO des moteurs de recherche

Antoine Benevaut