Share
WordPress est un logiciel qui gère jusqu'à 25% des sites Web du Web. Des sites Web majeurs comme le New York Times, CNN et Forbes utilisent tous WordPress pour faire fonctionner leurs sites Web..
Ce que WordPress est pour les développeurs Web, Adobe Lightroom est pour les photographes. Dans ce didacticiel, vous apprendrez à utiliser ces deux puissants outils ensemble. Vous apprendrez comment transférer rapidement et facilement vos images de Lightroom vers un site géré par WordPress. Plus important encore, nous le ferons de manière à optimiser le référencement afin que vos images soient découvertes..
L'optimisation des moteurs de recherche (également appelée SEO) est un ensemble de pratiques interdépendantes de conception, de publication et de gestion de données permettant de rechercher des pages Web. La vérité est qu’il n’ya pas vraiment de magie dans le référencement des images. Tout se résume à l’ajout de contexte à vos images d’une manière qui ait du sens pour les ordinateurs..
Pensez-y de cette façon: vous entrez une requête de recherche dans le moteur de recherche de votre choix. Le moteur de recherche vous montre une liste de pages qui correspondent à ce qu'il pense vous cherchez. Les moteurs de recherche utilisent des robots, des programmes informatiques et des algonrhithmes, qui explorent automatiquement le Web et construisent des listes de sites correspondant à des mots clés..
Un moteur de recherche peut dire que les images se trouvent sur une page Web, mais il ne peut pas facilement déterminer ce qu’elle représente, nous devons donc la compléter avec des données supplémentaires, du type pouvez comprendre. Ce type de données s'appelle information sémantique: il s'agit d'une information qui aide à donner un sens aux photos individuelles dans leur contexte et le reste de la page Web. Nous utilisons des champs de métadonnées pour transmettre ces données sématiques.
Google se penche sur certains des Mots clés caché dans notre HTML pour aider à trouver des images. Nous pouvons ajouter des choses comme titres, Mots clés, et alt texte dans le code de notre site Web pour aider un moteur de recherche à indexer notre site aussi facilement que possible. Il n’est pas certain qu’en ajoutant des informations thématiques, vous puissiez déplacer votre site vers la première page des résultats de Google, mais quelques étapes de base en matière de référencement peuvent certainement vous aider. C'est aussi juste une bonne hygiène des données!
Voici quatre informations clés sur l'optimisation du référencement à ajouter à vos images:
Si vous ne faites rien d'autre, assurez-vous de renommer vos images de manière à les décrire. Un nom de fichier simple comme "resizing-images-tutorial.jpg" représente une amélioration considérable par rapport à "IMG_9052.cr2". L'utilisation d'un nom de fichier avec des mots décrivant celui-ci augmentera ses chances d'être trouvé.
Lors de l’exportation de Lightroom, ma méthode préférée consiste à utiliser le "Nom du fichier" section de la fenêtre d'exportation. N'oubliez pas que nous voulons renommer l'image exportée, pas le fichier d'origine. Trouvez le Nom du fichier section et vérifier la Renommer en boîte. Ensuite, choisissez une option de liste déroulante qui comprend "nom d'usage" afin que nous puissions ajouter notre propre texte personnalisé.
La dernière étape consiste à ajouter le texte personnalisé. Pour le Web, il est préférable de séparer les mots d'un nom de fichier en utilisant des tirets au lieu d'espaces. Personnalisez le nom de fichier de chaque image pour obtenir les meilleurs résultats..
Utilisez une option de nom personnalisé pour donner à vos noms de fichiers une meilleure chance d’être trouvés. Quelques mots décrivant le contenu d'une image vont très loin!Le texte alternatif, ou "texte alternatif", est utilisé pour fournir une description textuelle du contenu d'une image. Rappelez-vous qu'un moteur de recherche ne peut pas encore déterminer le contenu d'une image. Nous devons donc l'aider en utilisant du texte alternatif..
Vous ne verrez probablement jamais alt texte; la partie importante est qu'un moteur de recherche.
Le texte alt d'une image doit également être défini en HTML. Le texte alternatif doit décrire brièvement l'image. Nous pouvons définir ce texte alternatif dans la médiathèque WordPress. WordPress l'ajoutera automatiquement..Le texte alternatif est placé dans le même bit HTML que vos images. Utilisez-le pour ajouter une description de l'image. Une brève description du contenu d'une image est essentielle à la convivialité en matière de référencement. Si écrire du code n'est pas votre truc, ne vous inquiétez pas; nous verrons comment ajouter ce texte alternatif à l'aide de WordPress dans la section suivante de ce guide.
Avoir du texte alternatif pour vos images est également crucial pour les malvoyants. Un logiciel de lecture d'écran conçu pour aider ceux qui ont une perte totale ou partielle de la vue lira le texte alternatif à la place d'une image. Amherst College propose un excellent guide pour optimiser vos pages Web en termes d'accessibilité.
Le titre d'une image doit également être contenu dans la balise HTML. Le titre devrait être une version encore plus courte de la description, avec seulement quelques mots qui signalent le contenu d'une image..
Vous devez également définir un titre d'image en HTML avec la balise "title =" dans le même bloc d'image. Encore une fois, WordPress rend cela facile à ajouter.Les titres sont une autre pièce du puzzle pour aider les moteurs de recherche à indexer notre site. WordPress contient un champ de titre qui aidera nos efforts de référencement.
Imaginez une légende comme étant le texte qui apparaît immédiatement après une image qui fournit des commentaires supplémentaires. Les sous-titres ne sont pas ajoutés directement à une balise d'image directement, mais ils sont certainement complémentaires. En HTML5, le
Maintenant que nous comprenons les piliers du référencement par image, voyons comment les ajouter facilement et rapidement à notre site géré par WordPress. Nous pouvons reporter une image Titre et légende de notre catalogue Lightroom à WordPress.
Dans le Lightroom Bibliothèque module, trouver le métadonnées panneau sur le côté droit. Vous pouvez voir le titre et la légende de l'image.
Lorsque vous exportez une image de Lightroom, assurez-vous d'inclure "toutes les métadonnées."Cela garantira que le titre et la légende sont enregistrés dans l'image JPEG et seront lus et inclus par WordPress.
Assurez-vous que lors de l'exportation d'une image, vous incluez des métadonnées dans le fichier. Cela rendra ces métadonnées disponibles dans WordPress.Une fois que vous avez exporté un fichier image soigneusement nommé avec un titre et une légende, vous êtes prêt à le télécharger sur WordPress. Allez sur le WordPress Médiathèque et téléchargez cette image comme vous le feriez normalement. L'image téléchargée porte le même titre et la même légende que celle définie dans le panneau de métadonnées de Lightroom.!
Enfin, les fruits de notre travail! Le titre et la légende que nousVous devrez ajouter manuellement du texte alternatif aux images une fois qu'elles atteignent WordPress. Malheureusement, il n'y a pas de champ dans Lightroom qui mappe vers un "texte alternatif" dans WordPress. Rappelez-vous qu'il s'agit du texte caché dans le code HTML qui aidera les moteurs de recherche à trouver et à indexer nos images..
Du texte alternatif devra être ajouté aux images dans la médiathèque WordPress..Après avoir défini le texte alternatif, appuyez sur Mettre à jour pour enregistrer l'image. Lorsque vous l'insérez dans un message ou une page, WordPress conserve les métadonnées et inclut les métadonnées que nous avons ajoutées au code HTML..
Ces étapes sont une aide majeure pour optimiser une image pour le Web. Nous pouvons également aller plus loin en redimensionnant et en compressant des images pour le Web..
Préparer des images pour le Web ne se limite pas à les charger avec des mots-clés et à les déposer dans WordPress. Nous devons également réfléchir à la taille et aux dimensions du fichier. N'oubliez pas qu'une grande partie de la population connectée à Internet n'est pas assez chanceuse pour bénéficier d'une excellente connexion haut débit, et nous devrions également tenir compte de leur expérience..
mobiForge a récemment écrit que la taille moyenne d'un fichier de page Web était supérieure à celle de l'ensemble du jeu vidéo classique de 1993, Doom. Ce n’est pas une mauvaise chose en soi, mais un bon rappel que les pages Web sont plus riches en multimédia et en grandes images qu’elles n’ont jamais été. Cela nous rappelle que nous devons toujours optimiser la taille de vos fichiers image..
Lorsque nous sommes prêts à envoyer des images sur le Web, vous devez optimiser deux facteurs clés: les dimensions et la qualité. Regardons comment perfectionner les deux.
Les dimensions d'une image numérique sont la longueur et la largeur de l'image, mesurées en pixels. Une image dite "600 x 400 pixels" est supposée avoir une largeur de 600 pixels et une hauteur de 400 pixels.
Les images capturées avec mon Canon 6D mesurent 5472 x 3648 pixels. Au moment où vous les voyez sur Tuts +, leur disposition est limitée à 850 pixels sur le côté long. Théoriquement, je pourrais télécharger l’image complète, mais quoi qu’elle apparaisse de 850 pixels au maximum.
Cet effet est exactement la raison pour laquelle je redimensionne toujours mes images dans un format adapté au Web. Mes téléspectateurs ne disposent pas de moniteurs qui affichent chaque pixel. Il est donc logique de redimensionner l’image et d’économiser le temps de chargement..
Cette simulation illustre la taille d’une image originale de 10 mégapixels par rapport à son apparence sur le Web. La grande image de prévisualisation que vous voyez est une version à l’échelle de l’image complète de 10 mégapixels que j’ai capturée. Dans l'encadré, la taille a été comparée à son apparence sur Tuts +. Une image pleine largeur de 10 mégapixels mesure plus de 4000 pixels de largeur, alors qu'elle apparaît dans les articles Tuts + à seulement 850 pixels du côté long. C'est une excellente illustration de la raison pour laquelle le redimensionnement est si important.Quelles sont les dimensions correctes pour une image sur le Web? La réponse est "ça dépend où ça va". Si vous utilisez WordPress, consultez la documentation de votre thème pour connaître les largeurs d’image prises en charge. Le développeur détermine la manière dont les images apparaîtront dans un thème WordPress. Si la documentation n'est pas disponible, essayez un site tel que PiliApp pour effectuer vos propres mesures sur une image du site vers lequel vous publiez..
Les images de haute qualité utilisent plus d'espace disque. Plus une image est détaillée et colorée, plus le fichier sera volumineux. Bien que nos archives d’images doivent inclure ces images de qualité complète, la préparation d’une image pour le Web implique un compromis entre qualité et taille du fichier. Abandonner un peu de qualité entraîne un temps de chargement beaucoup plus rapide pour le spectateur.
Lors de l’exportation dans Lightroom, vous pouvez utiliser le Qualité curseur pour ajuster la qualité de sortie d'une image. C'est une échelle de 0 à 100, avec une image de qualité 0 rendant la plus petite taille de fichier. Une image de qualité 100 maximise la qualité et la taille du fichier.
Cette comparaison de qualité d'image montre une légère différence entre les différents paramètres de qualité. Quelques différences peuvent être observées dans les détails les plus fins, ainsi que dans les couleurs du ciel. Notez que dans l'image de qualité la plus basse, il y a quelques "bandes" dans le ciel (lignes subtiles) tandis que les images de qualité supérieure. L'image de qualité 25 m'a donné une image de 91 Ko, alors qu'une image de qualité 100 était une image de 366 Ko. Il s’agit de trouver un équilibre entre qualité et taille de fichier..L’un de mes moyens préférés pour contrôler la taille du fichier est d’utiliser le "Limiter la taille du fichier à" option. J'utilise fréquemment cette option lorsque j'exporte des images à publier sur Tuts +, étant donné que Tuts + a une limite de 150 kilo-octets pour les images dans des articles..
L'utilisation de l'option "Limiter la taille du fichier à" contourne complètement le curseur de qualité. Au lieu de choisir une qualité entre 0 et 100, vous pouvez simplement définir une taille de fichier maximale (en kilo-octets) et Lightroom choisira un paramètre de qualité pour vous..
La zone "Limiter la taille du fichier à" peut être utilisée à la place du curseur de qualité. Lorsque vous cochez la case dans la fenêtre d'exportation, choisissez la taille de fichier maximale de votre image. Lightroom la fera fonctionner..D'après mon expérience, lorsque j'utilise le curseur de qualité pour les images Web, je laisse généralement le paramètre de qualité dans 60-75 intervalle. Cela semble être l’endroit idéal pour la taille du fichier et la qualité de l’image. L'augmentation du curseur bien au-delà de cette valeur donne un fichier beaucoup plus volumineux sans grande différence visuelle.
Si vous voulez en savoir plus sur les clés pour redimensionner des images pour le Web, consultez mon article de l'an dernier, Comment exporter des fichiers JPG pour le Web à partir d'Adobe Photoshop Lightroom. Bien que les métadonnées pour le référencement soient au cœur de ce didacticiel, la taille de l’image reste un élément essentiel de la convivialité de la recherche..
Dans ce didacticiel, nous avons expliqué comment choisir le moyen le plus simple pour exporter des images de Lightroom vers un site Web WordPress. Ne fais pas d'erreur; cela ne va pas instantanément tirer votre site au sommet de Google pour les termes communs, mais il volonté aider énormément quelqu'un à trouver vos images.
Il est à noter qu'il existe plusieurs plugins ou add-on WordPress qui peuvent automatiser ce processus. Cependant, les plugins qui ne sont pas fréquemment mis à jour peuvent ouvrir votre site aux vulnérabilités de sécurité. Vous devez également compter sur un développeur qui maintiendra la compatibilité du plug-in avec les nouvelles versions de WordPress. Deux plugins populaires incluent WP / LR Sync et LR / Blog.
Si vous voulez en savoir plus sur WordPress, la section Code Tuts + contient une mine de contenu pour modifier et étendre WordPress. La section photo et vidéo présente également une large couverture d'Adobe Lightroom si vous souhaitez améliorer ces compétences..
Enfin, le référencement est un domaine de recherche en constante évolution. Google met constamment à jour son algorithme utilisé pour trouver les pages qui correspondent le mieux à la requête de recherche. Il y a une tonne de mauvais conseils et "conseils" pour le référencement. Mon site Web préféré pour le référencement est le blog de Moz. Les génies de Smashing Magazine ont également une excellente description de la construction d’un site Web optimisé pour le référencement.
Que faites-vous pour que vos images soient prêtes pour le Web? Faites-le moi savoir dans les commentaires.
Accentsconagua