Skip links

Footer

Definition

The footer is the bottom of a page. In HTML, this section is expressed by the < footer > tag, which contains all the elements that should be there. As a rule, the footer is the same on each page of a website. It is therefore included in the page template to allow it to be multiplied throughout the site. Furthermore, as the footer is the last element of a page that is viewed, it is important to optimise it to make it attractive and interesting.

More specifically, the footer of a site can contain: SEO optimised text with strategic keywords, company contact information (address, contact details), the sitemap, the site’s legal notice, internal links to pages on the site (contact, about us, etc.), secondary navigation links, your social networks, etc.

SEO Technique

What is the purpose of the footer in SEO?

From an SEO perspective, the footer is a strategic section to work on. Indeed, it allows you to add value to your site by offering content from deeper pages, external links and additional information that may interest visitors.

In addition, the footer allows you to reinforce your internal linkage by pointing to deep content that is not directly accessible from the first level of your main menu. Creating a footer on your website is not compulsory but is strongly recommended if you wish to optimise your organic SEO.

The footer allows you to enrich the content of your site with additional information that you do not want to appear directly in the main menu. When a site is created, the footer is not preset. It is therefore necessary to optimise it with the content that you consider relevant.

Work on the footer to make it attracive

The footer, like your pages, must be well thought out in order to attract your visitors and encourage them to browse the content presented there. To do this, it is important to present a clear footer and not to overload it with information. This could discourage the visitor.

Moreover, the aim of the footer is to offer interesting content, so it must be chosen carefully. The aim is to provide additional information to your visitors to improve your performance. In particular, you can include a call to action to encourage action: fill in a form, place an order, contact, subscribe to the newsletter. You can also highlight your social networks by integrating eye-catching icons to keep the visitor in your site.

You will have therefore understood that the footer is a strategic part of your website to optimise.

Some good practices for your footer

The bottom part of a page is intended for visitors but also for search engines. From an SEO point of view, the information that is provided there helps to optimise the natural SEO of the site. Secondly, it is also intended to offer more content to visitors to improve the user experience (UX). Generally, the content found in the footer does not appear in the main navigation bar.

Here are different elements that you may want to include in your footer.

Legal information on the site

When you launch your website, it is compulsory to write the legal notice about it. This is not a very interesting page for the user, but it is legally essential. It is therefore strategic to include a link to this page in your footer so as not to give it too much importance, while still having it appear on your site.

If you are in the e-commerce business, then you should also include the terms and conditions of sale and use on your site. Generally, these conditions are displayed at the time of the user’s purchase, but it can also be interesting to include them in the footer so that they are accessible before any purchase.

Finally, the last legal elements to include in your footer are the credits and copyright. This informs the user about the creator and owner of the website, as well as the year of publication

Your privacy policy

Informing your customers about your privacy and data processing policy is a legal requirement for any business. You should therefore include this information on your website. And why not in your footer? This will allow you to be completely transparent with your users and to meet legal obligations.

In addition, it is also mandatory to include your policy on cookies on your website, if you use them. Insert it in your footer to inform visitors as soon as they arrive on your site.

A call-to-action

Call-to-actions can considerably increase your conversion rate. Indeed, as their name indicates, these elements encourage visitors to a site to carry out an action, generally the purchase of a product or service.

Use injunctive elements, such as “click here“, “request your quote“, “make an appointment“, etc. It is a question of inserting an engaging element into your footer, in order to encourage the user to go further in their search.

Catagories and link to a blog

In the context of an e-commerce activity, it is interesting to insert in your footer links to your different product categories to redirect the customer to your product pages, and thus generate leads.

In addition, you can also insert a link to a blog, in order to inform your potential customers and offer them quality educational content, and thus increase your credibility in their eyes.

Navigational aids

The footer is often used to make it easier for users to navigate a site by clearly indicating the hierarchy of your website. However, it is important not to copy and paste your menu. In fact, in general, users will go to your footer if they have not found what they were looking for in the top of your page. To provide a footer that is well optimised in terms of SEO and UX, insert SEO queries, i.e. the keywords that your users type into the search bar before arriving at your site, and refer them to your important pages.

Contact, newsletter and social networks

Finally, include your company’s contact information in your footer: phone number, email address. You can add this information in the form of a contact form, to make it easier to get in touch and to encourage users to contact you. You can also insert a link to your “about us” page to give your customers more information. Finally, it’s also a good idea to include a link in your footer that allows users to sign up for your newsletter.

Nowadays, communication is increasingly done through social networks. Consequently it is essential to insert a link to your networks in your footer, in order to offer an alternative means of contact and information to Internet users.

For companies wishing to work on their local SEO, add a Google map to your footer.

How to create a footer in HTML/CSS?

It is possible to code your footer using HTML and CSS. You will find below an HTML code, and its associated CSS, which allow you to create a basic white footer, composed of three columns lined up next to each other. It is up to you to have fun changing the backgrounds, fonts, etc. to create a footer that is fully tailored to your desires!

HTML Code

				
					<!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>
				
			

CSS Code

				
					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);
}


				
			

The most popular definitions

alias page
google amp page
doorway page
orphan page
satellite page
zombie page
pagination in SEO
footer
header
sitemap
Google indexing

Boost your Visibility

Do not hesitate to contact us for a free personalised quote

4.8/5 - (10 votes)