Définir le titre et la description des pages

publié le 05/04/2010 par Matthieu Sadouni

Le titre et la description de chaque page d'un site sont très importants pour obtenir un bon référencement naturel. Voyons comment définir de manière très simple le titre et la description de nos pages.

Paramétrage du layout

Dans le layout principal app/views/application.html.erb, nous trouvons une ligne un peu particulière :

    <html>
    <head>
      <title>Le titre</title>
      <meta name="description" content="La description" />
    <body>
      <div id="content">
        <%= yield %>
      </div>
    </body>
    </html>
    

Ce yield définit un emplacement où sera inséré le contenu de la vue actuellement affichée. C’est en fait un raccourci pour yield :content, le contenu de la vue étant présent dans le symbole :content. Nous pouvons utiliser la même technique pour insérer le titre et la description de la page en ajoutant deux symboles :title et :description :

    <html>
    <head>
      <title><%= yield(:title) || "Le titre par défaut" %></title>
      <meta name="description" content="<%= yield(:description) || "La description par défaut" %>" />
    <body>
      <div id="content">
        <%= yield %>
      </div>
    </body>
    </html>
    

Si :title ou :description sont vides, yield ne retournera rien, sans lever d’exception. Nous pouvons ainsi omettre de définir le titre ou la description pour une vue donnée, la valeur par défaut indiquée dans le layout étant alors prise en compte.

Il ne nous reste plus qu’à renseigner :title et :description dans les vues.

Définition depuis chaque page

Nous utilisons la méthode content_for qui sert à insérer du contenu dans un symbole. Le contenu de ce symbole est ensuite inséré dans le layout à l’appel du yield correspondant. Voyons ce que cela donne dans une vue :

    <% content_for :title do %>
      Le titre de la page
    <% end %>
    <% content_for :description do %>
      La description de la page
    <% end %>
    <p>Le contenu.</p>
    

Si nous reprenons le layout vu précédemment, le code HTML suivant est généré :

    <html>
    <head>
      <title>Le titre de la page</title>
      <meta name="description" content="La description de la page" %>" />
    <body>
      <div id="content">
        <p>Le contenu.</p>
      </div>
    </body>
    </html>
    

Le seul petit souci est que nous devons ajouter 6 lignes de code à chaque vue. Nous remédions à cela en créant une méthode de helper pour simplifier nos vues :

# app/helpers/application_helper.rb
    module ApplicationHelper

      def title(title)
        content_for(:title) { title }
      end

      def description(description)
        content_for(:description) { description }
      end
    end
    

Nous vérifions que le helper est inclus dans notre ApplicationController :

# app/controllers/application_controller.rb
    helper :all
    

Puis nous modifions notre vue en conséquence :

    <% title "Le titre de la page" %>
    <% description "La description de la page" %>
    <p>Le contenu.</p>
    

Nous pouvons maintenant définir facilement le titre et la description de chaque page. Cette combinaison de yield et content_for est très pratique pour modifier certains endroits du layout en fonction de la vue, comme par exemple une zone de navigation, une inclusion de javascript, etc.

blog comments powered by Disqus