UBVEL #2 : c’est quoi un site web

Aujourd’hui, nous nous intéressons à ce qu’est un site web, autrement dit, sa nature “technique”. Pas de panique, nous restons simples. Ainsi, vous avez plus d’eau à votre moulin pour mieux déterminer comment, avec quoi et/ou avec qui monter votre vitrine en ligne si vous n’y connaissez rien.

Commençons par le commencement.

C’est quoi un ordinateur

Oui. C’est ici que ça commence. Nous avons tous plus ou moins un point de vue d’usager sur les ordinateurs. Je vous invite à regarder sous le tapis.

Colossus est un ordinateur conçu durant la seconde guerre mondiale. L'un de ses reconstitution est exposée à Bletchley Park. Photo Antoine Taveneaux (Own work) [<a href="http://creativecommons.org/licenses/by-sa/3.0">CC BY-SA 3.0</a>], <a href="https://commons.wikimedia.org/wiki/File%3ABletchley_Park_14.jpg">via Wikimedia Commons</a>
Colossus est un ordinateur conçu durant la seconde guerre mondiale. L’une de ses reconstitutions est exposée à Bletchley Park. Photo Antoine Taveneaux [CC BY-SA 3.0], via Wikimedia Commons
Un ordinateur c’est un ensemble de morceaux de plastique, de métal et de cailloux associés entre eux et dans lesquels on fait passer de l’électricité.

Ici commence le code informatique. Quand il n’y a pas d’électricité, nous convenons que ça fait 0. Quand il y en a, nous convenons que ça fait un 1. L’ordinateur, c’est une machine qui fait défiler des 0 et des 1 dans ses circuits.

D’abord, un peu d’ordre. On découpe les événements en tranches. Pour chaque tranche, on convient que la valeur peut être de 0 ou de 1 en fonction que le courant électrique passe ou pas. Les tranches sont appelées bits.

Défilé de 0 et 1

Viennent ensuite les octets. Les premiers informaticiens ont décidé d’assembler les bits par paquets de 8. Pour chaque octet, nous avons 8 positions différentes qui peuvent chacune prendre la valeur 0 ou 1. Au final, ça nous donne 256 possibilités d’octet. En voici un :

0

0

0

1

0

1

1

0

Couche suivante, c’est l’encodage. Chaque octet (ou groupe d’octets) se voit attribuer une valeur : un chiffre, une lettre, une opération etc. Cela forme des grilles d’équivalences.

 Un truc “drôle” au sujet de l’encodage

Il existe plusieurs grilles d’équivalence différentes entre octets et symboles. Vient s’ajouter à ceci que le nombre de bits contenus dans les octets peut varier. Qu’est ce qu’on rigole !

Capture d'écran d'une grille d'équivalence entre différents encodages dont l'UTF-8. Voir le document sur Wikipédia.
Capture d’écran d’une grille d’équivalence entre différents encodages dont l’UTF-8. Voir le document sur Wikipédia.

Normalement, vous n’avez pas à vous soucier de ce vaste sac de nœuds (je vous entend soupirer de soulagement). En théorie vos logiciels détectent automatiquement l’encodage de vos pages et documents (notez bien que vos logiciels sont eux-mêmes du code informatique, donc qu’ils sont eux-mêmes écrits dans un certain encodage… et que c’est pareil pour votre système d’exploitation (Windows, Ubuntu, Mac OS…)

Si vous avez envie d’expérimenter un peu la question, vous le pouvez : rendez-vous dans le menu du navigateur avec lequel vous consultez cette page. Vous trouvez quelque chose du genre “encodage du texte” (dans la section Affichage avec Mozilla Firefox) et vous en sélectionnez un au hasard.

Important : une fois que vous avez vu, n’oubliez pas de remettre l’encodage sur “détection automatique” !

C’est quoi la programmation

C’est l’activité qui consiste à écrire l’ensemble des commandes qui va piloter la réalisation d’une action par un ordinateur. À l’aube des temps de l’informatique, les développeurs n’avaient pas le choix. Quand ils écrivaient leurs programmes, ils le faisaient en binaire ou un encodage à peine plus intelligible pour l’esprit humain que des suites de 0 et de 1. Vous imaginez bien que ça n’a pas duré. Pas fous. Ils ont inventé les langages de programmation.

Dans le concept, ça ressemble à ça :

Langage de programmation Sauter
Encodage Maintenir l’équilibre, fléchir les genoux, pousser fort sur les jambes.
Binaire Ajuster la position du centre de gravité du corps, relâcher et contracter les sets de muscles des mollets et cuisses des deux jambes selon le schéma “plier”, relâcher et contracter les sets de muscles des mollets et cuisses des deux jambes selon le schéma “retendre”, exécuter le schéma retendre avec rapidité.

Les développeurs écrivent leurs programmes avec des langages de programmation. Ça aussi c’est du code informatique. Il existe un grand nombre de langages de programmation, certains sont dérivés les uns des autres. Ils ont tous des avantages et des inconvénients. Le code écrit par le développeur est ensuite traduit en 0 et 1 de manière à ce que l’ordinateur l’exécute.

Encore un truc drôle sur l’encodage et les langages de programmation

C‘est quelque part entre l’encodage et les langages de programmation que se décide ce que l’électronique de votre ordinateur fait quand elle reçoit une commande. Dans tous les cas, la seule façon d’atteindre l’électronique de votre ordinateur reste le langage binaire (donc des paquets de 0 et des 1 auxquels ont été attribués des valeurs).

Chaque composant électronique a ses propres commandes. Il est impossible de le piloter avec autre chose que le set de commandes qui lui est propre. Les sets de commandes sont différents d’un composant à l’autre, d’une marque à l’autre.

Et le mot magique ? S'il te plaît ?
Un ordinateur est un objet. Il se pilote. Crédit photo : d’après blickpixel, CCO.

Là encore, en théorie, vous n’avez pas à vous en soucier… sauf si un jour vous ajoutez un composant (exemple : une carte graphique) à votre ordinateur et que le pilote (aussi appelé driver) qui va avec reste introuvable. Forcément, ça marche moins bien.

Vous noterez que je parle de piloter l’électronique de votre ordinateur. Quand vous tournez le volant de votre voiture, vous ne lui faites pas comprendre qu’elle doit tourner. Vous la faites tourner.

Ainsi nous avons des mille-feuilles entiers de conventions qui nous permettent de passer de successions de 0 et de 1 à 42* l’affichage d’une page web sur un ordinateur.

* Le Guide du voyageur galactique de Douglas Adams est un grand classique de la science-fiction, il a été adapté en film.

Sommes-nous sur la même longueur d’onde ?

La séquence “0 1 1 1 1 0 0 1” est-elle un octet ?

 
 

Question 1 sur 1

Un site web ce sont des 0 et des 1

Chaque action réalisée par un ordinateur a été pensée en amont par un développeur. Il n’y a aucune exception. Un site web, ce sont aussi des 0 et des 1. L’ordinateur les additionne, les déplace, les ré-ordonne ou les compare en fonction de ce que la personne qui a écrit le code du site a pensé et voulu.

L’une des spécificités d’un lot de 0 et 1 qui constituent un site web que vous consultez, c’est qu’ils sont enregistrés sur un autre ordinateur que le vôtre. C’est là qu’internet intervient.

De l’intelligence des ordinateurs

Nao est un robot humanoïde interactif développé par la société Aldebaran Robotics. Il offre de très nombreuses perspectives en raison de ses aptitudes à l'interaction avec les humains. Photo <a href="/wiki/User:JeanBono" title="User:JeanBono">Xavier Caré</a> / <a href="/wiki/Main_Page" title="Main Page">Wikimedia Commons</a>, <a href="https://commons.wikimedia.org/wiki/File%3AInnorobo_2015_-_NAO_(cropped).JPG">via Wikimedia Commons</a>
Nao est un robot humanoïde interactif développé par la société Aldebaran Robotics. Photo Xavier Caré / Wikimedia Commons, via Wikimedia Commons

Yann Le Cun qui est directeur du laboratoire d’intelligence artificielle de Facebook le dit ainsi : “Ces systèmes ne sont intelligents que parce que des ingénieurs ont pensé à toutes les possibilités.”

Autrement dit, ce n’est pas le système qui est intelligent, ce sont les personnes qui ont conçu le système.

Aujourd’hui, les projets de pointe type Alphago (un ordinateur spécialisé dans le jeu de go qui a battu le n°1 mondial Lee Sedol) ou Tay (l’intelligence artificielle qui tape la discute de Microsoft) nous font nous poser 1 001 questions sur ce qu’est l’intelligence. Pour un site web, nous sommes très très loin de ce genre de considérations… à moins que vous ayez un budget de plusieurs millions d’euros à y consacrer.

C’est quoi internet

Les internets sont des réseaux composés de millions (milliards ?) d'ordinateurs qui peuvent se relier deux à deux entre eux, sans passer par un centre. En voici une représentation partielle construite en 2005. Image By The Opte Project [<a href="http://creativecommons.org/licenses/by/2.5">CC BY 2.5</a>], <a href="https://commons.wikimedia.org/wiki/File%3AInternet_map_1024.jpg">via Wikimedia Commons</a>
Les internets sont des réseaux composés de millions (milliards ?) d’ordinateurs qui peuvent se relier deux à deux entre eux, sans passer par un centre. En voici une représentation partielle construite en 2005. Image By The Opte Project [CC BY 2.5], via Wikimedia Commons

Disons plutôt “les internets”. À l’origine, il y avait des méthodes conçues pour que les ordinateurs puissent échanger des données (des 0 et des 1) à distance en passant par un réseau de télécommunication. Notez bien que je parle “d’échanger”. Dans cette configuration, les deux ordinateurs reçoivent et envoient. C’est l’une des différences majeures qui existe entre votre télé, qui n’est pas interactive et les sites web qui sont interactifs.

Sur la base de ces méthodes se sont constitués des réseaux d’ordinateurs. Puis ces réseaux ont été interconnectés entre eux. En 2005, une cartographie partielle des internets donnait l’image ci-dessus.

À notre niveau, disons que les internets, c’est l’ensemble des ordinateurs qui peuvent échanger des données à distance par les tuyaux des réseaux de télécommunication. Ceux qui ont envie de s’intéresser un peu plus à la question peuvent visionner cette conférence de Benjamin Bayart qui est un miracle de pédagogie (remplacez le mot “politique” par “économique”, ça marche pareil.)

Quel est le comble d’internet ?

Ça peut avoir l’air d’une blague Carambar, et pourtant… Ce qu’on appelle le web (sous-entendu : l’ensemble des sites web) et ce qu’on appelle internet, ce n’est pas la même chose. Les internets sont des ordinateurs interconnectés, ça on vient de voir. Il n’y a pas que les sites web à emprunter les routes des internets. Il y a beaucoup d’autres types d’échange de données. Je suis certaine que vous en connaissez sans le savoir d’ailleurs. Au hasard :

La téléphonie par internet

Le chat

Le mail

Le peer to peer

Un site web est un ensemble de 0 et de 1 spécialement pensé par ses concepteurs pour être interactif, diffusé par internet et auquel on accède en utilisant un logiciel prévu à cet effet : un navigateur web. Il y a 2/3 nuances de plus pour arriver au web “grand public”. Passons, ce n’est pas le sujet.

Comment ça marche un site web

Quand vous voyez une page web dans votre navigateur, cela signifie :

  1. Votre ordinateur (appelons-le n°1) a envoyé un signal à un autre ordinateur (appelons le n°2) grâce aux tuyaux d’internet. À la source de ce signal, il y a vous, qui par exemple avez tapé une adresse web dans la barre de votre navigateur (Firefox, Internet explorer, Safari etc.)
  2. N°2 a reçu le signal, l’a traité et cela déclenche le fait qu’il envoie des données à votre attention par les tuyaux d’internet. Ces données sont du code informatique.
  3. N°1 reçoit les données. Votre navigateur les prend en charge. Le code reçu contient toutes les instructions pour permettre à votre navigateur d’ordonner à l’électronique de votre ordinateur de fabriquer la vue de la page puis de l’afficher. Sur la droite vous avez un cadre blanc, en haut une photo, au milieu du texte, ici un lien vers une autre page, là un bouton etc.
  4. Vous cliquez sur un truc. Pour ce truc là, votre ordinateur n’a pas toutes les données. La boucle est bouclée, cela envoie un nouveau signal de n°1 vers n°2.

PS : notez bien qu’une image de bouton, ce n’est pas un bouton. Un bouton, c’est une image qui a été associée à des fonctionnalités pensées pour s’activer lorsque vous faites une action précise type un clic droit de souris dans une certaine zone.

Pourquoi je vous raconte tout ça ?

Parce qu’un site internet, il faut commencer par le penser. Si vous ne savez pas à quoi vous pensez, il y a toutes les chances que votre projet se transforme en Useless box.

Useless box en action
La Useless box est un grand classique des fablabs. Gif issu de la vidéo de présentation de Think geek.

Il y a une bonne raison à cela. Les prestataires et fournisseurs sont là pour vous vendre un truc (et si c’est gratuit, c’est vous le produit, donc c’est pas gratuit, coucou Messieurs Google et Facebook !)

S’ils peuvent faire en sorte que ça rencontre votre besoin, ça les rend plutôt contents. Mais si c’est trop compliqué de rencontrer votre besoin parce que vous, vous ne connaissez pas votre besoin, ils vous vendront un truc quand même.

Comment on fait un site web

Un jour, une personne a remarqué qu’en frappant deux cailloux ensembles, ça faisait une étincelle. 300 000 ans plus tard nous avions des développeurs qui écrivaient le code nécessaire à faire afficher les sites web.

Pourtant même avec un langage de programmation situé tout en haut du mille feuille de conventions informatiques, ça reste long et pénible. Par ailleurs, si on leur demande leur avis, les développeurs sont complètements partants pour se fatiguer moins pour en faire plus. Comme vous en fait. Alors voilà ce qu’ils ont imaginé.

Module préétabli Faire une course en sac
Langage de programmation Sauter
Encodage Vivre, maintenir l’équilibre, fléchir les genoux, pousser fort sur les jambes.
Binaire Faire battre le cœur, actionner les poumons, ajuster la position du centre de gravité du corps, relâcher et contracter les sets de muscles des mollets et cuisses des deux jambes selon le schéma “plier”, relâcher et contracter les sets de muscles des mollets et cuisses des deux jambes selon le schéma “retendre”, exécuter le schéma retendre avec rapidité.

 

(Ceci est une métaphore qui a ses limites. En tant qu’être humain, vous avez compris que votre ordinateur ne comprend rien.)

Puisque les sites web ont beaucoup de choses en commun, autant ne pas les refaire à partir de rien à chaque fois. Les “modules préétablis” ne sont pas un nouveau langage. Ce sont des éléments pré-écrits avec des langages de programmation. Reste ensuite à customiser les éléments pré-écris. Afin de rendre tout ceci plus facile à manipuler, des logiciels ont été créés dans ce but. Il en existe des tas, ils sont plus ou moins évolués et ont tous leurs particularités. C’est de cette façon qu’on fait des sites web à pas trop cher (que ce soit en temps ou en argent).

Les fonctions “de base” d’un site web

  • Publier des textes
  • Publier des images
  • Publier des vidéos
  • Publier des enregistrements
  • Éléments interactifs : liens cliquables, cases à cocher, menus de navigation etc.
  • Liberté de choix sur la mise en page de tous ces éléments

En gros, tous les sites web ont ça. C’est plus ou moins joli, flexible et simple à manipuler.

Il existe des quantités impressionnantes de logiciels de création de site web. Si vous faites quelques recherches sur la question, vous allez être rapidement noyé sous la masse. C’est pour cette raison que personnellement, je vous conseille de réfléchir d’abord à votre besoin. On mettra les outils en face ensuite.

Quel est votre besoin ?

En tant que rédactrice, j’en identifie trois :

  1. Vous faire connaître de vos clients potentiels
  2. Resserrer les liens avec vos clients. Du même coup, vous vous faites connaître de clients potentiels.
  3. Apporter un service en ligne à vos clients. Du même coup, vous resserrez les liens et vous faites connaître.

(Je pars du principe que votre modèle économique ne relève pas du numérique)

Pour les deux premiers points, n’importe quelle structure de site web qui possède les fonctionnalités de base listées ci-dessus fait très bien l’affaire. Si si, j’vous jure. En fait le point 3 s’en satisfait très bien aussi, hormis quelques rares cas. Un seul bémol : ceci est valable à condition de vous être mis à la place de votre client pour rencontrer son besoin à lui. Votre site web n’est pas fait pour vous faire plaisir à vous, il est fait pour servir votre client ! Je vous dois la vérité, votre client s’en fout de vous (en tout cas, tant qu’il est devant son écran, dans la vraie vie c’est différent). Ce qui l’intéresse c’est d’obtenir ce qu’il veut rapidement et sans se casser la tête. Si vous avez intégré ça, 50% de la réussite est déjà acquise.

(Ceci était un cri du cœur et pourrait faire l’objet d’une encyclopédie en 10 volumes…)

Choix de la techno pour votre site web

Il existe deux grandes familles d’ossatures préétablies de sites web : ceux qui sont soumis à des licences libres et ceux qui sont soumis à des licences propriétaires.

/!\Warning/!\ Les licences libres sont souvent associées à la gratuité et les licences propriétaires au fait que c’est payant. Pourtant un logiciel libre peut être payant et un logiciel propriétaire peut être gratuit.

Les ossatures libres

Ça va sans doute vous étonner : il y a des tas de hurluberlus qui sont complètements partants pour travailler beaucoup et ne rien gagner du tout (ce n’est d’ailleurs pas incompatible avec l’envie de gagner beaucoup en n’en foutant pas une, c’est juste que ça ne se passe pas au même moment). Ces personnages étranges avaient déjà inventé internet et tout ce qui fait fonctionner internet. Ils se mirent à faire pareil pour les ossatures de sites web. Les principales sur le “marché” sont WordPress, Joomla !, Drupal et Dotclear. c’est ce qu’on appelle des CMS (content management system soit système de gestion de contenus en français).

Les ossatures propriétaires

Dans ce cas, c’est une entreprise qui met en place sa propre ossature de site web. L’entreprise gagne ensuite sa vie en adaptant son ossature à des besoins particuliers.

Dans la pratique, on choisit comment ?

Si vous voulez que votre site web fasse des trucs hors norme, étranges et compliqués, sans doute devriez-vous trouver une entreprise qui a une architecture préétablie qui peut l’accepter. Elle vous proposera un développement spécifique en plus, et voilà. Revers de la médaille : vous serez lié à cette entreprise pour votre site et ça risque de douiller.

Si vous voulez que votre site web fasse des trucs standards, afficher des images, des vidéos, du texte voire même du e-commerce, le plus probable c’est que nos hurluberlus ont déjà prévu le coup. Autant aller vers de l’ossature libre, car là, vous faites vous-même ou vous demandez à qui bon vous semble de faire pour vous. En général c’est moins cher, mais voici ce qui à mes yeux est absolument essentiel là dedans :

  • Vous serez en mesure d’apporter de petites modifications à vos contenus même si vous êtes une chèvre en informatique.
  • Vous changez de prestataire quand bon vous semble.

Et les services de création de sites web en ligne alors ?

Personnellement je vous les déconseille du fait que vous n’êtes pas chez vous. Ça a de nombreuses conséquences. Vous pouvez vous retrouver du jour au lendemain devant des modifications drastiques des conditions générales d’utilisation. La plateforme peut fermer du jour au lendemain, et vous perdez tout. Enfin du point de vue de la visibilité dans les moteurs de recherche, c’est une vraie misère (or vous voulez être trouvable, je me trompe ?) Très honnêtement, si vous voulez une vitrine en ligne sans avoir à la mettre en place, pariez plutôt sur ceux qui ont vraiment les moyens de vous rendre visible : créez vous une page Facebook et allez voir du côté de Google My Business.

(PS : si vous êtes de ceux qui s’apprêtent à vendre un rein pour un compte premium sur les Pages jaunes, avant de signer faites vous expliquer clairement la nature de la prestation. Il se pourrait que vous soyez très surpris… Tenez, par exemple voilà un “retour utilisateur” certes un peu long mais très informatif. Leur calcul : chaque “appel qualifié” reçu par les Pages jaunes a coûté 300€.)

Voilà, ce billet touche à sa fin, j’en ai terminé pour aujourd’hui de me faire des amis parmi mes clients potentiels (au hasard, les agences web) en bousillant leur business. Promis, un jour je vous parlerai SEO (edit : c’est fait), ergonomie (edit : c’est fait) et marketing digital.

Un If modified since dans WordPress

Il était une fois une rédactrice qui s’est retrouvée à faire un site web pour quelqu’un d’autre qu’elle. Alors forcément, il était hors de question de la prendre trop tranquille sur le SEO “technique”. J’en ai souffert pour arriver à le faire fonctionner correctement ce satané If modified since. Pourtant j’y suis arrivée. Et si je pouvais éviter quelques heures des affres de l’incompréhension à quelqu’un, ce serait vraiment la cerise sur le gâteau. (Oui le code est inclus, tout bien comme il faut, ne vous en faites pas !)

EDIT : n’oubliez pas de consulter la note en fin de tuto sur les prérequis supplémentaires au champ Last-Modified dans le header.

Si vous souhaitez aller directement au code, c’est là. Si vous voulez un peu d’explications sur les pourquoi et les comment, ça commence ici :

Le If modified since pour les noobs

C’est une demande des moteurs de recherche. Ils souhaitent que les sites web communiquent la date de dernière mise à jour des contenus. Si le crawler du moteur qui est en train de ré-indexer votre site détecte que la copie qu’il a déjà dans le ventre n’a pas bougé, il s’abstient. C’est autant de bande passante et de temps machine d’économisés.

Les moteurs de recherche sur internet possèdent des data centers monstrueux. Tout ceci génère des consommations d’énergie et de bande passante phénoménales. Or, les gros consommateurs de bande passante paient au volume, imaginez donc ce que cela représente pour Google ou Bing si la pratique du If modified since se généralise sur le net…

Pourquoi moi je passerais au If modified since

Il y a deux raisons principales.

Pour le SEO

Aucun moteur ne publie sa “recette” de classement des pages dans les résultats de recherche. Il n’y a rien de garanti. Toutefois considérez que Google indique le If modified since en 3e position dans ses conseils aux webmasters, juste après la question des sitemaps. Et ce que Google veut… La présence du If modified since dans les en-têtes (headers) de vos pages influe très probablement sur leurs positions dans les résultats de recherche des internautes.

Si “SEO” ne vous évoque rien, voyez ce billet d’intro. Il va sans doute vous éclairer.

Pour la planète

Et bien oui. Les consommations d’énergie liées aux données échangées sur le net explosent. À chaque fois que nous évitons d’utiliser les tuyaux du web pour échanger de l’info, nous sauvons la vie d’un bébé panda roux. La consommation d’énergie des internets est hallucinante, voyez plutôt ce dossier d’Arte Future sur le sujet : Internet peut-il devenir durable, de la toile énergivore à l’éco-web.

Comment insérer le If modified since dans le header de ses pages WordPress

Solution la plus “simple” : le plugin nommé If modified since header. Seul souci, il ne fonctionne pas. En effet, l’auteur a repris un bout de code qui lui a été donné par quelqu’un d’autre sur un forum mais visiblement n’a pas compris comment ça marche. Le plugin semble fonctionner, mais lorsqu’on teste sérieusement, on s’aperçoit que le format envoyé n’est pas correct. Les moteurs de recherche veulent un format très précis qui est celui-là :

Last-Modified: Sat, 27 Feb 2016 16:15:51 GMT

Plusieurs outils de test de la fonctionnalité If modified since ne donnent que la réponse au test ( 200 ok ou 304 not modified). Pour être bien sûr que vous êtes dans les clous, préférez donc un outil qui vous affiche le contenu de votre HTTP header (exemple : celui de Crosoft)

C’est pour cette raison que je vous propose de mettre un peu les doigts dans le cambouis. Rassurez-vous, rien de compliqué,  je vous mâche le travail. Voilà le tuto :

Étape n°1 : vous créez un thème enfant. Si si, j’insiste. Si vous ne le faites pas, la fonctionnalité sautera à la prochaine mise à jour. Ce serait ballot. Il y a des plugins très bien faits pour ça. Si vous avez réussi à installer un WordPress, vous saurez créer un thème enfant.

Étape n°2 : vous créez un fichier functions.php dans votre thème enfant. Attention à cette étape. Lorsque vous manipulez des fichiers .php, vous devez le faire avec un éditeur de code qui autorise le fait de travailler sans BOM (c’est un format qui peut s’appliquer à différents langages de code). Il y a Notepad++ sous Windows et Geany sous Ubuntu, les deux font très bien l’affaire, ils sont libres et gratuits.

Étape n°3 : vous savez naturellement que vous devez commencer dans votre fichier functions.php par faire charger le fichier style.css de votre thème parent. Si vous ne le savez pas, je vous le dis. Voilà un bout de code à coller tel quel et qui fait très bien l’affaire (note pour les débutants, il ne doit JAMAIS y avoir d’espace avant la mention <?php , ça casse les fonctions).

<?php
// Charger le style.css du thème parent puis charger le style.css du thème enfant
function theme_enqueue_styles() {

    $parent_style = 'parent-style';

    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( $parent_style )
    );
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
?>

Étape n°4 : faites la même chose pour le If modified since avec le bout de code suivant. Il est issu d’un mélange entre une réponse apportée par un forumeur de wordpress.org nommé Cybmeta et d’une indication que m’a donnée Lumière de lune sur les forums francophones.

<?php
/**
 * Made with the code produced by Cybmeta with the help of Lumière de lune. Put If-modified-since in articles header in GMT format.
*/

add_action('template_redirect', 'add_last_modified_header');

function add_last_modified_header($headers) {

    //Check if we are in a single post of any type (archive pages has not modified date)
    if( is_singular() ) {
        $post_id = get_queried_object_id();
        if( $post_id ) {
            header("Last-Modified: ".gmdate("D, d M Y H:i:s T", get_the_modified_time( $d = "U" )));
        }
    }

}
?>

Un peu d’explications. La première partie de la fonction consiste à flécher l’action vers les pages et les articles du site. Elle s’intégrera uniquement dans les contenus du site, pas sur les pages automatiquement générées par WordPress (exemple : la page du blog). La deuxième partie consiste à récupérer la date de dernière modification du contenu en format “timestamp” puis à la transformer en format GMT en imposant l’ordre dans lequel les mentions doivent apparaître. Voilà.

Collez votre fichier dans votre thème enfant, c’est fait, vous n’avez plus qu’à vérifier que tout marche bien. Pour info, cela fonctionne avec les thèmes Twenty fourteen et Twenty fifteen. Je ne vois aucune raison que cela ne fonctionne pas avec d’autres thèmes. Mais peut-être fais-je erreur, je ne peux pas vous le garantir.

Note : je ne suis pas développeuse, je ne sais pas coder. Ceci est le résultat de très longues cogitations et d’expérimentations un peu hasardeuses. Si cela ne fonctionne pas chez vous, je suis au regret de vous dire que je suis très probablement incapable de vous aider.

Étape n°5 : likez ou partagez ce post, ça me ferait plaisir (c’est là-haut)! Cela aura aussi pour mérite de définitivement asseoir l’absence de strat SEO pour ce site. À moins qu’il se mette à sortir pour des mots clés style “givrée qui s’intéresse à tout et n’importe quoi” ! Ce serait plutôt classe, vous ne trouvez pas ?

EDIT du 18/03/2016 : le fonctionnement du If modified since header a d’autres prérequis que l’insertion du champ Last-Modified expliquée ci-dessus. Votre serveur doit être capable de fonctionner en mode HTTP 1.1 (c’est très courant, voyez auprès de votre hébergeur) et le cache WordPress doit être activé (cela rend le champ Expires du header fonctionnel, par défaut sa valeur est fixée à Thu, 19 Nov 1981 08:52:00 GMT). Si je trouve plus d’astuces et d’infos pour vous aider à remplir ces conditions, je complèterai le papier.

 

Image à la Une : Photo par Mathias Appel (Red Panda) [CC0], via Wikimedia Commons

 

Licence Creative Commons
Ce(tte) œuvre est mise à disposition selon les termes de la Licence Creative Commons Attribution 3.0 France.

 

Note : cette licence ne peut s’appliquer aux bouts de code dans l’article. Techniquement le CC est plutôt pour les contenus culturels, mais on a déjà vu des exceptions. Le truc, c’est que ces fameux fifrelins ne sont pas que de moi, aussi je ne peux décider pour les gens qui ont participé. Et puis il faut le dire, pour un si petit truc, allons… copiez collez si vous les voulez et basta.

Twitter card blues

Il existe un truc démoniaque pour permettre à vos lecteurs potentiels de vous identifier comme la personne fascinante que vous êtes : les Twitter cards… encore faut-il qu’elles fonctionnent.

Pour les mettre en place

Take courage ad par Vandalog, licence CC-BY-SA 2.0 disponible en partage sous FlickR
Take courage ad, photo de Vandalog, licence CC-BY-SA 2.0 disponible en partage sous Flickr

Condition : un peu de débrouillardise et du temps. Pour la question de temps, c’est fonction de votre niveau en informatique. Un pro vous torchera le tout en 30 minutes. Moi je n’y connaissais rien, ça m’a pris une demi-journée (première session) + 3 à 4 heures supplémentaires quand le système est parti en vrille. J’aurais tendance à conseiller aux personnes mettant en place un site pour la première fois de se familiariser avec leur nouveau jouet pendant quelques semaines avant de se lancer.

Vous devez également posséder votre propre nom de domaine. Les .overblog et autre espaces gratuits ne conviennent pas du fait que vous n’avez pas la main sur l’administration du site. Ensuite, il a trois choses à mettre en place.

Vos pages doivent inclure les infos nécessaires (champs Twitter, voir plus loin pour une petite explication de texte). Pour ça, le plus simple dans un environnement géré à l’aide d’un CMS (content manager system) reste d’utiliser des add-ons.

Le robot de Twitter doit trouver la permission d’aller chercher les infos nécessaires. Et il aime bien qu’on s’adresse à lui directement, en l’appelant par son petit nom. C’est au niveau du fichier robot.txt de votre site que ça se joue. Il doit inclure les lignes suivantes :

User-agent: Twitterbot
Disallow:

Localisation de la section développeur sur Twitter. Crédit illustration : capture d'écran, Geneviève Canivenc, licence CC-BY-NC-ND 2.0 (ou quelque chose du genre)
Localisation de la section Développeurs sur Twitter. Crédit illustration : capture d’écran, Geneviève Canivenc, licence CC-BY-NC-ND 2.0 (ou quelque chose du genre)

Enfin, une fois tout ceci en place, vous devez avoir obtenu la validation de votre nom de domaine par Twitter. La soumission se fait en ligne, au niveau de votre compte Twitter, à l’aide de l’adresse d’une page contenant un article (délai : de quelques minutes à quelques semaines (!?) après soumission). Le lien pour y accéder se situe en page d’accueil de votre compte, dans le dernier encadré de la colonne de gauche. Cliquez sur “développeurs”, respirez un bon coup si vous ne l’êtes pas, puis laissez-vous guider. La seule chose qui puisse poser problème, c’est que vous ne parliez pas anglais. Là forcément, ça se complique.

Dans la pratique

D’abord, le fichier robot.txt. Si votre site n’en dispose pas, aucune inquiétude. C’est simplement qu’il fonctionne avec un système un peu plus complexe (un htaccess.trucmuche). Pourtant rien n’empêche d’avoir un robot.txt. Créez un fichier dans le bloc note, collez-y les mentions qui vont bien, calez le tout à la racine du site (à l’aide d’un client FTP type Filezilla) et c’est parti. Pour info, le mien fonctionne nickel. Il indique juste aux robots de ne pas aller fouiller dans la poubelle et à Twitter que je lui donne ma bénédiction.

Ensuite, les infos. C’est là que ça peut se corser. Mon site est « fièrement propulsé par WordPress ». Suivant mon propre conseil, j’avais trouvé un widget nommé Seo by Yoast, qui fit le job pendant quelques temps.

Jusqu’au jour où…

Et puis catastrophe, mes Twitters cards ne fonctionnaient plus. Bidouillage divers et variés, je réussis à revenir à une version un peu bancale, sans image et blindée de « Ma Rédactrice ».

Twitter card "bancale". Crédit illustration : Geneviève Canivenc, licence CC-BY-NC-ND 2.0.
Twitter card “bancale”. Crédit illustration : Geneviève Canivenc, licence CC-BY-NC-ND 2.0.

Et puis hier, je me suis retroussé les manches. Mais POURKOUA. Ah, ça m’énerve.

Je vous passe les détails de mon combat épique. Sachez juste que Twitter ne va pas chercher les infos des cards en temps réel et que j’ai donc passé une blinde de temps à tester des trucs dont je ne pouvais pas voir le résultat en live.

Edit : j’ai récemment découvert une truande pour forcer Twitter à afficher la mise à jour d’une Twitter cards (voir en fin d’article).

Rien à faire, il a fallu aller mettre le nez dedans

Pour une raison qui m’échappe, l’option Twitter card de Seo by Yoast ne fonctionnait plus correctement dans mon environnement. Plus précisément, il manquait des méta-tags (à mes souhaits) destinés à Twitter dans le code de mes pages.

Petit guide empirique des métas-tags Twitter

Ça, c'est quand ça marche. Crédit illustration : Geneviève Canivenc, licence CC-BY-NC-ND 2.0.
Ça, c’est quand ça marche. Crédit illustration : Geneviève Canivenc, licence CC-BY-NC-ND 2.0.

Champ Twitter card = le type de card que Twitter doit afficher pour votre article. Chaque type nécessite une re-soumission auprès de Twitter.

Champ Twitter creator = le compte Twitter de l’auteur du billet. Apparaît sous le titre sous la forme “By pseudo @comptetwitter”.

Champ Twitter site = le compte Twitter auquel est affilié le site publiant l’article. Apparaît sous la forme de l’icône et du pseudo attaché au compte juste au dessus du titre de l’article;

Champ Twitter title = le titre de l’article.

Champ Twitter description = le petit texte qui apparaît dans le résumé. En fonction de votre environnement et des réglages du site, cela correspond à la méta description à renseigner dans l’interface de WordPress.

Champ Twitter domain = c’est le texte qui apparaît à la fin de l’article après la mention “View on…”

Champ Twitter image = lien de l’image qui apparaît sous la forme d’une miniature à côté du texte du résumé de l’article. Correspond à “l’image à la une” à renseigner dans l’interface de création des articles. Attention, cette image doit être dans un format accepté par Twitter et faire moins de 2Mo.

Tout ça pour finir avec un autre plugin

C'est-y pas beau la vie? Crédit illustration : Geneviève Canivenc, licence CC-BY-NC-ND 2.0.
C’est-y pas beau la vie? Crédit illustration : Geneviève Canivenc, licence CC-BY-NC-ND 2.0.

J’ai trouvé un autre plugin, JM Twitter card, qui lui (pour le moment en tout cas) fait ce que je lui demande. Il présente également le grand avantage d’être compatible avec Seo by Yoast, que je n’ai pas envie de jeter pour autant. Il me met les bonnes pratiques SEO (Search engine optimization) sous le nez lorsque je prépare un papier.

Joie !

Et bien merci Monsieur Julien Maury.

Rester philosophe

Ne me reste qu’à attendre que Twitter veuille bien mettre à jour les cards plus anciennes. Ah oui, juste un dernier détail. Ne JAMAIS inclure de guillemets dans votre méta-description. C’est interprété comme un signe d’arrêt et le texte se trouve tronqué.

Edit : THE truande ou comment forcer Twitter à afficher correctement les mises à jour d’une card.

1/ récupérer le lien d’une de vos pages

Exemple : http://www.ma-redactrice.com/plaidoyer-ibrahim-maalouf-en-bretagne/

2/ transformer cette URL

Il est possible par exemple d’ajouter une mention type “?x=test1” après le / final (ça fonctionne très bien, en tout cas pour WordPress, avec 2 3 4 5 etc.)

Ça nous donne : http://www.ma-redactrice.com/plaidoyer-ibrahim-maalouf-en-bretagne/?x=test1

3/ générer une URL courte

J’ai testé via bit.ly, c’est nickel.

Dans le cas de mon exemple : http://bit.ly/U1hDAX

4/ Tadam!

Twitter considère cette URL comme inconnue. Il va donc chercher ses infos afin de l’afficher. Seul hic, les deux pages étant considérées comme différentes, leurs stats ne sont pas agglomérées (retour en début d’article).

WordPress, c’est le bien. Cela permet même aux gens comme moi qui n’ont jamais écrit un bout de code de leur vie de faire leur ptite page rien qu’à eux presque1 comme ils l’entendent.

Site officiel de WordPress : wordpress.org

Présentation de Seo by Yoast : yoast.com/wordpress/seo

Présentation de JM twitter card : support.tweetpress.fr/jm-twitter-cards

1 Oh mais que vois-je, WordPress ajoute une capitale au milieu de son propre nom, et m’empêche de suivre les directives typographiques de l’Imprimerie nationale. Comme quoi, tout a des limites !

Image à la une : Why ? Crédit : BohemianDolls, en partage sous flickr (licence CC-BY-NC-ND 2.0).

Licence Creative Commons
Ce(tte) œuvre est mise à disposition selon les termes de la Licence Creative Commons Attribution – Pas d’Utilisation Commerciale – Pas de Modification 3.0 France.