Exemple Pratique : SEO pour une Page “À Propos” avec VueUse/Head

Imaginons que nous voulons créer une page /a-propos qui présente votre entreprise. Cette page a un contenu fixe, mais elle a tout autant besoin d’un bon SEO et de belles balises Open Graph.

Étape 1 : La Route et le Contrôleur Laravel

Commençons par le backend. C’est très simple.

routes/web.php

use App\Http\Controllers\PageController;

// ...
Route::get('/a-propos', [PageController::class, 'about'])->name('about');

app/Http/Controllers/PageController.php

<?php

namespace App\Http\Controllers;

use Inertia\Inertia;

class PageController extends Controller
{
    public function about()
    {
        // Même pour une page "statique", on peut passer des données utiles
        // depuis le backend, comme le nom de l'application ou une configuration.
        return Inertia::render('About', [
            'appName' => config('app.name'),
            'companyInfo' => [
                'name' => 'Devinsto',
                'founded' => 2024,
                'email' => 'contact@devinsto.com',
            ]
        ]);
    }
}

Explication : Le contrôleur envoie des données simples. C’est une bonne pratique car cela vous permet de centraliser des informations (comme le nom de l’entreprise) et de les rendre disponibles pour votre SEO.

---

Étape 2 : Le Composant Vue About.vue

C’est ici que nous allons configurer le SEO de cette page. Créez un fichier resources/js/Pages/About.vue.

<script setup lang="ts">
import { Head } from '@inertiajs/vue3';
import { useHead } from '@vueuse/head';
import { computed } from 'vue';

// 1. Récupérer les props envoyées par le contrôleur
const props = defineProps<{
    appName: string;
    companyInfo: {
        name: string;
        founded: number;
        email: string;
    };
}>();

// 2. Utilisation de useHead pour une page "statique"
useHead({
    // Le titre est un mélange de texte statique et de données dynamiques
    title: computed(() => `À Propos de ${props.companyInfo.name}`),

    meta: [
        // --- Meta description pour Google ---
        {
            name: 'description',
            content: computed(
                () =>
                    `Découvrez l'histoire de ${props.companyInfo.name}, fondée en ${props.companyInfo.founded}. Apprenez-en plus sur notre mission et nos valeurs.`,
            ),
        },

        // --- Open Graph (pour Facebook, LinkedIn, etc.) ---
        {
            property: 'og:title',
            content: computed(() => `À Propos de ${props.companyInfo.name}`),
        },
        {
            property: 'og:description',
            content: computed(() => `Découvrez l'histoire de ${props.companyInfo.name}, fondée en ${props.companyInfo.founded}.`),
        },
        {
            property: 'og:image',
            // Image spécifique pour cette page (pensez à la créer !)
            content: 'https://VOTRE_DOMAINE.com/images/about-us-og-image.jpg',
        },
        {
            // ✅ 'website' est plus approprié qu''article' pour ce type de page
            property: 'og:type',
            content: 'website',
        },
        {
            // L'URL est statique pour cette page
            property: 'og:url',
            content: 'https://VOTRE_DOMAINE.com/a-propos',
        },

        // --- Twitter Cards ---
        {
            name: 'twitter:card',
            content: 'summary_large_image',
        },
        {
            name: 'twitter:title',
            content: computed(() => `À Propos de ${props.companyInfo.name}`),
        },
        {
            name: 'twitter:description',
            content: computed(() => `Découvrez l'histoire de ${props.companyInfo.name}, fondée en ${props.companyInfo.founded}.`),
        },
        {
            name: 'twitter:image',
            content: 'https://VOTRE_DOMAINE.com/images/about-us-og-image.jpg',
        },
    ],

    // 3. Données structurées (JSON-LD) pour une organisation
    script: [
        {
            type: 'application/ld+json',
            children: JSON.stringify({
                '@context': 'https://schema.org',
                // ✅ On utilise le schéma 'Organization', parfait pour une page "À propos"
                '@type': 'Organization',
                name: props.companyInfo.name,
                foundingDate: props.companyInfo.founded,
                url: 'https://VOTRE_DOMAINE.com',
                contactPoint: {
                    '@type': 'ContactPoint',
                    contactType: 'customer service',
                    email: props.companyInfo.email,
                },
            }),
        },
    ],
});
</script>

<template>
    <!-- 
      Le composant <Head> d'Inertia est toujours utile pour le rendu 
      initial côté serveur.
    -->
    <Head title="À Propos" />

    <div class="container mx-auto p-8">
        <h1 class="text-4xl font-bold">À Propos de {{ companyInfo.name }}</h1>
        <p class="mt-4 text-lg">
            Nous sommes une passionnée de technologie, fondée en {{ companyInfo.founded }}. Notre mission est de créer des solutions web innovantes
            qui aident les entreprises à se développer.
        </p>
        <p class="mt-4">Vous pouvez nous contacter à l'adresse suivante : {{ companyInfo.email }}.</p>
        <!-- ... ajoutez le reste de votre contenu ici ... -->
    </div>
</template>

---

Analyse des Différences et des Points Clés

Cet exemple illustre plusieurs points importants par rapport à l’exemple du blog :

1. Contenu Statique vs. Dynamique : Le titre et la description sont principalement du texte statique (“À Propos de…”, “Découvrez l’histoire de…”), mais ils sont enrichis avec des données dynamiques venant des props (props.companyInfo.name). C’est un modèle très courant et puissant.

2. og:type: 'website' : Pour les pages qui ne sont pas des articles (comme l’accueil, “à propos”, “contact”), le type website est plus approprié que article pour Open Graph.

3. URL Statique : La balise og:url est simplement une chaîne de caractères, car l’URL de cette page ne change pas.

4. Schéma JSON-LD Différent : Nous utilisons le type Organization au lieu de Article. C’est parfait pour informer Google que cette page décrit votre entreprise, ce qui peut générer des encarts riches dans les résultats de recherche (Knowledge Graph).

5. Pas besoin de computed ? Techniquement, comme les props ne vont pas changer sur cette page, on pourrait se passer de computed(). Cependant, il est recommandé de les conserver pour deux raisons :

   • Uniformité : Cela garde une structure de code cohérente avec vos autres pages.
   • Réactivité : Si un jour ces props deviennent réactives, votre code SEO est déjà prêt.

Avec ces deux exemples, vous avez maintenant une vision complète de la manière d’aborder le SEO pour différents types de pages dans votre application Inertia.js.