• Memofil

  • Mémofil

    Notes pour retrouver le fil de ses idées

Comment bien référencer son site sous Jekyll

Jekyll utilise des templates pour gérer la mise en page des articles et pages. Ces templates se trouvent généralement dans le dossier _layouts situé à la racine de votre site. Par défaut, le dossier _layouts devrait contenir le template defaul.html, mais vous pouvez aussi créer autant de templates souhaités. Pour pouvoir les utiliser, il faut alors modififer la ligne “layout” au tout début des articles et pages (markdown). Par exemple, pour un nouveau template _layouts/homepage.htlm, utilisé pour la page d’accueil, “index.md” deviendra simplement :

---
layout: homepage
# On précise la langue de la page.
lang: fr
---

En regardant de plus près le contenu des templates, vous remarquerez alors qu’ils contiennent les balises <meta>,<title>…necessaires au référencement. Ces templates contiennent aussi toutes les autres informations necessaires à l’affichage ( Barre de navigation, Header, content, Footer, …).Or selon la complexité de votre site, le template peut rapidement contenir une grande quantité de lignes rendant la lecture difficile. Heureusement, Jekyll utilise le langage de template Liquid, grace à ce dernier, il est possible de décomposer n’importe quel fichier htlm en sous-fichier html qui seront appelés par l’emploi des accolades {{...}}. Cette fonctionnalité est vraiment pratique et permet de limiter beaucoup les erreurs en allégeant l’esprit. Nous allons l’utiliser à la suite.

Création d'un fichier _includes/meta.htlm 

<meta charset="utf-8" />
<meta content='text/html; charset=utf-8' http-equiv='Content-Type'>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

{% if page.excerpt %}
  <meta name="description" content="{{ page.excerpt| strip_html }}" />
  <meta property="og:description" content="{{ page.excerpt| strip_html }}" />
{% else %}
  <meta name="description" content="{{ site.description }}">
  <meta property="og:description" content="{{ site.description }}" />
{% endif %} 
  <meta name="author" content="{{ site.title }}" />

{% if page.title %}
  <meta property="og:title" content="{{ page.title }}" />
  <meta property="twitter:title" content="{{ page.title }}" />
 {% endif %}

Une fois le fichier créé, on l’intègre dans le layout choisi sachant qu’en définitive il est préférable de modifier tous les layouts de la même manière ( à moins bien sur que l’on souhaite proposer volontairement des templates différents). Dans notre cas, nous allons modifier le fichier _layouts/homepage.html . Après avoir mis en commentaires ou supprimé les balises `` déjà présentes, nous ajouterons juste en dessous de `<head>` la ligne :


{% include meta.html %}

Pour la description des posts sous markdown, il faudra ajouter une ligne dans l’introduction YAML ( YAML FRONT MATTER) : “excerpt: ma description “ . Par ex, pour cette page, on aura :

---
layout: default
title: "Référencer son site statique sous Jekyll"
date: 2017-06-15 10:09:36 +0200
excerpt: Les méthodes pour bien référencer son site afin qu'il soit bien repérer par les robots google et autres moteurs de recherche
categories: Github Pages Jekyll javascript referencement
---

Enfin, on vérifiera dans le code source de la page que les informations s’affichent bien. Les informations concernant la description, le titre du site sont placées dans le fichier _confi.yml. Le fichier doit contenir les lignes suivantes:

title: Le nom de mon site
description: La description de mon site

Tester les performances de son site

En plus de la pertinence du contenu, un bon référencement depend aussi du respect des normes HTML, de la bonne gestion des balises ‘’, mais aussi du comportement du site face à différents naviguateurs et différents supports ( tablette, smartphone, pc). Aujourd’hui, les robots google prennent en compte les qualités “responsive” du site dans le classement des pages. Pour toutes ces raisons, il est essentiel de tester son site pour mettre en evidence les problèmes potentiels impactant la qualité du référencement.

Voici une liste d’outils en ligne permettant de tester rapidement son site :

Connaitre le trafic de son site sous Jekyll

Il est de connaitre le trafic de son site tres simplement via google analytics. Pour cela, il est necessaire d’avoir un compte google et de s’inscrire au programme google analytics. Une fois connecté, on vous invitera à renseigner le site à suivre . Vous récupérer ensuite un script qu’il faudra integrer aux templates utilisés par votre site juste avant la balise </body>. Il arrive que ce code soit déja présent sous la forme :

{% if site.google_analytics %}
      <script type="text/javascript">
        (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
        (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
        m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
        })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
        ga('create', '{{ site.google_analytics }}', 'auto');
        ga('send', 'pageview');
      </script>
{% endif %}

Dans ce cas, on remarque que le numéro d’identification de google analytics UA-XXXXXX a été remplacé par {{ site.google_analytics }} . Il suffit alors d’aller dans le fichier _config.yml et d’ajouter la ligne suivante : google_analytics: UA-101155540-1 .

Une fois que le numéro d’identification a été renseigné, vous devriez voir les informations de connexion s’afficher en ligne sur votre compte google.