Les pages et le menu

Module 4: Pages, apparence et fonctionnalités · Temps de lecture : 7 minutes

Objectif pédagogique : À l'issue de cette leçon, vous savez ajouter, renommer, déplacer et supprimer des pages, organiser le menu avec un sous-menu et des liens personnalisés, et vous savez ce qu'il advient des anciennes adresses, de la page de contact et de la page d'erreur.

Notions clés : page, adresse (slug), page d'accueil, menu, sous-menu, intertitre, lien personnalisé, liens de pied de page, page de contact, page d'erreur (404), redirection

Pourquoi la structure de votre site compte

En quelques secondes, un visiteur décide s'il trouve ce qu'il cherche, et cela passe par le menu. Si « Contact » n'y figure pas, ou si une page s'appelle « Info » alors qu'elle présente vos tarifs, il abandonne. Les moteurs de recherche lisent aussi votre menu pour savoir quelles pages sont importantes.

Schildersbedrijf Example part d'une première version créée par l'IA : Accueil, Services, À propos et Contact. Après la relecture (leçon 2.4), le peintre veut changer deux choses : une page distincte « Méthode » avec les étapes, du devis à la livraison du chantier, et sous Services deux pages pour la peinture intérieure et la peinture extérieure. Il règle cela dans deux panneaux : Pages et Menu. Les deux sont gratuits : gérer les pages et le menu ne consomme aucune modification.

Le panneau Pages

Vous ouvrez le panneau avec Pages dans la barre latérale à gauche, ou avec le sélecteur de page en haut à droite du panneau de discussion. Vous voyez toutes les pages de votre site. Cliquez sur une page pour l'ouvrir dans l'aperçu et la modifier.

Ce que vous faites ici :

• Ajouter une page : vous indiquez seulement un nom. La nouvelle page reçoit un titre et un bloc de texte avec un texte d'aide (« Expliquez ici le sujet de cette page. »). Demandez ensuite à l'IA dans la discussion de la remplir, ou rédigez le texte vous-même (leçon 3.2). La page apparaît automatiquement dans le menu s'il reste de la place, ainsi que dans la colonne de liens de pages du pied de page.
• Modifier la page : pour chaque page, vous changez le Nom et l'Adresse, puis vous cliquez sur Enregistrer.
• Monter et Descendre : l'ordre des pages. Le menu et la colonne de liens de pages du pied de page suivent cet ordre.
• Supprimer : le créateur vous demande d'abord de confirmer et indique combien de liens de votre site pointent vers cette page (dans le menu, le pied de page ou des boutons). Il supprime ces liens en même temps, pour qu'il ne reste aucun lien mort. Vous pouvez restaurer une page supprimée via Versions (leçon 3.5).

La page d'accueil est particulière : vous ne pouvez ni la supprimer ni la déplacer, et son adresse est toujours l'adresse principale de votre site. Un site compte au maximum 30 pages.

Vous pouvez aussi demander une nouvelle page dans la discussion (« Crée une page Méthode avec quatre étapes, du devis à la livraison du chantier »). L'IA la crée alors directement avec du contenu. Il s'agit d'une demande à l'IA, qui coûte 2 modifications parce qu'une page est ajoutée (leçon 1.2). Via Ajouter une page, c'est gratuit, mais vous la remplissez ensuite vous-même ou avec une demande séparée.

Piège : le texte d'aide d'une nouvelle page est du contenu provisoire. Si vous l'oubliez, votre site en ligne affichera « Double-cliquez sur ce texte pour le rédiger vous-même ». Relisez chaque nouvelle page avant de la mettre en ligne.

Nom et adresse : ce qui se passe quand vous les modifiez

Chaque page a un nom et une adresse. Le nom est ce que les visiteurs voient dans le menu et dans le titre. L'adresse (dans le jargon, le slug) est la dernière partie de la barre d'adresse : pour www.example.com/werkwijze/, il s'agit de werkwijze. Utilisez des mots courts et simples séparés par des traits d'union, sans majuscules ni signes de ponctuation.

Si vous modifiez le nom, les éléments de menu et les liens de pied de page portant l'ancien nom reprennent automatiquement le nouveau. Un élément de menu doté de son propre texte de menu conserve ce texte.

Si vous modifiez l'adresse, les liens internes à votre site continuent de fonctionner : le menu, le pied de page et vos boutons pointent vers la page elle-même, pas vers l'ancienne adresse. Lors du prochain Mettre en ligne, l'ancienne adresse reçoit une redirection : un renvoi automatique et permanent (une 301) de l'ancienne adresse vers la nouvelle. Quiconque utilise l'ancienne adresse, par exemple via un lien dans un ancien e-mail, sur Facebook ou dans les résultats de recherche de Google, arrive ainsi automatiquement sur la page à la nouvelle adresse. Si une autre page reçoit plus tard l'ancienne adresse, c'est cette page qui s'y affiche et la redirection disparaît.

Google recommande, lorsqu'une adresse change, de rediriger de façon permanente l'ancienne adresse vers la nouvelle. Le créateur le fait donc pour vous, sur votre adresse gratuite et dans votre pack. Toutefois :

• Choisissez bien vos adresses avant de partager votre site ou de le déclarer à Google (leçon 6.2).
• Si une adresse doit malgré tout changer plus tard, adaptez aussi ce qui dépend de vous : les liens dans votre signature e-mail, votre fiche d'établissement et vos profils de réseaux sociaux. Google trouve la nouvelle adresse via votre plan du site (sitemap) et la redirection, mais cela reste un détour.

La page d'erreur

À chaque publication, le créateur génère lui-même une page d'erreur (dans le jargon, la page 404, d'après le code d'erreur que renvoie alors le serveur web) : aux couleurs de votre charte graphique, avec menu et pied de page, le titre « Cette page n'existe pas » et le bouton « Retour à la page d'accueil ». Les moteurs de recherche ne l'indexent pas. Jetez-y un œil une fois : saisissez après l'adresse de votre site un chemin inexistant, comme /bestaat-niet/.

Le panneau Menu

Dans Menu, vous organisez le menu. Faites glisser les pages pour changer leur ordre. Faites glisser une page sur une autre, et elle devient un sous-menu de celle-ci. C'est ainsi que Schildersbedrijf Example place « Peinture intérieure » et « Peinture extérieure » sous « Services ». Cliquez sur Enregistrer le menu pour valider ; tant que ce n'est pas fait, le message « Menu non enregistré » s'affiche.

Vous pouvez également :

• ajouter un Lien personnalisé : une adresse web (https://...), un numéro de téléphone (tel:0612345678 à titre d'exemple), une adresse e-mail (mailto:...), un chemin sur votre site (/werkwijze/) ou une ancre vers une section (#offerte) ;
• ajouter un Intertitre : un titre non cliquable sous lequel vous faites glisser des éléments. Un intertitre sans élément en dessous disparaît à l'enregistrement ;
• donner à chaque élément son propre Texte du menu. Si vous le laissez vide, c'est le nom de la page qui s'applique ;
• Retirer du menu une page. Elle se trouve alors sous Hors du menu : la page existe toujours, mais seuls ceux qui connaissent l'adresse ou suivent un lien y accèdent.

Une liste de menu compte au maximum 8 éléments, un sous-menu aussi. Si le menu est plein, une nouvelle page n'y est pas ajoutée automatiquement ; un message s'affiche alors et vous l'ajoutez vous-même, ou vous regroupez des pages dans un sous-menu.

Le design du menu (la forme de la barre) ne se choisit pas ici, mais dans Charte graphique (leçon 4.2). Le contenu reste alors identique.

Piège : les pages qui n'ont pas leur place dans le menu, comme votre politique de confidentialité ou une page de remerciement après le formulaire, se placent sous Hors du menu. Un lien vers votre politique de confidentialité a en revanche sa place dans le pied de page (leçon 7.1).

Une bonne page de contact

Presque tous les sites ont besoin d'une page de contact. Les visiteurs s'attendent à la trouver à droite dans le menu ou en dernier élément. Indiquez-y :

• le nom de votre entreprise, votre adresse (si les visiteurs peuvent passer), votre numéro de téléphone et votre adresse e-mail ;
• le formulaire de contact (leçon 4.3) ;
• éventuellement vos horaires d'ouverture ou de disponibilité et une carte.

Dans le créateur, vous le faites avec le bloc Contact (via Blocs ou le sélecteur de Ajouter un bloc, leçon 3.4). Il affiche l'adresse, le téléphone, l'e-mail, les horaires d'ouverture et éventuellement le formulaire. Attention : la première version contient souvent des données fictives, comme un numéro de téléphone inventé. Remplacez-les (leçon 2.4).

Des titres uniques

Sans titre personnalisé dans le panneau SEO, le créateur compose le titre affiché dans l'onglet du navigateur et dans Google à partir du nom de la page et du nom de votre site, par exemple « Méthode | Schildersbedrijf Example » ; la page d'accueil reçoit le nom de votre site. Deux pages portant le même nom reçoivent donc le même titre. Donnez à chaque page un nom qui lui est propre ; vous rédigerez de meilleurs titres dans la leçon 6.1.

Dans le créateur : comment procéder

1. Ouvrez Pages et cliquez sur Ajouter une page. Saisissez « Méthode » et cliquez sur Ajouter.
2. Remplissez la page via la discussion ou rédigez-la vous-même ; remplacez le texte d'aide.
3. Dans Modifier la page, vérifiez l'Adresse (dans l'exemple werkwijze) et cliquez sur Enregistrer.
4. Ouvrez Menu. Faites glisser « Méthode » entre Services et Contact. Faites glisser les pages de services sur « Services » pour créer un sous-menu.
5. Cliquez sur Enregistrer le menu et vérifiez le menu dans l'aperçu, y compris en Mobile.
6. Remettez votre site en ligne (leçon 5.1) et cliquez vous-même sur tous les liens du menu.

Résumé

• Dans Pages, vous ajoutez des pages et modifiez leur nom, leur adresse et leur ordre ; la suppression est possible, la restauration se fait via Versions.
• Les liens internes suivent une nouvelle adresse et l'ancienne adresse renvoie vers la nouvelle après Mettre en ligne ; choisissez tout de même de préférence vos adresses avant de partager votre site.
• Dans Menu, vous réglez l'ordre et les sous-menus par glisser-déposer, ajoutez des liens personnalisés et des intertitres, puis cliquez sur Enregistrer le menu ; au maximum 8 éléments par liste.
• Le créateur génère lui-même la page d'erreur, aux couleurs de votre charte graphique, avec un bouton vers la page d'accueil.
• Une page de contact avec de vraies coordonnées et des noms de pages uniques font partie de tout site.

Quiz

Exercice

Exercice A4.1 : Vos pages et votre menu. Veillez à ce que votre site compte au moins trois pages dans le menu, dont une page de contact avec vos vraies coordonnées, que chaque page ait un nom qui lui est propre et que vous ayez remis le site en ligne. Saisissez ensuite l'adresse web de votre site AI Builder (votre adresse gratuite, comme schildersbedrijf-example-123.weboke.site, ou votre propre domaine). Le programme ouvre votre page d'accueil comme le ferait un visiteur et vérifie : le menu contient-il au moins trois pages, chaque lien du menu fonctionne-t-il (la page existe et ne renvoie pas d'erreur), existe-t-il une page de contact, et chaque page a-t-elle son propre titre. Pour chaque point, vous voyez vert, orange ou rouge. Si vous choisissez le design de menu Minimal dans Charte graphique, les liens des pages ne figurent que dans le pied de page ; pour cet exercice, conservez un design avec les liens dans la barre de menu.

Pour aller plus loin

• Formation WordPress gratuite 4.3: Menus et navigation
• Formation gratuite Être trouvé en ligne 7.4: Les liens internes et la structure de votre site
• Formation gratuite Être trouvé en ligne 8.3: Déménager ou refondre votre site sans perdre votre visibilité
• Site moves with URL changes (Google Search Central, en anglais) : https://developers.google.com/search/docs/crawling-indexing/site-move-with-url-changes