Rendre un site WordPress SEO friendly : mon aventure avec un plugin maison 😎

Comment rendre un site WordPress SEO-friendly avec des données dynamiques (et un plugin PHP)

Quand on est développeur front-end, récupérer des données depuis une API et les injecter dans le DOM, c’est un peu la base.
Mais attention, cette méthode n’est pas toujours très SEO friendly, car Googlebot et ses amis ne peuvent pas voir les données injectées via JavaScript. Et ça, pour un site qui cherche à être bien référencé, c’est un vrai problème. 😬

Donc récapitulons :

Objectif : afficher des données externes de façon dynamique tout en gardant un œil sur le SEO
Contrainte : pas question de compter uniquement sur du JS, il faut une solution côté serveur

La solution ?
Un bon vieux plugin WordPress en PHP pour récupérer les données et les intégrer proprement dans le HTML, dès le rendu serveur. Challenge accepted ! 💪

Étape 1 : Créer un plugin WordPress (oui, c’est pas si compliqué !)

Avant tout, il faut créer un plugin WordPress. Pas de panique, c’est plus facile qu’il n’y paraît.

Dans le dossier wp-content/plugins, crée un dossier pour ton plugin (par exemple, plugin-api-seo).
Crée un fichier PHP à l’intérieur de ce dossier, par exemple plugin-api-seo.php.
Ouvre ce fichier et ajoute ce code :

<?php
/**
 * Plugin Name: Plugin API SEO
 * Description: Un plugin pour récupérer des données depuis une API et les afficher SEO-friendly.
 * Version: 1.0
 * Author: Ton Nom
 */

// Empêcher l’accès direct
if ( !defined( 'ABSPATH' ) ) {
    exit;
}

Avec ça, tu as ton plugin de base. Facile, non ? (n’oublie pas de l’activer dans l’administration du WP)

Étape 2 : Récupérer les données en PHP

Maintenant que ton plugin est prêt, il est temps de récupérer des données depuis l’API.
Pour ça, on va utiliser la fonction wp_remote_get() qui nous permet de faire une requête HTTP en PHP.
Voici comment procéder :

phpCopierModifierfunction mon_plugin_fetch_data() {
    $response = wp_remote_get('https://exemple.com/api/data');
    if (is_wp_error($response)) {
        return 'Erreur lors de la récupération des données';
    }
    $body = wp_remote_retrieve_body($response);
    return json_decode($body, true); // On récupère les données en format tableau
}

Ça y est, les données sont récupérées et prêtes à être utilisées !

Étape 3 : Préparer les données pour les afficher

Maintenant qu’on a les données, il faut les préparer avant de les afficher sur le site.
Voici un exemple de préparation pour les afficher sous forme de liste:

function mon_plugin_prepare_data($data) {
    if (empty($data)) {
        return 'Aucune donnée disponible';
    }

    $output = '<ul class="mes-donnees">';
    foreach ($data as $item) {
        $output .= '<li>' . esc_html($item['titre']) . '</li>'; 
    }
    $output .= '</ul>';

    return $output;
}

Là, on a les données prêtes à être affichées dans un joli format HTML !

Étape 4 : Créer un bon vieux shortcode

C’est l’étape magique qui va permettre d’afficher ces données n’importe où dans ton contenu WordPress.
Avec un shortcode, il suffit d’ajouter une petite balise dans une page ou un article, et hop, les données s’affichent.

function mon_plugin_afficher_donnees() {
    $data = mon_plugin_fetch_data(); // Récupération des données
    return mon_plugin_prepare_data($data); // Préparation et retour des données
}

add_shortcode('afficher_donnees', 'mon_plugin_afficher_donnees');

Il suffit maintenant d’ajouter [afficher_donnees] dans n’importe quel article ou page, et les données s’affichent ! Google les verra, et ton SEO est optimisé. 🎯

Bonus : Un peu de mise en cache API

Pour éviter de surcharger l’API à chaque visite, on peut mettre en place un système de cache.
Ça permet d’éviter de refaire la même requête trop souvent et de rendre le site plus rapide.
Voici comment ajouter un cache simple avec set_transient() et get_transient() :

function mon_plugin_fetch_data_cached() {
    $cached_data = get_transient('mon_plugin_cache');
    if ($cached_data !== false) {
        return $cached_data; // Si les données sont en cache, on les récupère
    }
    $data = mon_plugin_fetch_data(); // Sinon, on va chercher les données
    set_transient('mon_plugin_cache', $data, HOUR_IN_SECONDS); // Mise en cache pendant 1 heure
    return $data;
}

Avec ce petit ajout, ton site sera plus rapide, et tu réduiras le nombre de requêtes envoyées à l’API.
Les visiteurs (et les robots Google) vont adorer ! 🎈

Conclusion

Voilà, avec ce plugin simple, tu peux afficher tes données venant de l’API tout en optimisant le SEO de ton site. Tu combines la flexibilité du JavaScript pour les données dynamiques et l’optimisation du référencement avec PHP côté serveur. 🌟

Si toi aussi tu veux rendre ton site plus SEO-friendly tout en affichant des données en temps réel, n’hésite pas à créer un petit plugin personnalisé. C’est un petit défi sympa qui peut vraiment faire la différence pour le SEO ! 😉

0 0 votes

Évaluation de l'article