Créer des pages optimisées pour le référencement.

Apprendre DXPR BuilderCréer des pagesSuivre un tutoriel

Créez ici une page de service comme les moteurs de recherche la lisent le mieux : le titre de la page comme seul Heading 1, des titres ordonnés en dessous, un texte alternatif sur l’image et un bouton qui dit où il mène. Utilisez-la comme liste de contrôle pour chaque page publiée. Les titres de page, les descriptions et les URL vivent hors du builder ; la dernière section montre où.

La vidéo crée la page « Apply for a resident parking permit » d’une municipalité.

Avant de commencer

  • Votre rôle dispose de l’autorisation Edit with DXPR Builder.
  • La médiathèque contient une photo adaptée au service.
  • La page est ouverte dans le builder. Pour une nouvelle page, accédez à Content > Add content > Landing Page (/node/add/landing_page), saisissez un Title clair comme « Apply for a resident parking permit » et cliquez sur Save. Le thème affiche ce titre comme Heading 1 de la page.

Étape 1 : commencer le contenu au Heading 2

Utilisez les titres dans l’ordre pour que la page se lise comme un plan. Le thème affiche le titre de la page comme Heading 1 de la page : le contenu du builder commence donc au Heading 2 pour les sections principales, avec le Heading 3 pour les sous-sections. Utilisez les Heading 4 à 6 avec parcimonie.

  1. Cliquez sur Add Elements sur la page vide et choisissez Section dans l’onglet Layout.
  2. Cliquez sur + sur la section et choisissez Text dans l’onglet Content.
  3. Saisissez « Apply in five minutes » et choisissez Heading 2 dans la liste déroulante des titres.
  4. Sur une nouvelle ligne, ajoutez le résumé comme texte normal : « Residents of zones A to D can apply online. Permits are issued within five working days. » Cliquez sur Save.

Laissez le Heading 1 au titre de la page. Pour faire d’un titre du builder le Heading 1 de la page à la place, masquez d’abord le titre du thème sur cette page. Sur DXPR CMS, ouvrez le formulaire de modification de la page, ouvrez DXPR Theme Settings, cochez Page Title sous DXPR Hide Regions et cliquez sur Save. DXPR Theme masque déjà le titre sur la page d’accueil. Ne choisissez jamais un niveau de titre pour sa taille : changez la taille avec Font size dans le panneau Style de l’élément.

Étape 2 : une section pour les détails

  1. Survolez la section et cliquez sur Add Section Below.
  2. Cliquez sur + sur la nouvelle section et choisissez Row ; elle arrive avec deux colonnes égales. Cliquez sur l’icône de grille (Column layout) sur la barre de contrôle de la ligne, choisissez le préréglage 2/3 + 1/3 et cliquez sur Save.

Les nouveaux éléments arrivent en haut d’une colonne. Les trois étapes suivantes remplissent donc la colonne large du bas vers le haut : le bouton, la sous-section, puis le titre de section.

Étape 3 : rédiger des textes de lien descriptifs

Le texte de lien indique aux moteurs de recherche de quoi parle la destination. Évitez « click here » et « read more ».

  1. Cliquez sur + dans la colonne large et choisissez Button.
  2. Définissez Title sur « Start your parking permit application », Link sur /parking/apply et Type sur Primary, puis cliquez sur Save.

Étape 4 : une sous-section en Heading 3

  1. Cliquez à nouveau sur + dans la colonne large et choisissez Text ; il arrive au-dessus du bouton.
  2. Saisissez « What you need » et choisissez Heading 3.
  3. Saisissez les documents, un par ligne : « Proof of address », « Vehicle registration document ». Cliquez sur Save.

Étape 5 : un titre de section en Heading 2

  1. Cliquez une fois de plus sur + dans la colonne large et choisissez Text.
  2. Saisissez « Who can apply » et choisissez Heading 2.
  3. Ajoutez la règle d’éligibilité en une ligne, puis cliquez sur Save.

Étape 6 : ajouter un texte alternatif à l’image

Chaque image exige un attribut alt qui décrit son contenu.

  1. Cliquez sur + dans la colonne étroite et choisissez Image.
  2. Cliquez sur Select Image, recherchez dans la médiathèque avec Apply filters, cochez la photo et cliquez sur Insert selected.
  3. Ouvrez le panneau SEO et renseignez l’Alt attribute : « Laptops, phones and cups of tea on a shared wooden desk ». Cliquez sur Save.

Rédigez le texte alternatif pour quelqu’un qui ne voit pas l’image. Laissez-le vide uniquement pour les images purement décoratives. Utilisez le Title attribute seulement quand une infobulle apporte quelque chose ; il ne remplace pas le texte alternatif.

Étape 7 : enregistrer et prévisualiser

  1. Cliquez sur Save dans la barre d’outils du builder.
  2. Ouvrez le menu d’affichage (l’eye icon), choisissez Preview et vérifiez que les titres se lisent dans l’ordre.

Aller plus loin

Non montré dans la vidéo :

  • Image size : redimensionnez les images à la largeur où elles s’affichent avant de les téléverser ; 1200 pixels couvrent une colonne entière. Gardez Image width à 100 %, laissez Image height vide et gardez chaque fichier sous 300 KB, car la vitesse influe sur le classement.
  • Links to ignore : pour une page de connexion ou similaire, ajoutez un élément Link, ouvrez son panneau SEO et activez Tell search engines not to follow.
  • Text links : dans un élément Text, sélectionnez les mots et utilisez le bouton de lien de la barre d’outils. Gardez des mots liés porteurs de sens : « the permit zone map », pas « here ».
  • Anchors : ouvrez Plus > Paramètres sur une section, réglez HTML ID sur un nom court en minuscules comme who-can-apply, et liez-le avec #who-can-apply.

Garder un HTML sémantique

Les éléments Text, Button, Link et Image produisent des balises standard <h1> à <h6>, <p>, <ul>, <a> et <img>. Utilisez ces éléments pour le contenu. Gardez l’élément HTML pour le code d’intégration qu’aucun autre élément ne peut produire.

Métadonnées et URL

Les titres de page, les méta-descriptions et les URL vivent dans Drupal, hors du builder :

  • Module Metatag : réglez les balises de titre, les descriptions et les balises Open Graph sous Configuration > Search and metadata > Metatag (/admin/config/search/metatag), ou par page sur le formulaire de modification du nœud.
  • Module Pathauto : construisez des URL propres depuis les titres de page sous Configuration > Search and metadata > URL aliases > Patterns (/admin/config/search/path/patterns).

Ce que vous voyez

L’aperçu montre le titre de la page comme Heading 1 de la page, puis « Apply in five minutes » comme Heading 2 avec son résumé en dessous. Dans la colonne large, « Who can apply » vient en premier, puis « What you need » avec ses deux documents et le bouton Start your parking permit application. La photo est dans la colonne étroite, et son texte alternatif reste invisible.

Si la page ne s’affiche pas comme montré

  • Les titres se lisent dans le mauvais ordre. Les nouveaux éléments arrivent en haut de leur colonne : le dernier ajouté arrive donc en premier. Glissez chaque élément Text à sa place par la poignée de glissement de sa barre de contrôle.
  • Un titre semble trop grand ou trop petit. Votre thème définit une taille par niveau de titre. Gardez le niveau qui convient au plan et changez la Font size dans le panneau Style de l’élément.
  • Vous ne trouvez pas le texte alternatif sur la page. Le texte alternatif s’adresse aux lecteurs d’écran et aux moteurs de recherche : la page ne l’affiche jamais. Ouvrez les réglages de l’image et vérifiez le panneau SEO.
  • Les résultats de recherche affichent le mauvais titre de page. Le builder ne définit pas la balise de titre. Réglez-la avec le module Metatag, comme décrit sous Métadonnées et URL.

Et ensuite ?