Skip to main content

SEO, sitemap et partage social

🔍 Chapitre 16 — SEO, sitemap et partage social

Avoir un beau contenu, c'est bien. Que Google et les réseaux sociaux le valorisent, c'est mieux. InfraSStudio inclut tous les outils SEO de base directement dans l'éditeur, sans plugin tiers.

🔎 Le panneau SEO d'une page

Pour chaque page, vous pouvez personnaliser ses métadonnées SEO via un panneau dédié dans la toolbar.

Accéder au panneau

  1. Ouvrez la page dans l'éditeur.
  2. Dans la toolbar centrale, cliquez sur « SEO » 🔍.
  3. Une modale 720 px de largeur s'ouvre.

Les champs disponibles

Champ

Description

Cible

Titre SEO

Le titre affiché dans l'onglet et dans Google.

50–60 caractères

Meta description

Le texte de présentation sous le titre dans Google.

140–160 caractères

Keywords

Mots-clés séparés par des virgules.

Optionnel — peu utilisé par Google moderne

Image Open Graph

L'image affichée quand votre page est partagée sur Facebook, LinkedIn, Twitter, WhatsApp.

1200 × 630 px recommandé

👀 L'aperçu Google SERP en direct

En haut de la modale, un aperçu live qui imite l'affichage d'un résultat Google :

  • 🔗 L'URL de la page (en gris).
  • 📛 Le titre (en bleu).
  • 📝 La meta description (en gris).

L'aperçu se met à jour à chaque frappe dans les champs. Vous voyez immédiatement si votre titre est tronqué ou si votre description est trop longue.

✅ Compteurs colorés — À côté de chaque champ, un compteur indique le nombre de caractères :
🟢 Vert = dans la plage idéale
🟠 Orange = hors plage mais acceptable
🔴 Rouge = trop long, sera tronqué par Google

📤 Choisir l'image Open Graph

  1. Dans la modale SEO, cliquez sur « Choisir une image ».
  2. La bibliothèque média s'ouvre.
  3. Sélectionnez une image (ou uploadez-en une nouvelle).
  4. L'image apparaît à droite de l'aperçu SERP.

💡 Format idéal — 1200 × 630 px (ratio 1.91:1) pour Facebook/LinkedIn. JPG ou PNG. Mettez votre logo + un texte court qui résume la page. Évitez les images de stock génériques.

Quand vous renseignez une image OG, le module ajoute automatiquement les balises Open Graph + Twitter Cards dans le <head> de la page :

<meta property="og:image" content="..." />
<meta property="og:title" content="..." />
<meta property="og:description" content="..." />
<meta name="twitter:card" content="summary_large_image" />

💾 Enregistrer le SEO

  1. Modifiez les champs.
  2. Cliquez sur « Enregistrer » en bas de la modale.
  3. Le module met à jour la base (llx_website_page) et le fichier tpl.php (synchronisation des balises HTML).
  4. L'iframe d'aperçu se rafraîchit.

ℹ️ Effet immédiat — Pas de cycle de publication pour les métadonnées SEO. Une fois enregistrées, elles sont visibles publiquement dans la seconde.

🗺️ Sitemap.xml

Le sitemap est le fichier que Google utilise pour découvrir toutes les pages de votre site. InfraSStudio le génère automatiquement à partir de votre liste de pages.

Contenu généré

  • ✅ Toutes les pages au statut publié (status = 1).
  • ❌ Les pages au statut retiré du site sont exclues.
  • 🌍 Les pages sœurs (autres langues) sont déclarées comme alternates via <xhtml:link rel="alternate">.

Régénérer le sitemap

Méthode A — Bouton dans l'éditeur

  1. Allez dans la liste des pages d'un site.
  2. Cliquez sur le bouton « Sitemap » en haut.
  3. Le module régénère le fichier sitemap.xml à la racine du docroot.
  4. Une notification confirme.

Méthode B — En ligne de commande (admins)

php htdocs/custom/infrasstudio/scripts/generate_sitemap.php <ref-du-site> <entity>

Pratique pour automatiser via cron quotidien.

✅ Bonne pratique — Soumettez votre sitemap à Google Search Console une fois pour toutes. Google viendra le re-consulter automatiquement à intervalles réguliers.

🌍 Balises hreflang multilingues

Pour un site multilingue, Google a besoin de savoir quelles pages sont des traductions les unes des autres. C'est le rôle des balises <link rel="alternate" hreflang="...">.

Le module génère ces balises automatiquement quand votre développeur a inclus le helper dans le <head> du template :

💡 Si vous ne voyez pas ces balises — Demandez à votre développeur d'ajouter <?php echo infrasstudio_hreflang_tags($website, $page); ?> dans le <head> de vos templates.

🎯 Checklist SEO par page

✅ Avant de publier une nouvelle page, vérifiez :

  • Le titre SEO fait 50–60 caractères et contient le mot-clé principal.
  • La meta description fait 140–160 caractères et incite au clic.
  • L'image Open Graph est définie (sinon, le partage social affichera une vignette générique).
  • Toutes les images ont un texte alternatif (édité dans la bibliothèque média).
  • Le H1 (souvent un slot page_title) est unique et descriptif.
  • L'URL (slug) est en minuscules, sans accents, séparée par des tirets.

📊 Outils de mesure SEO

InfraSStudio génère le SEO ; il ne le mesure pas. Pour suivre vos résultats, utilisez les outils standards :

  • 📈 Google Search Console — découvre les pages indexées, les requêtes qui génèrent des clics, les erreurs.
  • 📊 Google Analytics ou Matomo — trafic, comportement, conversions.
  • 🔬 PageSpeed Insights — performance, Core Web Vitals.
  • 🧪 Test Open Graph — Facebook Sharing Debugger, LinkedIn Post Inspector.

📋 Récapitulatif

✅ Vous savez maintenant :

  • Renseigner le titre SEO, meta description, keywords et image OG d'une page.
  • Lire l'aperçu Google SERP en direct avec ses compteurs colorés.
  • Ajouter une image Open Graph pour un beau partage social.
  • Régénérer le sitemap.xml manuellement ou en CLI.
  • Comprendre l'utilité des balises hreflang multilingues.
  • Suivre une checklist SEO complète avant publication.

🎉 Fin de la Partie III — Vous savez désormais utiliser InfraSStudio au quotidien : éditer, gérer les médias, publier, traduire, blogger, gérer un catalogue produit, soigner le SEO. Vous êtes autonome.

La Partie IV s'adresse aux développeurs intégrateurs. Si ce n'est pas votre rôle, vous pouvez sauter aux Annexes (glossaire, FAQ, changelog).

Back to top