# CHAPITRE 16 — Référencement, sitemap et partage social

Avoir un beau contenu est nécessaire ; obtenir une visibilité de Google et des réseaux sociaux est tout aussi important. Le module intègre l'ensemble des outils de référencement de base directement dans l'éditeur, sans extension tierce.

### <span style="color: rgb(35, 111, 161);">Le panneau SEO d'une page</span>

Pour chaque page, vous pouvez personnaliser ses métadonnées de référencement via un panneau dédié dans la barre d'outils.

##### **Accéder au panneau**

1. Ouvrez la page dans l'éditeur.
2. <span style="white-space: pre-wrap;">Dans la barre d'outils centrale, cliquez sur </span>**SEO**.
3. Une fenêtre de 720 pixels de largeur s'ouvre.

##### **Les champs disponibles**

<table id="bkmrk-champdescriptioncibl" style="width: 100%; border-collapse: collapse; margin: 1rem 0px; font-size: 0.95em;"><colgroup><col></col><col></col><col></col></colgroup><tbody><tr style="background: rgb(25, 5, 45); color: rgb(254, 252, 232);"><th class="align-left" style="padding: 0.6rem 1rem; text-align: left; border: 1px solid rgb(25, 5, 45);">Champ

</th><th class="align-left" style="padding: 0.6rem 1rem; text-align: left; border: 1px solid rgb(25, 5, 45);">Description

</th><th class="align-left" style="padding: 0.6rem 1rem; text-align: left; border: 1px solid rgb(25, 5, 45);">Cible

</th></tr><tr><td style="padding: 0.5rem 1rem; border: 1px solid rgb(229, 231, 235);">**Titre SEO**

</td><td style="padding: 0.5rem 1rem; border: 1px solid rgb(229, 231, 235);">Le titre affiché dans l'onglet du navigateur et dans les résultats Google.

</td><td style="padding: 0.5rem 1rem; border: 1px solid rgb(229, 231, 235);">50 à 60 caractères

</td></tr><tr style="background: rgb(250, 245, 255);"><td style="padding: 0.5rem 1rem; border: 1px solid rgb(229, 231, 235);">**Meta description**

</td><td style="padding: 0.5rem 1rem; border: 1px solid rgb(229, 231, 235);">Le texte de présentation sous le titre dans Google.

</td><td style="padding: 0.5rem 1rem; border: 1px solid rgb(229, 231, 235);">140 à 160 caractères

</td></tr><tr><td style="padding: 0.5rem 1rem; border: 1px solid rgb(229, 231, 235);">**Mots-clés**

</td><td style="padding: 0.5rem 1rem; border: 1px solid rgb(229, 231, 235);">Mots-clés séparés par des virgules.

</td><td style="padding: 0.5rem 1rem; border: 1px solid rgb(229, 231, 235);">Facultatif — peu utilisé par Google moderne

</td></tr><tr style="background: rgb(250, 245, 255);"><td style="padding: 0.5rem 1rem; border: 1px solid rgb(229, 231, 235);">**Image Open Graph**

</td><td style="padding: 0.5rem 1rem; border: 1px solid rgb(229, 231, 235);">Image affichée lorsque la page est partagée sur Facebook, LinkedIn, Twitter, WhatsApp.

</td><td style="padding: 0.5rem 1rem; border: 1px solid rgb(229, 231, 235);">1200 × 630 px recommandé

</td></tr></tbody></table>

### <span style="color: rgb(35, 111, 161);">L'aperçu Google en direct</span>

En haut de la fenêtre, un aperçu live reproduit 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 saisie. Vous voyez immédiatement si votre titre est tronqué ou si votre description est trop longue.

**Compteurs colorés —**<span style="white-space: pre-wrap;"> À côté de chaque champ, un compteur indique le nombre de caractères :</span>  
Vert : dans la plage idéale.  
Orange : en dehors de la plage mais acceptable.  
Rouge : trop long, sera tronqué par Google.

### <span style="color: rgb(35, 111, 161);">Choisir l'image Open Graph</span>

1. <span style="white-space: pre-wrap;">Dans la fenêtre SEO, cliquez sur </span>**Choisir une image**.
2. La bibliothèque média s'ouvre.
3. Sélectionnez une image ou téléversez-en une nouvelle.
4. L'image apparaît à droite de l'aperçu Google.

<p class="callout info">**Format idéal —**<span style="white-space: pre-wrap;"> 1200 × 630 px (ratio 1.91:1) pour Facebook et LinkedIn. Format JPG ou PNG. Affichez votre logo et un texte court qui résume la page. Évitez les images de banque génériques.</span></p>

Lorsqu'une image Open Graph est renseignée, le module ajoute automatiquement les balises Open Graph et Twitter Cards dans l'en-tête HTML 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" />
```

### <span style="color: rgb(35, 111, 161);">Enregistrer le SEO</span>

1. Modifiez les champs.
2. <span style="white-space: pre-wrap;">Cliquez sur </span>**Enregistrer**<span style="white-space: pre-wrap;"> en bas de la fenêtre.</span>
3. Le module met à jour la base de données (`<span class="editor-theme-code">llx_website_page</span>`<span style="white-space: pre-wrap;">) et le fichier </span>`<span class="editor-theme-code">tpl.php</span>`<span style="white-space: pre-wrap;"> en synchronisant les balises HTML.</span>
4. L'aperçu se rafraîchit.

<p class="callout info">**Note —**<span style="white-space: pre-wrap;"> Les métadonnées SEO ne suivent pas le cycle de publication des slots. Une fois enregistrées, elles sont visibles publiquement immédiatement.</span></p>

### <span style="color: rgb(35, 111, 161);">Sitemap.xml</span>

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

##### **Contenu généré**

- <span style="white-space: pre-wrap;">Toutes les pages au statut </span>**publié**.
- <span style="white-space: pre-wrap;">Les pages au statut </span>**retiré du site**<span style="white-space: pre-wrap;"> sont exclues.</span>
- <span style="white-space: pre-wrap;">Les pages sœurs (autres langues) sont déclarées comme alternates via </span>`<span class="editor-theme-code"><xhtml:link rel="alternate"></span>`.

##### **Régénérer le sitemap**

**Méthode A — Bouton dans l'éditeur**

1. Rendez-vous dans la liste des pages d'un site.
2. <span style="white-space: pre-wrap;">Cliquez sur le bouton </span>**Sitemap**<span style="white-space: pre-wrap;"> en haut.</span>
3. <span style="white-space: pre-wrap;">Le module régénère le fichier </span>`<span class="editor-theme-code">sitemap.xml</span>`<span style="white-space: pre-wrap;"> à la racine du docroot.</span>
4. Une notification confirme l'opération.

**Méthode B — En ligne de commande (administrateurs)**

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

Cette méthode convient à une planification quotidienne automatisée.

<p class="callout success">**Recommandé —**<span style="white-space: pre-wrap;"> Soumettez votre sitemap à Google Search Console une seule fois. Google reviendra ensuite le consulter automatiquement à intervalles réguliers.</span></p>

### <span style="color: rgb(35, 111, 161);">Balises hreflang multilingues</span>

<span style="white-space: pre-wrap;">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 </span>`<span class="editor-theme-code"><link rel="alternate" hreflang="..."></span>`.

Le module génère ces balises automatiquement, à condition que votre développeur ait inclus le helper dans l'en-tête du gabarit :

```
<link rel="alternate" hreflang="fr" href="https://exemple.com/page" />
<link rel="alternate" hreflang="en" href="https://exemple.com/page-en" />
<link rel="alternate" hreflang="de" href="https://exemple.com/page-de" />
<link rel="alternate" hreflang="x-default" href="https://exemple.com/page" />
```

<p class="callout info">**Conseil —**<span style="white-space: pre-wrap;"> Si vous ne voyez pas ces balises sur votre site, demandez à votre développeur d'ajouter </span>`<span class="editor-theme-code"><?php echo infrasstudio_hreflang_tags($website, $page); ?></span>`<span style="white-space: pre-wrap;"> dans l'en-tête de vos gabarits.</span></p>

### <span style="color: rgb(35, 111, 161);">Liste de contrôle SEO par page</span>

**Avant de publier une nouvelle page, vérifiez les points suivants :**

- Le titre SEO compte 50 à 60 caractères et contient le mot-clé principal.
- La meta description compte 140 à 160 caractères et incite au clic.
- L'image Open Graph est définie ; à défaut, le partage social affichera une vignette générique.
- Toutes les images possèdent un texte alternatif (renseigné dans la bibliothèque média).
- <span style="white-space: pre-wrap;">Le H1 (souvent un slot </span>`<span class="editor-theme-code">page_title</span>`) est unique et descriptif.
- L'URL (slug) est en minuscules, sans accents, avec des tirets pour séparer les mots.

### <span style="color: rgb(35, 111, 161);">Outils de mesure du référencement</span>

Le module génère le SEO mais ne le mesure pas. Pour suivre vos résultats, utilisez les outils standards :

- **Google Search Console**<span style="white-space: pre-wrap;"> : permet de découvrir les pages indexées, les requêtes qui génèrent des clics, les erreurs.</span>
- **Google Analytics**<span style="white-space: pre-wrap;"> ou </span>**Matomo**<span style="white-space: pre-wrap;"> : trafic, comportement des visiteurs, conversions.</span>
- **PageSpeed Insights**<span style="white-space: pre-wrap;"> : performance de chargement et indicateurs Core Web Vitals.</span>
- **Outils de test Open Graph**<span style="white-space: pre-wrap;"> : Facebook Sharing Debugger, LinkedIn Post Inspector.</span>

### <span style="color: rgb(35, 111, 161);">Récapitulatif</span>

**Vous savez désormais :**

- Renseigner le titre SEO, la meta description, les mots-clés et l'image Open Graph d'une page.
- Lire l'aperçu Google en direct avec ses compteurs colorés.
- Ajouter une image Open Graph pour un partage social soigné.
- Régénérer le sitemap.xml manuellement ou en ligne de commande.
- Comprendre l'utilité des balises hreflang multilingues.
- Suivre une liste de contrôle SEO complète avant publication.

**Fin de la Partie III —**<span style="white-space: pre-wrap;"> Vous savez désormais utiliser le module au quotidien : modifier le contenu, gérer les médias, publier, traduire, gérer un blog, exploiter un catalogue produit et soigner le référencement. Vous êtes autonome.</span>

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