Métadonnées de l'image 101 - Titre, légende, texte alternatif et description

WordPress est doté d'une fonctionnalité intégrée permettant d'ajouter des méta-informations à vos images. Ces métadonnées facilitent la recherche d'images pour les administrateurs et sont également utiles pour les utilisateurs et les moteurs de recherche. Les métadonnées aident également les utilisateurs malvoyants à comprendre les images et ce que vous essayez de transmettre. Dans cet article, nous allons vous montrer comment utiliser les métadonnées d'image telles que le titre, la légende, le texte alt et la description pour rendre vos images plus utiles et optimisées..

Pourquoi les métadonnées d'image sont importantes?

Beaucoup de débutants téléchargent souvent simplement des images dans leurs publications. Même si cela sert à cela, ces images ne sont pas optimisées pour les moteurs de recherche, les utilisateurs et l'administration de sites Web..

Les métadonnées sont du texte supplémentaire que vous pouvez ajouter à vos images. Ce texte aide les moteurs de recherche à comprendre en quoi consiste votre image. Ils peuvent ainsi l'afficher lorsque quelqu'un recherche ces mots..

Il en va de même pour vos utilisateurs. Les métadonnées de l'image, telles que le texte alt, la description et les légendes, peuvent les aider à en savoir plus sur l'image. Vous pouvez utiliser ces champs pour fournir des histoires de fond à vos photos et les rendre plus intéressantes pour vos utilisateurs..

Les métadonnées d'image aident également les utilisateurs malvoyants qui peuvent utiliser leurs lecteurs d'écran et apprendre ce que votre image montre.

En bref, les métadonnées d'image rendent vos images plus intéressantes, informatives, interrogeables et utiles..

Comment ajouter des métadonnées d'image

Lors du téléchargement d'une image à l'aide du programme de téléchargement de média, WordPress vous demandera de saisir les détails de la pièce jointe. Ces détails de pièce jointe constituent la partie la plus importante des métadonnées de l'image..

Titre de la pièce jointe - Le champ de titre dans les détails de la pièce jointe vous permet de donner un titre à votre image. Ce titre est utilisé en interne par WordPress pour trier les images de la médiathèque..

Alt texte de l'image - Le texte alternatif ou le texte alternatif est un champ obligatoire selon les spécifications des normes HTML. Il est affiché lorsque le navigateur d'un utilisateur est incapable de localiser une image. Les moteurs de recherche tels que Google utilisent alt tag comme facteur de classement dans leurs résultats de recherche d'images. Consultez notre guide sur la différence entre le texte d'une image et son titre dans WordPress.

La description - Ce texte peut être affiché sur la page de pièce jointe pour votre image. Vous pouvez entrer autant d'informations que vous le souhaitez dans le champ Description. Tout comme l'histoire derrière une photo, comment vous avez pris la photo ou toute autre chose que vous souhaitez partager peut aller ici. Vous pouvez même ajouter des liens dans le champ de description.

Légende - Ceci est le texte que vous souhaitez afficher avec votre image. Selon votre thème, il sera affiché à l'intérieur ou à l'extérieur de l'image. Voir notre guide sur la façon d'ajouter une légende aux images dans WordPress.

Autres métadonnées d'image

Outre les détails des pièces jointes que vous pouvez entrer, WordPress stocke automatiquement d'autres informations utiles sur votre image. Cela inclut la résolution de l’image, la taille du fichier d’image, les vignettes générées pour l’image, les données exif obtenues à partir de l’image, etc..

Selon votre thème WordPress, certaines de ces informations apparaîtront sur votre page de pièce jointe. Par exemple, les informations de résolution d'image d'origine des thèmes par défaut de vingt-treize et vingt-quatre sont affichées sur la page de pièce jointe..

Les utilisateurs qui souhaitent éditer facilement des thèmes WordPress peuvent modifier le modèle de pièce jointe via un thème enfant et afficher des informations de métadonnées supplémentaires sur la page..

Comment les métadonnées d'image sont stockées dans WordPress?

Avant de vous montrer comment afficher les métadonnées de l'image dans votre thème WordPress, laissez-nous vous expliquer comment les métadonnées de l'image sont stockées dans WordPress..

Les images et autres téléchargements sont stockés en tant que pièces jointes dans WordPress. La pièce jointe est l’un des types de publication par défaut de WordPress. Il est traité comme n'importe quel autre type de message..

Le titre de l'image est stocké en tant que post_title, la description en tant que post_content et la légende est stockée en tant que post_excerpt dans la table posts de votre base de données WordPress..

Le reste des métadonnées est placé dans la table postsmeta de votre base de données WordPress. Cela inclut la taille des fichiers, l'emplacement, la taille et toutes les données exif intégrées à l'image.

Affichage des métadonnées des pièces jointes dans WordPress

Vous pouvez afficher des métadonnées d'image supplémentaires dans WordPress en modifiant vos fichiers de thème dans un thème enfant..

WordPress commence par rechercher les modèles de type de pièce jointe mime comme image.php, video.php, application.php. Thèmes WordPress par défaut comme vingt treize et vingt quatorze utilisent image.php gérer l'affichage des images jointes.

WordPress cherche alors pièce jointe.php, ou single-attachment.php modèles. S'il ne trouve aucun de ces modèles, il utilise single.php modèle pour afficher la page de pièce jointe. Consultez notre guide sur la création d'un modèle de pièce jointe personnalisée dans WordPress..

Copiez le modèle que vous souhaitez modifier dans votre répertoire de thème enfant. Dans cet exemple, nous utilisons le thème et l’édition de Twenty Thirteen. image.php modèle. Ajoutez ce code à votre modèle où vous souhaitez afficher les métadonnées de l'image.

      Publier un contenu; ?>     "; echo" Crédit: ". $ meta [image_meta] [crédit]."
 "; echo" Caméra: ". $ meta [image_meta] [caméra]."
"; echo" Longueur focale: ". $ meta [image_meta] [focale]."
"; echo" Aperture: ". $ meta [image_meta] [aperture]."
"; echo" ISO: ". $ meta [image_meta] [iso]."
"; echo" Vitesse d'obturation: ". $ meta [image_meta] [shutter_speed]."
"; $ timestamped = $ meta [image_meta] [horodatage créé]; $ created_timestamp = date (" F j, Y, g: i a ", $ timestamped); echo" Tampon horaire: ". $ created_timestamp."
"; echo" Copyright: ". $ meta [image_meta] [copyright];?>  

Notez que les valeurs image_meta sont des données EXIF ​​intégrées aux photos prises avec des appareils photo numériques, des smartphones et des tablettes. Si vous téléchargez des images prises par votre propre appareil photo, ces informations seront probablement intégrées à vos photos. Consultez notre guide pour savoir comment ajouter des tags photo exif dans WordPress.

Si vous ne voulez pas que les gens laissent des commentaires sur les pages de pièces jointes, vous pouvez désactiver les commentaires sur les pages de pièces jointes..

Remarque: il n'est pas nécessaire que vous ayez des pages de pièces jointes. Vous pouvez ajouter des métadonnées d'image dans les détails de la pièce jointe et simplement insérer l'image dans vos publications. Vous pouvez également désactiver complètement les pages de pièces jointes dans WordPress..

Ajout de champs personnalisés aux métadonnées de l'image dans WordPress

Étant donné que les images sont stockées sous forme de pièces jointes, c'est-à-dire de type publication, elles peuvent également avoir des champs personnalisés. À l'aide de champs personnalisés, vous pouvez ajouter les métadonnées supplémentaires que vous souhaitez ajouter à vos images..

Supposons que vous souhaitiez ajouter le nom du photographe et son URL à vos images. Copiez et collez ce code dans le fichier functions.php de votre thème ou dans un plugin spécifique au site..

 / ** * Ajouter les champs Nom du photographe et URL au programme de téléchargement de média * / function be_attachment_field_credit ($ form_fields, $ post) $ form_fields ['be-photographer-name'] = array ('label' => 'Nom du photographe', ' input '=>' text ',' value '=> get_post_meta ($ post-> ID,' be_photographer_name ', true),' help '=>' Si fourni, le crédit photo sera affiché ',); $ form_fields ['be-photographer-url'] = array ('label' => 'URL du photographe', 'input' => 'text', 'value' => get_post_meta ($ post-> ID, 'be_photographer_url', true), 'aides' => 'Ajouter l’URL du photographe',); return $ form_fields;  add_filter ('attachment_fields_to_edit', 'be_attachment_field_credit', 10, 2); / ** * Enregistrer les valeurs de nom de photographe et d’URL dans l’éditeur de média * * / function be_attachment_field_credit_save ($ post, $ attachment) if (isset ($ attachment ['be-photographer-name'])) update_post_meta ($ post [' ID '],' be_photographer_name ', $ attachment [' be-photographer-name ']); if (isset ($ pièce jointe ['be-photographe-url'])) update_post_meta ($ post ['ID'], 'be_photographer_url', esc_url ($ pièce jointe '' be-photographer-url ']); return $ post;  add_filter ('attachment_fields_to_save', 'be_attachment_field_credit_save', 10, 2); 

Maintenant, essayez de télécharger une nouvelle image en utilisant WordPress Media Uploader et vous trouverez deux nouveaux champs pour saisir le nom du photographe et son URL..

Pour afficher ces champs dans vos fichiers de thème, utilisez ce code:

 echo get_post_meta ($ post-> ID, 'be_photographer_url', true); echo get_post_meta ($ post-> ID, 'be_photographer_name', true); 

Pour des instructions plus détaillées, consultez ce tutoriel sur la façon d’ajouter des champs supplémentaires à l’éditeur de média WordPress..

Nous espérons que cet article vous a aidé à mieux comprendre les métadonnées, le titre, la légende, le texte de remplacement et la description de l'image. Vous pouvez également consulter notre guide sur la création de galeries d’images réactives dans WordPress avec Envira..

Si vous avez aimé cet article, abonnez-vous à nos tutoriels vidéo sur la chaîne YouTube pour WordPress. Vous pouvez aussi nous trouver sur Twitter et Google+.