Trouve ce qui cloche sur ton site avec une Heatmap [Tuto]

article sur hotjar

Pour améliorer ton site, tu dois de savoir comment tes visiteurs naviguent sur tes pages.

Tu visualises leur comportement sur ta page avec un outil simple mais redoutablement efficace une heatmap.

exemple d'heatmap

La carte de chaleur matérialise en couleur les zones qui attirent et celles qui laissent indifférent. C’est particulièrement utile sur ta page d’accueil.

La carte de scroll est un outil complémentaire qui t’indique quand tes lecteurs décrochent.

La carte de mouvements t’indique ce qui est lu.

Hotjar offre ces outils pour les sites en dessous de 2 000 pages vues par jour. Je ne sais pas pour toi, personnellement j’en suis à des années lumières. Cela te laisse tout le temps d’améliorer ton site.

Continuer la lecture de « Trouve ce qui cloche sur ton site avec une Heatmap [Tuto] »

Mise en page et publication d’articles sous WordPress [Tuto]

article mise en page et publication sur Wordpress

La mise en page sur WordPress est rapide à assimiler.

Tu retrouveras des similitudes avec un traitement de texte classique. D’autres notions sont propres à la publication sur internet.

Je t’accompagne de A à Z et te montre toutes les facettes de l’interface.

Continuer la lecture de « Mise en page et publication d’articles sous WordPress [Tuto] »

Réalise facilement la page d’accueil de ton site [Tutoriel]

contenu page acceuil

Tout site commence par la page d’accueil.

Elle requière toute ton attention car c’est la page qui, en général, récolte le plus de vues.

Par où commencer ?

Je te présente les éléments incontournables accompagnés de nombreux exemples pour t’aider à trouver l’inspiration.

Continuer la lecture de « Réalise facilement la page d’accueil de ton site [Tutoriel] »

4 extensions gratuites pour accélérer ton site [Tutoriel]

article optimiser la vitesse de ton site

Tu as publié du contenu de qualité et tes visiteurs se sauvent avant même d’avoir lu la moindre ligne.

Pourquoi faire fuir tes visiteurs avec un site qui se traine ?

escargot

La vitesse de chargement de ta page influe fortement sur l’attractivité de ton site pour tes lecteurs et Google.

Je te propose des actions simples et rapides à mettre en place qui ne requièrent aucune compétence technique.

Nous allons utiliser 4 extensions spécialisées dans l’optimisation des sites WordPress. Continuer la lecture de « 4 extensions gratuites pour accélérer ton site [Tutoriel] »

Redirige facilement tes pages supprimées en 5 minutes [Tuto]

visuel article redirection

Tu as supprimé une page ou modifié l’URL. Tes visiteurs arrivent désormais sur une page d’erreur.

page 404

Tes lecteurs et Google sont d’accords sur ce point : les pages d’erreurs 404 sont une catastrophe pour ton site.

La solution : tu rediriges tes visiteurs vers une nouvelle page.

Avec 1 million d’utilisateurs, l’extension Redirection corrige ce problème en moins de 5 minutes. Continuer la lecture de « Redirige facilement tes pages supprimées en 5 minutes [Tuto] »

Personnalise tes pages avec Elementor

elementor illustration de l'article

Tu as une idée précise de ce que tu voudrais réaliser sur les pages de ton site mais l’éditeur de WordPress est plus que limité pour la mise en forme.

Comme 900 000 personnes, tu vas bâtir ta page exactement comme tu le souhaites avec Elementor.

En effet, tu construis ta page à l’aide de blocs que tu associes à ta convenance : colonnes, slider, vidéo, carte, image, animation, compteur, widget…

Je n’aborderai dans cet article que les fonctionnalités de la version gratuite.


picto articles intermediaires

Débutant

Les principales fonctionnalités d’Elementor en vidéo

Premiers pas avec Elementor + l'utilisation d'un modèle prédéfini

Rechercher Elementor Page Builder dans les extensions WordPress, l’installer et l’activer.

icône de l'extension elementor

Avant de te lancer, tu dois bien comprendre que chaque page construite avec Elementor intègre une mise en page propre. Il ne sera plus possible de travailler sur ces pages dans l’éditeur standard de WordPress.

Elementor est parfait pour construire des pages riches et attractives. Cependant, je déconseille fortement son usage pour les articles.

Désormais, tu peux lancer la mise en page avec Elementor.

  • Bouton Modifier avec Elementor juste sous le titre dans WordPress.

elementor bouton d'activation

L’interface spécifique de l’outil diffère fortement de celle de WordPress.

elementor interface

Sur la colonne de gauche, se situent tous les éléments que tu peux intégrer ainsi que leurs réglages. A droite, tu visualises ta page et les modifications apportées en direct.

Pour construire ta page, tu as deux options :

  • Partir d’une page blanche
  • Utiliser un modèle Elementor

Pour utiliser un modèle, tu sélectionnes Ajouter un modèle dans la colonne de droite.

elementor ajouter un modèle

Tu accèdes à la bibliothèque (ceux marqués PRO sont réservés à la version payante).

Voici trois exemples de modèles gratuits pour te donner une idée.

Clique sur les miniatures pour découvrir la page complète.

Pour l’ajouter à ta page :

  • Cliquer sur le modèle choisi
  • Bouton Insertion en haut à droite

elementor modèle insertion

Tu peux ensuite modifier tous les éléments en cliquant dessus. Les paramètres sont disponibles dans la colonne de gauche.

elementor modele parametres

Les modèles sont attractifs et personnalisables aux couleurs de ta marque. Cependant, je préfère réaliser ma page comme je l’entends et partir d’une page blanche.

Ces modèles sont comparables à des thèmes. Tu peux les personnaliser mais si tu souhaites t’éloigner de la trame le résultat deviens vite improbable.

Définir le style général du document

Les styles définis s’appliquent à toute ta page pour t’éviter de refaire l’opération à chaque section.

Cette étape est inutile si tu as réalisé un thème enfant avec tes couleurs et tes polices personnalisées.

  • Cliquer sur le menu en haut à gauche
 elementor menu

Couleurs par défaut

Tu vas définir 4 couleurs pour ta page :

  • Principale
  • Secondaire
  • Texte
  • Accent

palette de couleurs de la page

  • Cliquer sur la couleur
  • Indiquer la référence Hex avec le #
  • Cliquer en dehors de la fenêtre
  • Bouton Appliquer

définir la couleur

Polices par défaut

Tu vas définir 4 polices et leurs tailles :

  • Titre principal
  • Titre secondaire
  • Le texte
  • Le texte accentué
  • Bouton Appliquer

polices de la page

Nous allons voir comment utiliser Elementor.

Les principes de bases d'Elementor

La construction de ta page va se réaliser par un empilement d’éléments. Chaque bloc sera géré indépendamment et pourra être déplacé.

Pour être efficace, il est préférable d’établir un plan d’ensemble avant de se lancer pour obtenir un résultat homogène sans perdre de temps. Nous verrons cela dans le dernier chapitre.

L’élément de base est la section qui rythme horizontalement ta page.

  • Bouton Ajouter une section dans la page

elementor ajouter une section

  • Définir le nombre d’éléments que tu trouveras dans cette section et leur proportion
    Par exemple, une colonne à gauche comme dans l’exemple.
 elementor définir la structure

Les options de section apparaissent quand tu la sélectionnes.

elementor les options de la section

Avec de gauche à droite :

  • Modifier : pour afficher les réglages et déplacer ta section à un autre emplacement (en laissant appuyé).
  • Dupliquer
  • Ajouter une section au dessus
  • Enregistrer la section comme modèle pour l’utiliser dans d’autres documents
  • Supprimer
  • Cliquer sur le +
  • Glisser l’élément dans l’emplacement

elementor ajouter un élément

Pour chaque élément sélectionné, tu retrouveras toutes les options disponibles dans la colonne de gauche.

elementor contenu

Les réglages diffèrent pour chacun mais les principes de bases sont identiques.

Onglet Contenu
Tu trouveras les caractéristiques de l’élément ainsi pour une image : chargement de l’image, taille, alignement, légende, lien…

Onglet Style
Tu vas définir l’apparence : taille, opacité, l’animation quand la souris passe au dessus, les bordures, les ombres…

Onglet Avancé
Tu vas affiner avec les marges internes et externes du bloc, l’ordre de superposition (Index-Z), les animations d’apparition, l’arrière plan (coloré ou une image), masquer l’élément sur certains appareil…

En bas de colonne
Les réglages reprennent les éléments présent dans la colonne de gauche dans l’éditeur de WordPress.

elementor réglages

Responsive bascule entre les affichages Ordinateur, Tablette et Mobile.

elementor responsive

Historique te permet de visualiser les dernières modifications apportées à ta page et de revenir en arrière.

elementor historique

Prévisualiser les modifications ouvre l’aperçu de ta page dans une autre fenêtre

elementor prévisialiser

La flèche à droite de publier te permet d’accéder à la sauvegarde de ta page.

elementor enregistrer

Le menu pour revenir à l’éditeur WordPress est caché en haut.

Je l’ai cherché un moment celui-ci.

Concrètement, nous allons voir quels éléments vas-tu pouvoir ajouter à ton site.

Les éléments à ta disposition

Je vais intégrer tous les éléments spécifiques à Elementor que tu auras à ta disposition. Cela va simplifier ton choix et va t’éviter de devoir réaliser les essais.

colonnes

Colonne 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Colonne 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

titrage

Ajoutez votre texte de titrage ici

image
éditeur de texte
Je suis un bloc de texte. Cliquez sur le bouton modifier pour changer ce texte. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
vidéo
diviseur
espaceur

Ajoute un espace (difficile de montrer du vide)

Google maps
icône
boite image

titre

texte explicatif.

boîte icône

titre

texte explicatif.

galerie d'images
carrousel d'images
liste d'icônes
  • Élément de liste #1
  • Élément de liste #2
  • Élément de liste #3
compteur
titre
barre de progression
Ma compétence
titre 80%
témoignage
texte du témoignage
Civ Prénom Nom
Titre
onglets

Texte 1.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Texte 1.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Texte 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

accordéon

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

bascule
Je suis un élément de contenu. Cliquez sur le bouton modifier pour changer ce texte. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Je suis un élément de contenu. Cliquez sur le bouton modifier pour changer ce texte. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
alerte
soundcloud
code court

Pour insérer un shortcode qui affichera ton formulaire par exemple

html

Pour intégrer du HTML

ancre de menu

Intègre un repère que tu pourras indiquer dans ton menu (personnellement je suis resté à la méthode basique avec name)

barre latérale

Reprend exactement la barre latérale de tes articles ou ton pied de page

Les widgets WordPress

Tu peux également intégrer les Widgets WordPress. Je ne vais pas tous les tester mais je t’en présente un échantillon de ceux qui peuvent être facilement utilisés dans une page d’accueil.

barre recherche
mailchimp
Newsletter

La construction efficace d’une page

Pour que cela soit plus concret, j’ai créé en direct la page de présentation de ma newsletter. Tu retrouves toutes les étapes pas à pas.

Le texte

Tu gagnes un temps précieux en rédigeant l’intégralité du texte avant de définir ta mise en page. Ton plan structure ta page et tu visualises rapidement les sections faibles où tu manques d’arguments.

Il est très tentant de commencer par expérimenter les nombreuses animations et éléments visuels d’Elementor avant de te concentrer sur ton texte. L’impression d’avancer très vite au démarrage est vite contrebalancée par un résultat final décousu. Tu risques fort de devoir tout reprendre de zéro.

Le plus simple est d’écrire ton texte dans un éditeur simple. Tu copies-colles ensuite dans chaque bloc.

Je te renvoie à l’article sur les éléments de la page d’accueil pour t’aider à définir ton plan et rédiger ton texte.

La structure de ta page

Tu définis l’organisation générale de ta page. Le plus simple est de réaliser un croquis.

Comme tu le vois, le but n’est pas d’être exposé dans un musée.

croquis de la structure de la page

J’ai par exemple choisi de diviser ma page d’accueil en trois colonnes.

Mon titre occupe deux colonnes à gauche et mon contenu deux colonnes à droite. Les visuels sont disposés sur toute la largeur des trois colonnes.

Les visuels

Tu intègres tes visuels quand tout le texte est en place. Leur réalisation s’avère chronophage. Il est préférable d’incorporer directement le premier visuel d’une série pour valider le rendu.

Pour la taille de tes visuels, tu pars de la largeur disponible sur ta page (740 px sur Twenty Seventeen) puis par la % de la largeur occupé par ta colonne.

Équilibrer

Une page doit respirer. Il ne faut pas hésiter à réaliser des sauts de ligne, intégrer des visuels et subdiviser avec des titres. Les espaceurs permettent également d’équilibrer facilement les espaces.

Certains éléments peuvent écraser les autres par leur poids. Tu révises certains textes pour améliorer l’aspect visuel de la page.

Intégrer des animations

Pour casser l’effet statique de ta page, tu peux intégrer quelques animations visuelles. Un peu de patience, je te les présente dans le paragraphe suivant.

Mieux vaut se restreindre dans l’envie d’en parsemer son site et utiliser les plus sobres.

Le risque est de se retrouver avec l’effet sapin de noël. Cela clignote de partout. Tes yeux ne savent plus où se poser.

Ajuster pour la version mobile

Quand tu lances la visualisation de ta page en version mobile, tu peux avoir de belles surprises.

Voici comment mes titres de ma page d’accueil ressortaient.

titre non ajustés pour mobiles

  • Cliquer sur l’icône qui représente un ordinateur en bas du menu de gauche
  • Sélectionner Mobile

Comme tu le remarque dans l’image ci-dessous, tu as dans les menus de tous tes éléments une icône de mobile en bleu clair. Toutes les modifications que tu réaliseras seront uniquement appliquées à la version mobile quand l’icône sera présente.

responsive

Il est souvent judicieux de diminuer la taille de certains visuels et de centrer les titres.

Publier

Si tu n’as pas de page en place, tu cliques simplement sur publier.

Quand tu as déjà une page, tu travailles sur une page vierge puis tu importes ta page au dernier moment.

  • Enregistrer ta page finalisée comme modèle

elemetor enregistrer un modèle

  • Supprimer l’ensemble du contenu de ton ancienne page
  • Lancer Elementor
  • Cliquer sur Ajouter un modèle

ajouter un modèle

  • Onglet Mes modèles
  • Cliquer sur Insertion

mes modèles elementor

Les fonctionnalités avancées

Elementor possède de nombreuses possibilités au delà de la simple présentation en blocs pour donner du tonus à ta page et lui apporter un rendu professionnel.

Les animations

Les animations permettent d’ajouter de la vie à ta page. Comme toutes les bonnes choses, elles sont à utiliser avec parcimonie sinon tu arrives très rapidement à saturation.

Tu les trouveras dans Avancé.

menu animations

Les animations s’appliquent à un bloc et se déclenchent quand le lecteur arrive à la section.

Je te présente les grandes familles. Attention : cela “piquouille” un peu les yeux.

Fading : affichage progressif

Zoom : zoom grossissant

Bouncing : effet rebond

Slide : glissement

Rotate : effet de rotation pas forcement simple à placer

Attention seeker : pour attirer l’attention sur un point comme ici avec Pulse

Light speed : effet de vitesse

Special : difficile à décrire (arrivée en arc de cercle ??)

Mettre du texte sur une image

J’ai bloqué sur ce seul point dans la réalisation de ma page d’accueil. Ce n’est pas aussi intuitif que pour les autres options.

  • Créer une nouvelle section
  • Cliquer sur modifier une colonne

elementor modifier une colonne

  • Onglet Style
  • Cliquer sur le pinceau dans type d’arrière plan

elementor modifier colonne style

  • Cliquer sur Image et sélectionner ton visuel

elementor image en arrière plan

Les réglages à effectuer :

  • Position : Centre centré
  • Fichier joint : Défilement
  • Répéter : Non-répété
  • Taille : Couvrir

elementor réglages des images de fond

  • Ajouter un titre

ajout titre

Tu vas remarquer que ton image ne s’affiche pas en entier. C’est normal.

  • Onglet avancé

Pour ajouter un fond de couleur sous ton titre :

  • Cliquer sur le pinceau dans arrière plan
  • Sélectionner une couleur
  • Ajuster la transparence avec la réglette à droite

titre sur fond blanc

Voici le résultat :

résultat du titre sur fond blanc

Les marges internes positionnent ton texte au bon emplacement.

Les marges externes haut et bas ajustent la taille de l’image (s’arrêter quand ton visuel commence à zoomer). Gauche et droite réduisent la taille de l’encadré de couleur.

N’oublie pas de désélectionner la proportionnalité (à droite de la ligne) pour ajuster tes marges comme tu le souhaites.

Tu vas devoir un peu tâtonner avant d’obtenir le résultat souhaité.

  • Sélectionner la vue sur mobile

Si le résultat est fantaisiste, mettre toutes les marges à zéro.

Les effets de transition

Les transitions apportent du dynamisme à ta page en cassant l’aspect blocs de la mise en page. Démonstration en image :

Les effets s’enchainent naturellement et fonctionnent particulièrement bien en blanc sur un fond de couleur.

Pour accéder à cet outil :

  • Survoler la section
  • Cliquer sur l’icône de gauche (modifier section)

modifier section

  • Onglet Style
  • Menu Forme de séparation

forme de séparation

Tu peux installer ta forme en haut ou en bas du bloc.

Les 15 propositions en image :

Montagnes

Gouttes

Nuages

Zigzag

Pyramides

Triangle

Triangle asymétrique

Oscillation

Opacité d’inclinaison

Les réglages des transitions sont globalement identiques :

  • Couleur
  • Largeur
  • Hauteur
  • Envoyer à l’avant plan (en cas de superposition pour couvrir)
  • Inverser (pour certains)
options des transitions

Conclusion

Elementor s’avère un excellent outil pour construire une page d’accueil ou de vente. La version gratuite offre de nombreuses possibilités.

Les éléments sont responsive et tu peux optimiser la vue sur mobile.

Les fonctionnalités d’Elementor se maîtrisent rapidement et ne nécessitent que quelques essais avant d’obtenir le résultat souhaité.

Vitesse de chargement : Je n’ai pas remarqué de ralentissement de la page. Tu disposes d’une page attractive sans faire fuir tes visiteurs par un temps de chargement interminable.

Il est temps de te lancer pour avoir une page d’accueil ou de vente qui soit conforme à tes envies. Sur quelle page vas-tu te lancer : page d’accueil ou page de vente ?

Si tu souhaites aller plus loin, tu peux personnaliser le thème Twenty Seventeen.

Les autres articles qui peuvent t’intéresser

bannière de la newsletter pour pas un rond

Trouve les images et vidéos gratuites de ton site [Débutant]

creer des images pour son site

Les images constituent le facteur de séduction incontournable de ton site. Il ne faut surtout pas les négliger.

Tu vas découvrir comment créer de belles images pour ton site même si tu es un parfait débutant.

Continuer la lecture de « Trouve les images et vidéos gratuites de ton site [Débutant] »

Réalise ton mockup gratuitement en 3 minutes

article sur le s générateurs de mockup

Les mockups sont des visuels photoréalistes de mise en scène de produits ou de sites.

Tu vas les utiliser pour illustrer ton site, tes articles et tes publications sur les réseaux sociaux.

Voici trois exemples de ce que tu vas réaliser en 3 minutes :

placeit iphone8

mockuper imac

panneau affichage

Je trouve le résultat attractif et toi ?

Les outils en ligne que je te présente sont entièrement gratuits ou possèdent de nombreux modèles offerts. De plus, ce sont des services en ligne qui ne nécessitent aucune installation de logiciel.

J’ai réalisé pour toi une sélection des générateurs les plus performants et te présente les modèles les plus souvent utilisés ou ceux qui sortent du lot.

Les tutoriels détaillent toutes les étapes pour produire tes visuels.

Continuer la lecture de « Réalise ton mockup gratuitement en 3 minutes »

Ajoute un portrait en face de tes commentaires

visuel article gravatar

Tu vas ajouter un portrait en face de tes commentaires avec Gravatar. Ce service gratuit personnalise ton site et surtout procure un aspect plus professionnel.

Il faut donner un peu de vie à cette silhouette grise franchement déprimante.

commentaire sans photo

C’est mieux comme cela, non ? (soit, le choix de la photo est discutable)

commentaire avec gravatar

Cela ne prend qu’une poignée de minutes et, cerise sur le gâteau, cela fonctionne également quand tu commentes sur d’autres sites.

Continuer la lecture de « Ajoute un portrait en face de tes commentaires »

Rédige facilement tes premiers articles + 5 sources d’idées

illustration article creation contenu

Tu es prêt à te lancer dans la rédaction de ton premier article mais tu te poses milles questions.

Je te rassure nous sommes tous passés par là.

J’ai cherché à être le plus concret pour te permettre d’avancer le plus rapidement possible et de trouver l’inspiration.

Le meilleur conseil que je puisse te donner se résume en deux mots : lance toi.

Continuer la lecture de « Rédige facilement tes premiers articles + 5 sources d’idées »

Modifie ton thème avec SiteOrigin CSS

illustration article siteorgin css

SiteOrigin CSS est une extension gratuite pour personnaliser ton site en effectuant facilement des modifications sur les CSS.

Tu visualises en direct l’impact des changements. Tu peux à tout moment supprimer les ajustements sans conséquence pour ton site.

Ce que tu apprendras :

Organise ton site pour favoriser son référencement [Tuto]

cubes lego

C’est le moment où nous allons nous poser une question en apparence simple mais qui mérite d’y consacrer quelques minutes :
Je mets quoi exactement dans mon site ?
avec la question subsidiaire : Et je le range comment ?

Un site bien structuré est un point crucial pour le référencement dans les moteurs de recherche.

C’est exactement comme à la maison. Si tu ranges tes chaussettes dans le frigo, personne d’autre que toi n’ira les chercher à cet emplacement.

picto articles débutants

Débutant

Réalise le plan de ton site

Tu vas organiser les contenus que tu souhaites voir apparaître sur ton site.

Le plus simple est de commencer avec un papier et un crayon.

  • Inscrire au centre le nom de ton site.
  • Relier les éléments directement visibles dès l’arrivée sur ton site.
    • La page d’accueil
    • Le menu
    • Le pied de page
  • Intégrer dans la page d’accueil les différentes rubriques présentes. Par exemple :
    • Introduction
    • Mes produits/services
    • Les marques de confiance (témoignages, nombre de clients accompagnés )
    • A propos
    • Contact
    • Newsletter

structure d'un site

  • Ajouter les liens des éléments et liens présents sur pied de page. Le plus souvent :
    • mentions légales (obligatoires)
    • inscription à la newsletter
    • formulaire de contact
    • adresse / heures d’ouvertures / tél / carte… pour les entreprises avec un point de vente physique

structure d'un site avec pied de page

Cela sera la fin du travail pour certains. Si tu ne veux rien ajouter de plus, tu reprends les éléments de la page d’accueil dans le menu avec l’ajout d’un onglet actualité.

Dans cet exemple, un boulanger présente son magasin en image d’accueil.

Exemple d'organisation d'un site simple

  • Il met en évidence l’adresse et les horaires d’ouverture.
  • Il nous met l’eau à la bouche avec de sublimes photos de ses réalisations et spécialités.
  • Une petite présentation de l’équipe et de leurs jolis minois.
  • Les grandes animations de l’année dans actualité : la galette, les lapins de Pâques, la traditionnelle bûche…

La boulangerie Germain de Saint Chaumont sur Paquerette apparaîtra aisément en tête de la recherche “boulangerie + nom du village”. Par contre, pour Strasbourg, cela sera une autre paire de manches.

Le choix des éléments du menu

La facilité à trouver l’information pour le visiteur influence fortement le référencement. Google ne tient pas particulièrement à diriger ses précieux clients vers des sites mal foutus où tu ne trouves rien et dont le thème n’est pas clair.

Quelques indicateurs négatifs, liés à l’organisation, relèguent un site dans les bas fonds des résultats de recherche :

  • les visiteurs du site repartent immédiatement dès leur arrivée (traduction : je n’ai pas compris immédiatement de quoi ce site parle)
  • ils restent peu de temps (traduction : je ne trouve pas ce que je cherche)
  • ils ne cliquent sur aucun un lien (traduction : je n’ai pas vraiment envie d’en savoir plus)

Un exemple visuel :
Combien de cubes bleus clairs ?

briques légo en vrac

C’est plus facile comme cela, non ?

briques lego organisées

Un magasin de vêtements est organisé pour que tu trouves le plus rapidement possible ce que tu es venu chercher.

  • Femme – Homme – Enfant
  • puis par type : T-shirts, pantalons, blousons…
  • et ensuite par tailles pour chaque pièce

Tu commences par lister tous les sujets que tu souhaites aborder sur ton site. Dans un second temps, tu les regroupes par thématiques qui seront les onglets de ton menu. Un bon conseil est se limiter à 7 pour ne pas saturer l’attention.

Sur WordPress, cela se traduit par 1 page thématique qui centralise tous les points tout en racontant une histoire. Elle renvoie à l’aide de liens vers des articles qui développent un point.

Un petit exemple :

La page plats préparés d’un charcutier pourrait se présenter ainsi :

La charcuterie Champignou vous propose des spécialités de pays et internationales récompensées par de nombreuses médailles.

Nos entrées :

Froides ou chaudes, nos entrées vous permettent de bien commencer votre repas. Nos clients  recommandent particulièrement nos tapas qui donnent un petit air de vacances à votre apéritif.
Découvrez nos entrées

Nos plats traditionnels :

Nos plats traditionnels vous ramènent directement en enfance. Ne passez pas à coté de nos poissons cuisinés.
Découvrez nos plats

….

Accompagnés de belles photos et des recommandations clients, cela peut fonctionner. Les articles seront bien évidemment liés entre eux pour permettre de naviguer facilement entre les plats.

La page Les ongles dans le cambouis de Trucs de blogueuse illustre bien cette méthode. Mia W. introduit la réalisation d’un blog et annonce les différentes étapes de manière attractive et logique.

ongles dans le cambouis de Trucs de blogueuse

Les catégories pour organiser son contenu

Les catégories précisent la thématique générale de l’article. Une thématique forte se retrouve dans le menu et dans le titre de la page parent.
Les catégories permettent également de regrouper artificiellement les articles de la page actualité autour de plusieurs thématiques.

articles > catégories

menu catégories de wordpresse

  • Compléter les éléments :
    • Nom : nom de la catégorie, par exemple actualité
    • Identifiant : nom “administratif” de la catégorie en minuscules non accentuées et des chiffres. Des traits d’union remplacent les espaces.
    • Parent : respecter l’organisation du menu en rangeant si besoin la catégorie dans celle de son parent
    • Créer une catégorie pour chaque éléments du menu

créer une nouvelle catégorie

Nous allons remplacer Uncategorized la catégorie par défaut par Général, par exemple, ce qui est plus professionnel.

  • Cliquer sur modification rapide tout en bas de la colonne de droite  en  passant la souris sur Uncategorized

catégorie modifier uncategorized

  • Remplir le Nom et l’Identifiant
  • Bouton Mettre à jour la catégorie

catégorie renommer uncategorized modification rapide

Tu définiras une catégorie dans chaque page et article en la sélectionnant dans la barre de droite.

articles catégorie sélection

Pour aller plus loin avec l’organisation en silos

L’organisation thématique s’appelle organisation en silos. Chaque silo traite en profondeur une thématique qui sera le point d’entrée des visiteurs. La page “colonne vertébrale” distribue le contenu vers des articles ou des sous-silos en fonction du volume d’information.

Schématiquement, cela donne ceci :

organisation de site en silos

Google se sert des liens entre les pages et les articles pour essayer de qualifier le sujet du site et des pages. Les silos simplifient le travail de Google et des lecteurs en délimitant précisément les espaces.

Chaque silo disposera de sa propre catégorie ce qui marquera bien la thématique.

La liaison efficace des pages en silos

Pour éviter de diluer l’aspect thématique, quelques règles simples sont recommandées :

  • Lier les silos entre eux
  • Lier systématiquement les parents et enfants au sein d’un silo
  • Lier les frères si pertinent
  • Peut lier à l’oncle si approprié
  • Éviter si possible les liens des articles vers les cousins et les autres silos

liaison entre les élements d'un site en silos

 

Ton schéma ressemble désormais à cela :

schéma de site complet

 

Voici ce que cela donne pour le site Speedy :

organisation d'un site exemple speedy

organisation d'un site exemple speedy pied de page et page d'accueil

organisation d'un site exemple speedy : le menu principal

Note : J’ai utilisé le site Wisemapping pour réaliser mes schémas. Il est gratuit et permet d’enrichir son schéma au fur et à mesure de l’évolution du site.

Conclusion

Il est beaucoup plus facile de bien structurer un site en réfléchissant en amont que de rectifier le tir en cours de route. Cette étape est nécessaire pour partir sur de bonnes bases.

Après ce point plus théorique, je te propose de revenir à du concret avec le contenu de ta page d’accueil.

Ressources

Structure en Silo pour WordPress de WP formation est un article en 3 parties très complet qui reprend tous les aspects de la structure en silos.

En anglais :

Un article pratique d’Authority Hacker qui dévoile de A à Z la méthode pour construire des silos pour WordPress.
Site Architecture: How to Beat High-Authority Sites with Fewer Links Using Silo Structure

Un article fondateur de Bruce Clay sur les silos.
SEO Siloing: Building a Themed Website

La méthode des silos illustrée de nombreux exemples concrets. How To Create A Silo Structure In WordPress

Les articles qui peuvent t’intéresser

bannière de la newsletter de pour pas un rond version bleu-vert

structurer son site image pinterest

[Sécurité] 4 extensions incontournables pour ton site | Tuto

t shirt avec l'inscription security

Nous allons aborder un point crucial de ton site : sa sécurité.

Assurer la sécurité de son site est accessible à tous à l’aide de seulement 4 extensions performantes.
Pour le paramétrage, il suffit de suivre les instructions détaillées comme une recette de cuisine.

Ce que tu vas apprendre :

Continuer la lecture de « [Sécurité] 4 extensions incontournables pour ton site | Tuto »

Héberge ton site et installe WordPress

wordpress badges

Tu veux lancer ton site mais tu ne possèdes aucune connaissance technique ?

Je te guide de A à Z dans l’hébergement de ton site et la réservation de ton nom de domaine chez O2Switch mon hébergeur. J’en suis très satisfait.

Il cumule l’avantage d’être abordable (72 € par an) et d’être en France avec un service client réactif et attentif.

L’hébergeur stocke ton site sur un serveur et permet son accès à l’ensemble de tes visiteurs.

fonctionnement hébergement serveur

Ce que tu vas apprendre :

Continuer la lecture de « Héberge ton site et installe WordPress »

Personnalise le thème Twenty Seventeen

illustration article personnaliser twenty seventeen

Avec plus d’un million de sites utilisant Twenty Seventeen, ce thème s’est imposé pour ceux qui veulent créer un site site simple et efficace.

Il est parfait pour présenter son entreprise et s’affiche sur tous les écrans quelles que soient leurs tailles.

Nous allons le relooker pour qu’il reflète parfaitement ta marque.

Tu peux télécharger l’article au format PDF pour le consulter plus tard ou suivre le tutoriel sur papier pendant que tu progresses. Tu le trouveras dans la bibliothèque réservée aux abonnés.
Je m’abonne à la newsletter gratuite.

Continuer la lecture de « Personnalise le thème Twenty Seventeen »

Premiers paramétrages de WordPress

parametrages wordpress débutants

Tu vas découvrir les principales fonctionnalités de l’interface de WordPress.

Nous allons également en profiter pour faire quelques réglages et un peu de nettoyage.

Ce que tu vas apprendre :

Continuer la lecture de « Premiers paramétrages de WordPress »

Ouvre un compte Gmail

creer compte gmail

L’ouverture d’un compte Gmail ne prend que quelques minutes et conditionne l’accès aux nombreux services offerts par Google pour la gestion d’un site.

Il est possible de n’utiliser aucun de ces services par idéologie mais sinon ils se révèlent indispensables pour donner toutes les chances de réussite à ton site. Pour ne citer que les plus courants : Google Analytics, Google Search Console, Google Agenda, Google Drive, Google My Business, Google+... Continuer la lecture de « Ouvre un compte Gmail »

Installe Dashlane

installer dashlane

Dashlane ne prend que quelques minutes à installer et te fais gagner un temps précieux tous les jours.
Plus besoin de taper ton identifiant et ton mot de passe, Dashlane le fait pour toi.

Le point important pour la sécurité de tes comptes, c’est que tes identifiants ne sont pas enregistrés sur ton navigateur et facilement piratables.

Le logiciel est gratuit pour l’utilisation sur un poste. Continuer la lecture de « Installe Dashlane »