Ajouter des Images sur une Landing Page WordPress

Définir le design d'une landing page
Vidéo non disponible ! Réessayez plus tard
Cette vidéo fait partie de la formation
Apprendre Hubspot : Les fondamentaux
Revoir le teaser Je m'abonne
3,0
Transcription

49,00€ Je commande

À partir de
27€ /mois
Je m'abonne à Elephorm

Description Programme Avis
3,0
49,00€ Je commande

À partir de
27€ /mois
Je m'abonne à Elephorm

Les objectifs de cette vidéo incluent :

  • Acquérir des compétences pour ajouter et remplacer des images sur WordPress.
  • Comprendre les bonnes pratiques de SEO pour les images.
  • Apprendre à utiliser le Lazy Download pour optimiser la vitesse de chargement de la page.

Apprenez à ajouter des images à votre landing page WordPress et à optimiser pour le SEO.

Dans cette vidéo, vous découvrirez comment paramétrer et remplacer des images sur une landing page WordPress.

Nous explorerons comment intégrer des images depuis votre ordinateur ou par URL, en utilisant des exemples concrets. Vous apprendrez également à utiliser des techniques de SEO pour améliorer vos performances de recherche.

Nous couvrirons l'ensemble du processus : ajouter, remplacer des images, configurer les textes alternatifs, ajuster les tailles d'images, et optimiser le chargement d'images (Lazy Download) pour une meilleure performance de la page.

Voir plus
Questions réponses
Pourquoi est-il important d'utiliser un texte alternatif pour les images?
Le texte alternatif aide les moteurs de recherche à comprendre le contenu de l'image pour améliorer le classement SEO.
Qu'est-ce que le Lazy Download et pourquoi est-il utilisé?
Le Lazy Download permet de différer le chargement des images pour accélérer le chargement initial de la page.
Comment ajouter une image depuis une URL dans WordPress?
Vous pouvez ajouter une image en utilisant l'option d'insertion via URL dans la bibliothèque de médias de WordPress.
Dans la vidéo précédente, nous avons vu comment paramétrer les différents éléments globaux de design, donc à savoir la typographie et aussi le design des boutons qui seront présents dans la landing page. Maintenant, on va voir comment on peut ajouter une image à notre page de destination. Donc là, on voit déjà qu'il y a déjà des images qui sont présentes ici, ici et aussi ici. On va voir déjà que très directement, on peut simplement, vu qu'on commence à partir d'un modèle, remplacer une image pour une autre. Déjà, il va falloir qu'on ait un objectif de landing page, à savoir concrètement, qu'est-ce qu'on va faire comme page. Pour ce faire, ce que je propose, c'est de prendre l'exemple d'une page que j'ai déjà créée sur WordPress, qui est une landing page qui permet de faire la promotion d'un service de consulting pour accompagner les entreprises dans la structuration de leur activité et la gestion de leur projet grâce à un outil qui s'appelle Notion. Donc du coup, la landing page, la voici. Elle est faite sur WordPress, avec une présentation, une photo, un petit peu une explication de la méthode de l'accompagnement du process, quelques références clients et du coup, un formulaire qui permet de s'inscrire pour pouvoir avoir un appel avec le consultant et quelques questions. On va faire une version un peu plus légère, un peu plus light de ça, mais comme on peut le voir, si je regarde le modèle, on voit qu'il y a quand même quelques similitudes et donc on va partir de ce modèle pour essayer petit à petit d'essayer de faire une landing page où le but est de générer des leads pour trouver des prospects qui sont intéressés par un accompagnement sur l'outil Notion. Et donc, là, ce qu'on va vouloir faire, c'est changer une image et mettre cette image-là à la place de celle-ci. Pour ce faire, je clique sur l'image et là, je peux cliquer sur Remplacer et on voit qu'une bibliothèque d'images s'est affichée avec plusieurs images que j'ai mises au préalable. Comment j'ai fait pour peupler cette bibliothèque des images qui m'intéressent ? J'ai cliqué sur Ajouter une image, Charger des fichiers et là, simplement, depuis mon ordinateur, je viens sélectionner les images qu'il me faut et je clique sur Ouvrir, ce qui me permet de les mettre dans la bibliothèque. Il y a aussi une autre méthode qui existe, c'est de faire ça à partir d'une URL, c'est-à-dire de trouver, par exemple, une image libre de droit sur Pixabay ou sur Unplush, par exemple, de sélectionner cette URL et de, à partir de là, permettre à HubSpot de retrouver cette image et donc de la mettre dans la bibliothèque. Voilà un petit peu comment ça fonctionne. Je rappelle qu'on a cliqué sur Remplacer et qu'on va essayer de mettre cette image. Pour ce faire, je clique et là, on voit bien que l'image a été remplacée directement. Du coup, voilà comment ça fonctionne. Ensuite, on a quelques paramétrages qui nous sont possibles, qui permettent de paramétrer tout ça et de finaliser l'intégration de cette nouvelle image. On a d'abord le texte Alternative qui est assez important si vous vous intéressez aux aspects SEO, c'est-à-dire à vos performances sur les moteurs de recherche, notamment ici Google Images. Pour ce faire, le texte Alternative, c'est un texte qui va être marqué dans le code HTML, qui ne va pas être vu par les internautes, mais qui va être vu par les crawlers, qui vont être vus par les robots, par exemple, de Google, qui vont du coup comprendre quelle image grâce à ce texte Alternative. Là, par exemple, on pourrait marquer Consultant Notion. Comme ça, les robots de Google savent que c'est une photo d'un Consultant Notion et ça permet un petit peu de contextualiser cette image, ça permet de valoriser l'effort un petit peu SEO de sa page pour pouvoir éventuellement apparaître mieux quand les internautes tapent sur les moteurs de recherche Consultant Notion ou Expert Notion, etc. Donc ça, c'est assez important et c'est vraiment pour du SEO. Ensuite, il y a plusieurs paramétrages au niveau de la taille, pour ajuster la taille de l'image et aussi pour définir la taille de l'image. Nous, par exemple, on va cliquer sur Taille d'origine. Ça, c'est vraiment la taille exacte, la taille d'origine de l'image, mais on pourrait cliquer sur Personnaliser et modifier la taille de manière manuelle, et vraiment décider, pixel par pixel, la hauteur et la largeur de l'image. Voilà un petit peu pour ça. Ensuite, il y a le chargement de l'image aussi qu'on peut choisir, soit de le mettre par défaut, c'est-à-dire que c'est votre navigateur, que ce soit Chrome, etc., qui va ouvrir lorsqu'un internaute va atterrir sur cette page-là. Votre navigateur va être paramétré d'une telle ou de telle autre manière qui va faire que soit la page va s'ouvrir en même temps, l'image va s'ouvrir en même temps que la page, ou alors il va y avoir un petit décalage, et c'est ce qu'on peut choisir ici en cliquant sur Paresseux, qui en fait en anglais veut dire Lazy, Download, qui fait que quand un internaute va atterrir sur votre page, il va y avoir d'abord toute la page qui va se charger en premier, et ensuite l'image va se charger un petit peu après en décalé, et ça va permettre de booster encore une fois les performances SEO de votre page, parce qu'un des points qui est important, c'est la vitesse de chargement de votre page, et si vous mettez votre image en Paresseux, c'est-à-dire en Lazy Download, elle va se charger après, donc l'internaute va vraiment directement avoir accès à votre page, la page va charger beaucoup plus rapidement pour lui, petit à petit l'image va apparaître, mais il aura déjà la vision de la page sans l'image s'il a une mauvaise connexion, et donc ça c'est un bon signal pour Google, parce que ça permet à l'utilisateur d'avoir quand même très vite de la matière, quelque chose à regarder, et d'éviter qu'il parte si sa connexion est trop mauvaise, et que l'image met longtemps à charger, et que du coup la page met du temps à apparaître. Donc voilà, c'est simplement savoir, est-ce que vous voulez que l'apparition de l'image se décale par rapport à l'apparition de la page, si la connexion est mauvaise ou pas, nous on va le mettre en Paresseux, donc en Lazy Download, du coup à des fins un petit peu SEO et de performance, mais voilà, simplement savoir que vous n'êtes pas obligé de le faire, et aussi un lien, vous pouvez faire en sorte que quand les internautes sont sur votre landing page, que s'ils cliquent sur l'image, ils atterrissent sur une autre page web, donc là, pour ce faire, il faudrait marquer ici une adresse URL, donc une adresse de page internet de destination, pour qu'ils puissent cliquer. Nous on ne va pas le faire, ce n'est pas le but, c'est simplement une image pour illustrer qui est le consultant, mais voilà, simplement savoir qu'on peut le faire. Une fois qu'on est OK avec tout ça, on clique sur Appliquer les modifications, et voilà, on a bien notre landing page, avec la nouvelle image qu'on a bien pu remplacer, et voilà comment ça fonctionne. Maintenant, là, on a vu que c'était un simple remplacement, parce qu'il y avait déjà un bloc images à la base, souvenez-vous, maintenant, on va voir comment on peut supprimer ce bloc ici, donc là, on n'a plus du tout l'image, et on va voir comment on peut l'ajouter de A à Z, donc c'est un petit peu la même manière, sauf que là, il va falloir cliquer sur Ajouter, se mettre ici dans le bloc images, avec la méthode du drag and drop, cliquer, relâcher le clic ici, quand il y a cette petite barre bleue verticale qui s'affiche. Là, on voit bien qu'on recrée ces deux colonnes, avec cette partie ici et la partie images. Je viens cliquer sur Images, et là, comme tout à l'heure, je clique sur Remplacer, je sélectionne dans ma bibliothèque la bonne photo, je change le texte alternatif à des fins purement SEO, je mets ça en paresseux, donc lazy download, pour que la page s'affiche très vite à l'utilisateur, et que l'image arrive après si la connexion est mauvaise, plutôt que de tout afficher d'un coup à l'utilisateur, au risque que le chargement de la page soit trop long, et je clique sur Appliquer les modifications.

Programme détaillé de la formation

2 commentaires
3,0
2 votes
5
4
3
2
1
elephorm-1130164@addviseo.com
Il y a 1 year
Commentaire
c est un bon début pour appréhender l'outil
frederic_28
Il y a 2 years
Commentaire
Dommage qu’il n’y ai pas une formation avancée
Nos dernières formations Webmarketing
  • L'écriture pour le SEO
    Découvrir
    1h15 1 leçon
  • Apprendre Typeform : Les fondamentaux
    Découvrir
    Apprendre à créer un formulaire avec Typeform
    1h16 3,33 / 5
  • Apprendre Google Ads
    Découvrir
    Apprendre à créer et gérer vos campagnes publicitaires Google AdWords.
    2h46 3 / 5
  • Pack 5 formations
    Pack Google : Marketing tools
    Découvrir
    Si vous souhaitez promouvoir votre activité, créer un site internet, évaluer vos performances, mener votre enquête pour mieux comprendre le besoin de vos clients, pour optimiser vos campagnes marketing, ce pack est idéal pour vous.  Dans ce pack vous trouverez le programme complet des formations sur les applications Google qui constituent une boîte à outil Marketing :  Apprendre Google My Business pour optimiser la visibilité de votre organisation ou boutique sur Internet. Apprendre  Google Sites pour créer des sites internet très rapidement, sans compétences particulières en coding. Apprendre Google Tag Manager pour déployer et utiliser les outils d'intégration de tracking Apprendre Google Forms pour créer des formulaires en ligne pour collecter des informations pertinentes auprès de vos clients ou pour comprendre les profils et les besoins de vos prospects. Apprendre Google Data Studio pour exploiter, structurer et analyser vos données issues de différentes sources Google, de façon intuitive, collaborative et sécurisée.
    8h31
  • Apprendre Google My Business
    Découvrir
    Apprendre à exploiter Google My Business afin d’optimiser votre visibilité sur Internet.
    1h39 4,67 / 5