Skip links
Pré-audit GRATUIT
Keyweo logo
Pré-audit GRATUIT
Facebook Linkedin

Footer

Définition

Le pied de page, plus connu sous le terme anglais “footer” désigne le bas d’une page. En HTML, cette section se traduit par la balise < footer >, laquelle contient tous les éléments qui doivent s’y trouver. En règle générale, le footer est le même sur chacune des pages d’un même site web. Il est donc inclus dans le gabarit des pages pour permettre sa multiplication sur l’ensemble du site. Par ailleurs, le footer étant le dernier élément d’une page consultée, il est important de l’optimiser afin de le rendre attrayant et intéressant.

Concrètement, le pied de page d’une site peut contenir : un texte optimisé SEO avec des mots clés stratégiques, des informations de contact de l’entreprise (adresse, coordonnées), la carte du site web, les mentions légales du site, des liens internes vers des pages du site (contact, qui sommes-nous ? etc.), des liens de navigation secondaires, vos réseaux sociaux, etc.

SEO Technique

Accès rapide

Quel est l’intérêt du footer en SEO ?

Dans une logique SEO, le footer est une section stratégique à travailler. En effet, elle permet d’apporter une valeur ajoutée à votre site en y proposant des contenus issus de pages plus profondes, des liens externes et des informations supplémentaires pouvant intéresser les visiteurs.

De plus, le pied de page permet de renforcer votre maillage interne en pointant vers des contenus profonds qui ne sont pas directement accessibles depuis le premier niveau de votre menu principal. Créer un footer sur son site web n’est pas obligatoire mais fortement recommandé si vous souhaitez optimiser votre référencement organique.

Le footer permet donc d’enrichir le contenu de son site avec des informations annexes que l’on ne souhaite pas faire directement apparaître dans le menu principal. Lors de la création d’un site, le footer n’est pas prédéfini. Il faut donc l’optimiser avec le contenu que vous jugez pertinent.

Travailler son pied de page pour le rendre attractif

Le pied de page, tout comme vos pages, doit être judicieusement pensé afin d’attirer vos visiteurs et les inciter à parcourir le contenu qui y est présenté. Pour cela, il est important de présenter un footer clair et de ne pas le surcharger d’informations. Cela risquerait de décourager le visiteur.

De plus, l’objectif du footer étant de proposer un contenu intéressant, il faut donc soigneusement le choisir. Il s’agit de fournir des informations complémentaires à vos visiteurs pour améliorer vos performances. Vous pouvez notamment y inclure un call to action pour inciter à l’action : remplir un formulaire, passer une commande, contacter, s’inscrire à la newsletter. Vous pouvez tout aussi bien mettre en avant vos réseaux sociaux en intégrant des icônes qui attirent l’œil pour retenir le visiteur dans votre environnement.

Vous l’aurez donc compris le footer est une partie stratégique de votre site web à optimiser.

Quelques bonnes pratiques pour votre footer

La partie basse d’une page est destinée aux visiteurs mais aussi aux moteurs de recherche. D’un point de vue SEO, les informations qui y sont renseignées permettent d’optimiser le référencement naturel du site. Dans un second temps, elles sont aussi destinées à proposer davantage de contenu aux visiteurs pour améliorer l’expérience utilisateur (UX). Généralement, le contenu que l’on retrouve dans le footer ne figure pas dans la barre de navigation principale.

Voici différents éléments qu’il peut être intéressant pour vous d’insérer dans votre footer.

Les informations légales du site

Lorsque vous lancez votre site internet, il est obligatoire de rédiger les mentions légales le concernant. Ce n’est pas une page très intéressante pour l’utilisateur, mais indispensable légalement parlant. Il est donc stratégique de faire figurer un lien pointant vers cette page dans votre footer afin de ne pas lui donner une trop grande importance, tout en la faisant tout de même figurer sur votre site.

Si vous avez une activité dans le e-commerce, alors vous devez également faire figurer les conditions générales de vente et d’utilisation sur votre site. Généralement, ces conditions s’affichent au moment de l’achat de l’utilisateur, mais il peut également être intéressant de les faire figurer dans le footer afin de leur y donner accès avant tout achat.

Finalement, les derniers éléments légaux à faire figurer dans votre footer sont les crédits et le copyright. Cela permet de renseigner l’utilisateur sur le créateur et le propriétaire du site web, ainsi que sur l’année de publication

Votre politique de confidentialité

Renseigner vos clients sur votre politique de confidentialité et de traitement des données est une obligation légale à laquelle toute entreprise doit se plier. Vous devez donc faire figurer ces informations sur votre site web. Et pourquoi pas dans votre footer ? Cela vous permettra de garder une totale transparence vis-à-vis de vos utilisateurs, et de répondre aux obligations légales.

De plus, il est également obligatoire de faire figurer sur votre site web votre politique concernant les cookies, si vous en utilisez. Insérez le donc dans votre footer pour informer les visiteurs dès leur arrivée sur votre site.

Un call-to-action

Les call-to-action permettent d’augmenter considérablement votre taux de conversion. En effet, comme leur nom l’indique, ces éléments incitent les visiteurs d’un site à réaliser une action, généralement l’achat d’un produit ou d’un service.

Utilisez-y des éléments d’injonctions, du style “cliquez ici”, “demandez votre devis”, “prenez rendez-vous”, etc. Il s’agit d’insérer un élément engageant à votre footer, afin d’inciter l’utilisateur à aller plus loin dans sa recherche.

Catégories et lien vers un blog

Dans le cadre d’une activité de e-commerce, il est intéressant d’insérer dans votre footer des liens vers vos différentes catégories de produits pour rediriger le client vers vos pages produits, et ainsi générer de leads.

De plus, vous pouvez également insérer un lien vers un blog, afin d’éduquer vos prospects et proposer aux utilisateurs du contenu informatif de qualité, et ainsi augmenter votre crédibilité à leurs yeux.

Aides à la navigation

Le footer est souvent utilisé pour faciliter la navigation des utilisateurs sur un site en y indiquant de manière claire la hiérarchie de votre site web. Il convient toutefois de ne pas faire un copier-coller de votre menu. En effet, en général, l’utilisateur se rend sur votre pied de page dans le cas où il n’aurait pas trouvé ce qu’il cherchait dans votre menu en haut de page. Pour proposer un footer bien optimisé en termes de SEO et d’UX, insérez-y les requêtes SEO, c’est-à-dire les mots-clés que tapent vos utilisateurs dans la barre de recherche avant d’arriver à votre site, et renvoyez-les vers vos pages importantes.

Contact, newsletter et réseaux sociaux

Finalement, insérez dans votre footer les informations de contact de votre entreprise : numéro de téléphone, adresse mail. Vous pouvez ajouter ces informations sous forme d’un formulaire de contact, afin de faciliter la prise de contact et d’inciter les utilisateurs à vous contacter. Vous pouvez également insérer un lien vers votre page “qui sommes-nous” pour donner davantage d’informations à vos clients. Finalement, il est également intéressant d’insérer dans votre footer un lien permettant aux internautes de s’inscrire à votre newsletter.

De nos jours, la communication se fait de plus en plus par l’intermédiaire des réseaux sociaux. Il est donc stratégique d’insérer un lien vers vos réseaux dans votre footer, afin de proposer un moyen alternatif de contact et d’information aux internautes.

Pour les entreprises souhaitant travailler leur référencement local, ajoutez à votre footer un plan Google maps.

Comment créer un footer en HTML/CSS ?

Il est possible de coder votre footer grâce au langage HTML et CSS. Vous trouverez ci-dessous un code HTML, et son CSS associé, qui permettent de créer un footer basic blanc, composé de trois colonnes alignées les unes à côté des autres. A vous de vous amuser par la suite à changer les fonds, polices, etc. pour créer le footer pleinement adapté à vos envies !

Code HTML

				
					<!DOCTYPE html>
<html>
<body>

      <footer>

        <div class=”contenu-footer”>

            <div class=”bloc footer-services”>
              <h3>Nos services</h3>
              <ul class=”liste-services”>
                <li><a href=”#”>Création de sites web</a></li>
                <li><a href=”#”>SEO</a></li>
                <li><a href=”#”>SEA</a></li>
              </ul>
            </div>

          <div class=”bloc footer-informations”>
            <h3>A propos</h3>
            <ul class=”liste-informations”>
              <li><a href=”#”>Actualités</a></li>
              <li><a href=”#”>Notre histoire</a></li>
              <li><a href=”#”>Investisseurs</a></li>
              <li><a href=”#”>Développement durable</a></li>
            </ul>
          </div>

          <div class=”bloc footer-contact”>
            <h3>Restons en contact</h3>
            <p>06 06 06 06 06</p>
            <p>supportclient@contact.com</p>
            <p>12 rue de l'invention, Paris, 75011</p>
          </div>

        <p class="copyright">Company Name © 2022</p>
    
 </div>

  </footer>

</body>
</html>

Code CSS

				
					body {
  background: #f1f1f1;
  font-family: Arial, Helvetica, sans-serif;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

h1 {
  font-size: 10vw;
  text-align: center;
  margin-top: 20px;
  color: #333;
}

.contenu {
  /* grow shrink basis */
  flex: 1 0 auto;
}

.contenu p {
  padding: 5vw 10vw;
  text-align: justify;
}

footer {
  flex-shrink: 0;
  border-top: 1px dashed #000;
  width: 100%;
  background: #ffff;
  color: #333;
}

.contenu-footer {
  width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  font-size: 20px;
  padding: 50px 0 100px;
}

.bloc {
  width: 25%;
  margin: 0 30px;
}

/* contact */
.footer-services h3,
.footer-informations h3,
.footer-contact h3 {
  font-size: 25px;
  padding-bottom: 20px;
}

.footer-contact p {
  padding: 5px 0;
}

/* Services */

.liste-services,
.liste-information {
  list-style-type: none;
}

.liste-services li {
  padding: 2px 0;
}

.liste-services a {
  text-decoration: none;
  color: #333;
}
.liste-services a:hover {
  color: rgb(3, 3, 3);
}

Les définitions les plus populaires

page alias
page amp google
page gateway
page orpheline
page passerelle
page satellite
page zombie
pagination en seo
pied de page
header
sitemap

Boostez votre visibilité

N’hésitez pas à nous contacter pour obtenir un devis gratuit et personnalisé.

Demandez votre pré-audit GRATUIT
Contactez-nous
4.7/5 - (22 votes)