Le setup des Meta Tags dans Rails

Published by Cédric on June 01, 2015


Éléments indispensables pour obtenir un aperçu qualitatif de vos contenus sur les réseaux sociaux, nous vous proposons ce tutoriel pour suivre pas à pas le setup des Meta Tags dans une application Rails.

Le setup des Meta Tags dans Rails

Meta Tags, mais de quoi parle t-on ?

Les Meta Tags sont présentes dans le <head> de vos pages et peuvent être consultables sur n'importe quel site web.

Screnshot des Meta Tags du Wagon On-Demand

Les Meta Tags fournissent les informations affichées dans l'aperçu de vos contenus sur les réseaux sociaux. Les titres, descriptions et images associés sont autant d'éléments à choyer et à considérer avec attention afin de susciter l'intérêt de vos futurs visiteurs / clients via vos posts Facebook, Tweet et Pinterest Rich Pins.

Exemple :

[VERY BIG NEWS] Le Wagon en ligne c'est parti! Avec le Wagon OnDemand on débarque sur vos ordis pour vous apprendre à coder like a boss!

Posted by Lewagon on Tuesday, April 21, 2015

Le setup dans Rails

L'idée de ce tutoriel est de vous montrer comment obtenir ce résultat sur chacune des vues de votre site. Nous allons donc commencer par configurer des Meta Tags par défaut avant de définir des helpers qui vous permettront de les customiser sur les vues de votre choix. Enfin nous jetterons un oeil sur le markup HTML nécessaire et les outils de débogage à votre disposition.

Créez des Meta Tags par défaut

Commencez par créer un nouveau fichier meta.yml dans config, avec le contenu suivant :

Important : Prenez soin ensuite de rédiger un titre accrocheur, une description percutante et de choisir une image mettant parfaitement en valeur votre produit ou service.

# config/meta.yml
meta_title: "Titre générique"
meta_description: "Description générique."
meta_image: "image.jpg" # Une image dans votre dossier app/assets/images/
twitter_account: "@nomdevotrecompte" # indispensable pour les Twitter Cards

Et chargez ensuite ce .yml dans le fichier config/environnement.rb :

# config/environment.rb

# [...]

# Initialize default meta tags.
DEFAULT_META = YAML.load_file(Rails.root.join('config/meta.yml'))

Helpers : meta_title, meta_description & meta_image

Dans un nouveau helper app/helpers/meta_tags_helper.rb définissez les méthodes suivantes afin de pouvoir créer des Meta Tags spécifiques à vos vues/contenus :

module MetaTagsHelper
  def meta_title
    content_for?(:meta_title) ? content_for(:meta_title) : DEFAULT_META['meta_title']
  end

  def meta_description
    content_for?(:meta_description) ? content_for(:meta_description) : DEFAULT_META['meta_description']
  end

  def meta_image
    content_for?(:meta_image) ? content_for(:meta_image) : DEFAULT_META['meta_image']
  end
end

Important : la gestion des URLs de vos images

Par défaut, Rails retourne le chemin relatif de vos URLs (routing helpers suffixés en _path). Il est donc primordial de lui dire de retourner les urls absolues afin que celles-ci puissent être récupérées par Facebook et Twitter. Pour ce faire, placez le snippet ci-dessous dans votre application_controller.rb.

def default_url_options
  { host: ENV['HOST'] || 'localhost:3000' }
end

Assurez-vous de bien avoir précisé votre nom de domaine (ou l'instance heroku) dans vos variables d'environnement.

# config/application.yml
production:
  HOST: 'votresite.com' # ou 'votresite.herokuapp.com'

Important : Par la suite, nous utiliserons toujours les helpers de routes et d'assets avec le suffixe _url. Exemple :

<%= request.original_url %>
<%= image_url meta_image %>

Le markup HTML

Rendez-vous ensuite dans app/views/layouts/application.html.erb et copiez/collez les Meta Tags suivants dans le head de votre application :

<title><%= meta_title %></title>
<meta name="description" content="<%= meta_description %>">

<!-- Facebook Open Graph data -->
<meta property="og:title" content="<%= meta_title %>" />
<meta property="og:type" content="website" />
<meta property="og:url" content="<%= request.original_url %>" />
<meta property="og:image" content="<%= image_url(meta_image) %>" />
<meta property="og:description" content="<%= meta_description %>" />
<meta property="og:site_name" content="<%= meta_title %>" />

<!-- Twitter Card data -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="<%= DEFAULT_META['twitter_account'] %>">
<meta name="twitter:title" content="<%= meta_title %>">
<meta name="twitter:description" content="<%= meta_description %>">
<meta name="twitter:creator" content="<%= DEFAULT_META['twitter_account'] %>">
<meta name="twitter:image:src" content="<%= image_url(meta_image) %>">

<!-- Google+ Schema.org markup -->
<meta itemprop="name" content="<%= meta_title %>">
<meta itemprop="description" content="<%= meta_description %>">
<meta itemprop="image" content="<%= image_url(meta_image) %>">

Puis définissez le contenu de vos Meta Tags pour chacune des vues pour lesquelles vous souhaitez générer un aperçu unique. Par exemple, imaginons que nous avons une page show du modèle Product, vous pouvez mettre en haut de la vue app/views/products/show.html.erb le code suivant :

<!-- app/views/products/show.html.erb -->
<% content_for :meta_title, "#{@product.name} à seulement #{@product.price} €" %>
<% content_for :meta_description, @product.description %>
<% content_for :meta_image, @product.photo.url %>

Vous remarquez l'aspect dynamique des Meta Tags puisque nous prenons directement des propriétés du modèle (stockées dans la base de données) qui varient d'une page produit à l'autre !

Enfin... Débuggez ! Débuggez ! Débuggez !

Afin de tester ce setup sans déployer votre application, installez ngrok pour débugger en local (mac & linux).

Pour Mac :

$ brew install homebrew/binary/ngrok2

Pour Linux, téléchargez le zip et décompressez le. Pour utiliser ngrok, rendez-vous dans le dossier où vous avez décompressé le fichier ngrok.

Ngrok crée une URL publique sécurisée sur un serveur basé sur votre ordinateur :

$ ngrok http 3000

Ouvrez un nouvel onglet sur votre terminal puis lancez ensuite votre serveur Ruby on Rails en exécutant la commande suivante (en remplaçant le numéro sous-domaine par celui que ngrok vous a donné) :

$ HOST=23872376.ngrok.com rails s -b 0.0.0.0

Ouvrez votre navigateur, rendez-vous sur https://23872376.ngrok.com puis copiez les URLs des vues que vous souhaitez tester avant de vous rendre sur :

… pour valider tout ça !

Important : Le Meta Tag og:type risque bien souvent de vous poser problème, n'hésitez pas à consulter la documentation Facebook pour vous éclairer sur la chose !