Imagebox : règles et exemples de l'infoboîte image

Une imagebox associe une image à une explication ciblée afin que les lecteurs les traitent comme une unité éditoriale unique. L’image peut apporter une preuve que le texte interprète, ou illustrer une idée que le texte explique complètement. L’auteur doit déclarer quel rôle elle joue, car ce choix contrôle la copie, le texte alternatif, la légende, les données structurées et le fait que l’élément fonctionne encore sans la vue.

Voici la variante image-contenu : la date et le statut visibles sont des preuves, tandis que le texte adjacent interprète leur relation. Si l’image était simplement un calendrier décoratif, le texte devrait faire l’ensemble du point sur la fraîcheur de manière indépendante et l’image utiliserait un texte alternatif vide.

Pourquoi cet élément est important

Les lecteurs ne traitent pas automatiquement une image et un paragraphe distant comme une seule idée. Lorsqu’une image apparaît sans relation textuelle explicite, ils doivent décider quoi inspecter, pourquoi cela importe et si cela soutient l’affirmation environnante. Une imagebox réduit cette incertitude en plaçant un visuel et une explication dans une limite claire. Le titre nomme le point ; l’image le montre ; le texte dit au lecteur ce qu’il doit remarquer ou comprendre.

L’avantage psychologique est l’attention conjointe : le design dirige l’attention vers un objet visuel tandis que la copie établit sa pertinence. Un recadrage de graphique peut suggérer une hausse, une volatilité ou une limite de date ; l’explication adjacente sélectionne la lecture pertinente.

L’extractabilité machine est la capacité d’un logiciel à isoler une unité de contenu sans perdre la relation entre ses parties. Une imagebox sémantique expose une image, une description accessible, une légende, un titre, une explication et un rôle d’image déclaré dans un seul conteneur. Le texte doit toujours contenir l’affirmation : la vision par ordinateur ne doit pas être le seul moyen d’accéder à un nombre, une instruction, une limitation ou une conclusion.

Les règles de rédaction des éléments régissent la syntaxe de directive partagée, le mappage du corps, les chemins et la préséance. Cette page prévaut là où elle définit la distinction propre à imagebox entre contenu et illustration, ses champs autorisés et sa limite d’une seule image.

Quand l’utiliser

Utilisez une imagebox lorsqu’une image et une explication ont une relation directe et nécessaire, et qu’aucune ne mérite une section autonome complète. Les bons usages incluent un recadrage d’interface ciblé associé à une interprétation, un détail produit associé à une explication de son impact sur l’adéquation, une photographie de processus associée à une règle de contrôle qualité, ou une simple illustration conceptuelle associée à une explication concise.

Décidez d’abord si l’image est un contenu ou une illustration :

• Image de contenu : le lecteur doit inspecter l’image pour vérifier une affirmation, identifier une caractéristique, comparer un état ou comprendre un fait visuel. Le texte nomme le détail pertinent et explique sa signification. Le texte alternatif est porteur de sens, et une légende est généralement présente.
• Image illustrative : l’image renforce le ton, la mémoire ou la compréhension, mais le texte adjacent fournit l’affirmation complète. Supprimer l’image rend le bloc moins engageant, pas moins précis. Le texte alternatif est vide, sauf si l’illustration elle-même communique des informations supplémentaires.

Utilisez le test de suppression. Si une demande d’image échouée supprime une preuve ou rend l’explication incomplète, déclarez role=content. Si elle supprime uniquement un renfort visuel, déclarez role=illustration.

Les cas limites sont fréquents :

• Utilisez une image autonome lorsque le visuel nécessite toute la largeur de lecture et que le texte se contente de l’identifier.
• Utilisez une capture d’écran annotée lorsque les lecteurs doivent localiser plusieurs zones de l’interface.
• Utilisez un tableau pour des critères de comparaison répétés, un diagramme pour un système ou une séquence, et une galerie pour des images similaires.
• Utilisez une prose ordinaire lorsque le visuel ne fait que répéter une phrase.

N’utilisez pas d’imagebox pour donner à une section faible une apparence conçue. Une photo générique de personnes pointant un ordinateur portable n’explique pas la « collaboration », et un robot générique ne rend pas une affirmation sur l’intelligence artificielle plus concrète. Si l’image peut être remplacée par une image sans rapport sans changement de la copie, l’association n’a pas de contrat éditorial.

Où la placer

Placez l’imagebox immédiatement après le paragraphe qui introduit l’affirmation ou le concept qu’elle développe. Dans une procédure, placez-la après l’action et avant la vérification de réussite, afin que la preuve visuelle n’interrompe pas l’instruction.

Elle peut se trouver directement sous un H2 uniquement lorsque son titre interne est plus spécifique. Conservez une citation ou une qualification à côté de l’affirmation qu’elle limite ; n’insérez jamais l’imagebox entre elles.

Elle ne doit pas se trouver directement à côté d’une autre imagebox, d’une galerie, d’une figure pleine largeur, d’une vidéo, d’un tableau ou d’une infoboîte à deux colonnes. Insérez une interprétation entre les contenus visuels, combinez de véritables éléments de même niveau, ou créez des sous-sections séparées.

Ne la placez pas à l’intérieur d’une puce, d’une étape, d’un encadré, d’une cellule de tableau, d’un accordéon ou d’une carte cliquable. Ne mettez pas d’appel à l’action à l’intérieur du bloc ni entre son image et son explication.

Sur ordinateur, l’image peut apparaître avant ou après le texte. Sur mobile, préservez un ordre prévisible de la source, du clavier et du lecteur d’écran ; ne vous fiez pas à un réordonnancement CSS conflictuel.

Anatomie

L’anatomie est définie par le sens plutôt que par la couleur, l’ombre ou la largeur de colonne.

1. Conteneur : Regroupe exactement une figure et une explication en une seule unité éditoriale.
2. Image : Montre une preuve ou fournit une illustration selon le rôle déclaré.
3. Texte alternatif : Communique l’objectif visuel pertinent pour une image de contenu ; il est vide pour une illustration décorative redondante.
4. Légende : Identifie ce que montre une image de contenu et fournit un contexte essentiel tel que l’état, la date ou l’échelle.
5. Titre : Énonce l’aperçu ou le sujet, pas le nom de fichier ni une étiquette générique comme « Exemple ».
6. Explication : Dit au lecteur quoi remarquer, pourquoi cela importe et toute limitation de l’interprétation.
7. Crédit : Nomme le créateur ou la source lorsque les droits, la provenance ou la politique éditoriale l’exigent.
8. Ordre de lecture : Préserve une relation cohérente entre la figure et le texte lorsque deux colonnes se réduisent à une.

L’explication doit faire référence au sujet directement plutôt que d’utiliser des coordonnées comme « l’image de gauche ». La position change selon les points de rupture, les traductions et la syndication. « Le statut obsolète et la date de mise à jour identifient la cible de révision » reste vrai partout.

Exemples de design

Le système de design prend en charge quatre combinaisons de rôle et de position. Aucune ne modifie les exigences de contenu.

Image de contenu, image au début

Utilisez cette position par défaut lorsque les lecteurs doivent examiner la preuve avant son interprétation.

Image de contenu, image à la fin

Utilisez cette position lorsque l’explication doit établir un prisme avant la preuve.

Illustration, image au début

Utilisez cette position lorsqu’un visuel spécifique au concept améliore la reconnaissance tandis que le texte porte le sens complet.

Illustration, image à la fin

Utilisez cette position lorsque l’explication est primaire et que l’illustration agit comme une conclusion visuelle.

Comportement sur écran étroit

Chaque variante devient une colonne unique sans défilement horizontal ni recadrage modifiant le sens. La légende reste attachée à sa figure.

Paramètres

Le contrat de contenu sépare le sens éditorial de la présentation. Les ratios de largeur, les espacements, les bordures, les arrière-plans, les rayons, les ombres et les points de rupture appartiennent au moteur de rendu.

Publiez src seulement après que l’actif existe. Une capture en attente utilise un commentaire de capture d’écran et screenshotsPending = true. role n’a pas de valeur par défaut, car traiter silencieusement une preuve comme une décoration crée un échec d’accessibilité.

Le premier titre du corps devient title ; tout ce qui le suit devient content. Le corps autorise les paragraphes, l’emphase, le code en ligne et un lien contextuel. Il refuse les listes, les titres imbriqués, les tableaux, les médias, les boutons, les formulaires, les citations, les accordéons et les composants.

Syntaxe et exemples de code

Les trois notations préservent le même rôle, la même image, le même titre, la même explication, la même légende, le même crédit et le même ordre de lecture. Ce sont des contrats d’adaptateur portables ; ils n’impliquent pas qu’un shortcode ou un bloc local déjà enregistré existe.

Directive Markdown portable

:::imagebox{src="/cdn-assets/seo-playbook/examples/freshness-status.png" role=content position=image-start alt="Freshness report row showing a stale status beside an update date of 12 February 2026" caption="The stale status is evaluated against the recorded update date."}
## See why the page needs review

The visible update date explains why the audit classified this URL as stale. Verify whether the page has changed since that date before assigning a rewrite.
:::

Le chemin d’exemple démontre uniquement la syntaxe. La validation en production doit le rejeter jusqu’à ce que cet actif existe.

Shortcode Hugo

{{< imagebox src="/cdn-assets/seo-playbook/examples/freshness-status.png" role="content" position="image-start" alt="Freshness report row showing a stale status beside an update date of 12 February 2026" caption="The stale status is evaluated against the recorded update date." >}}
## See why the page needs review

The visible update date explains why the audit classified this URL as stale. Verify whether the page has changed since that date before assigning a rewrite.
{{< /imagebox >}}

L’adaptateur utilise uniquement des paramètres nommés. Jusqu’à son enregistrement, utilisez une <figure> sémantique suivie de prose. L’adaptateur valide l’actif et préserve le mappage du corps de la directive.

Bloc WordPress

<!-- wp:amicited/imagebox {"src":"/cdn-assets/seo-playbook/examples/freshness-status.png","role":"content","position":"image-start","alt":"Freshness report row showing a stale status beside an update date of 12 February 2026","caption":"The stale status is evaluated against the recorded update date."} -->
<figure class="wp-block-image">
  <img src="/cdn-assets/seo-playbook/examples/freshness-status.png" alt="Freshness report row showing a stale status beside an update date of 12 February 2026">
  <figcaption>The stale status is evaluated against the recorded update date.</figcaption>
</figure>
<div class="imagebox__content">
  <h2>See why the page needs review</h2>
  <p>The visible update date explains why the audit classified this URL as stale. Verify whether the page has changed since that date before assigning a rewrite.</p>
</div>
<!-- /wp:amicited/imagebox -->

WordPress devrait exposer un champ Média et une zone de texte contrainte. Si ce n’est pas disponible, utilisez les blocs natifs Image, Titre et Paragraphe ; préservez le sens même sans mise en page côte à côte.

Exemples

Bon exemple : l’image est une preuve

Cet exemple fonctionne car l’image prouve deux détails physiques et la copie explique leur conséquence opérationnelle. Le titre énonce l’aperçu, la légende identifie la preuve visible, et l’explication reste spécifique sans tenter d’inventorier l’ensemble de la photographie.

Mauvais exemple : décoration générique présentée comme preuve

Travaillez plus intelligemment avec des données claires
Image : une personne générique souriant devant un ordinateur portable à côté de graphiques colorés.
Notre plateforme innovante transforme les données en informations exploitables afin que chaque équipe puisse prendre de meilleures décisions et obtenir plus de résultats.

Cet exemple échoue car aucune des deux moitiés n’apporte d’information vérifiable. L’image pourrait faire la publicité de n’importe quel logiciel, tandis que la copie contient des résultats généraux sans mécanisme, détail d’interface, contrainte ou exemple. L’association crée une proéminence visuelle mais aucun sens qu’un lecteur ou une machine puisse extraire. Remplacez-la par un état produit ciblé et une explication d’une décision qu’il soutient, ou supprimez l’imagebox et rédigez l’affirmation comme une prose ordinaire avec des preuves.

Balisage de schéma et accessibilité

Une imagebox n’a pas de type Schema.org dédié. Son texte reste partie intégrante de l’entité de la page englobante. Une image de contenu peut être un ImageObject lorsqu’elle dispose d’un contentUrl stable, d’une légende précise, de dimensions et des métadonnées de crédit ou de licence requises. Les illustrations décoratives n’ont pas besoin d’une entité séparée.

Le schéma au niveau de la page peut référencer la même image représentative. Une photographie de détail produit peut alimenter la propriété image du produit visible, mais un recadrage de graphique ne devient pas Dataset et une capture d’écran ne devient pas SoftwareApplication.

Utilisez une <figure> et un <figcaption> plus une zone explicative étiquetée. Définissez width et height intrinsèques ; la sortie responsive ne doit pas défiler horizontalement ni recadrer le détail nommé.

Le texte alternatif nomme le sujet pertinent, l’état et le détail décisif d’une image de contenu. Ne commencez pas par « image de », ne dupliquez pas la légende et ne bourrez pas de mots-clés. Les illustrations redondantes utilisent alt="" ; omettre l’attribut peut exposer le nom du fichier.

Ne vous fiez pas uniquement à la position, à la couleur ou aux pixels. Répétez les nombres, étiquettes, avertissements et conclusions décisifs dans le texte. Maintenez les liens accessibles au clavier, ne faites jamais de l’ensemble du bloc un seul lien, préservez l’ordre source et testez à 200 % de zoom.

Règles de rédaction

Rédigez l’explication avant de sélectionner l’image, puis choisissez le recadrage le plus serré qui préserve le contexte nécessaire.

• Rédigez un titre de 3 à 10 mots qui énonce l’aperçu, le sujet ou la relation. Évitez « Image », « Aperçu », « En savoir plus » et « Voyez-le en action ».
• Limitez la copie explicative à 40–140 mots en un ou deux paragraphes. L’élément soutient un seul point, pas un article miniature.
• Limitez les légendes à 5–25 mots. Identifiez ce qui est montré et le contexte nécessaire pour l’interpréter ; placez le raisonnement dans le corps.
• Utilisez 40–180 caractères pour un texte alternatif porteur de sens, avec 250 comme maximum absolu. Préférez la précision au remplissage de la plage.
• Incluez exactement une image et pas plus d’un lien textuel contextuel. Liez uniquement lorsqu’une destination approfondit matériellement l’explication.
• Utilisez une voix et un temps cohérents dans le titre, la légende et le corps. Préférez les noms et verbes concrets aux adjectifs promotionnels.
• Énoncez la limitation à côté de l’interprétation lorsque l’image ne montre qu’un seul état, date, recadrage, appareil ou exemple.

Ne mettez jamais de liste, tableau, témoignage, prix, formulaire, média, téléchargement, bouton, instruction en plusieurs étapes, avis de non-responsabilité ou appel à l’action à l’intérieur. N’utilisez pas deux images, n’intégrez pas de copie essentielle dans des pixels, n’exposez pas de données client et ne publiez pas d’illustration dont les droits sont inconnus.

Évitez d’écrire « comme vous pouvez le voir ». Un lecteur peut ne pas voir l’image, et même un lecteur voyant a besoin de savoir quelle observation est importante. Énoncez-la directement : « La languette de verrouillage est affleurante lorsque le connecteur est complètement inséré. »

Types d’articles qui l’utilisent

Les lignes ci-dessous sont pilotées par le frontmatter postTypes. « Utilisation » décrit un rôle approprié, pas une obligation d’intégrer une imagebox dans chaque page.

Liste de contrôle QA

Avant la publication, vérifiez l’élément complet :

• L’image et l’explication font un seul point et appartiennent à une seule unité éditoriale.
• role est explicitement content ou illustration, choisi avec le test de suppression.
• Le fichier source existe, est approuvé et n’utilise pas de données privées, de droits inconnus ou d’actif de substitution.
• Le titre énonce l’aperçu en 3–10 mots et le corps l’explique en 40–140 mots.
• Une image de contenu a un texte alternatif porteur de sens et une légende concise ; une illustration redondante utilise un texte alt vide.
• Le texte énonce chaque nombre, étiquette, instruction, avertissement et conclusion décisif qui ne peut pas dépendre de la vue.
• La légende identifie l’image sans dupliquer le corps ou le texte alternatif.
• Tout lien requis vers le créateur, la source, la licence ou le crédit est précis et visible.
• Le bloc contient une image, une explication et au plus un lien textuel contextuel.
• Il ne contient aucune liste, tableau, média, bouton, formulaire, appel à l’action ou carte interactive imbriqué.
• Il ne remplace pas une meilleure capture d’écran annotée, comparaison, diagramme, galerie ou figure pleine largeur.
• Les mises en page ordinateur et mobile préservent l’ordre source sémantique, l’attachement de la légende et l’ordre du clavier.
• Le recadrage pertinent survit au redimensionnement responsive, au zoom à 200 % et à l’échec de chargement de l’image.
• La largeur et la hauteur réservent de l’espace, tandis que le chargement différé ne retarde pas une image au-dessus de la ligne de flottaison.
• Les données structurées, si elles sont émises, correspondent au contenu visible et ne décrivent pas la décoration comme une entité séparée.
• Les correspondances Markdown portable, Hugo et WordPress conservent le même rôle, les mêmes champs et le même sens.

FAQ

Le modèle academy affiche les cinq questions révisées stockées dans le frontmatter [[faq]] de cette page. Elles couvrent le test contenu contre illustration, le texte alternatif décoratif, la portée descriptive, les appels à l’action et le schéma ImageObject.

Une imagebox réussit lorsque le lecteur peut répondre immédiatement à deux questions : « Qu’est-ce que cette image apporte ? » et « Pourquoi cette contribution importe-t-elle ici ? » Si l’une des réponses est vague, renforcez la relation ou supprimez le bloc.