Une belle vitrine en ligne (UBVEL) #1 : le nom de domaine

J’ai récemment été amenée à monter la vitrine en ligne de la salle de sport que je fréquente (Côté Corps, c’est à Quimper, je recommande chaudement !) Et là, c’est le choc. J’ai mis les doigts dans les difficultés que rencontrent les professionnels type TPE/PME quand ils se trouvent face au web et qu’ils n’y connaissent rien.

Jean Pierre Castaldi s'interroge.
Y aurait-il un organe mou qui n’a rien à y faire dans le potage ? Gif réalisé (par moi) à partir de l’interview de Jean Pierre Castaldi par Raphaël Mezrahi.

D’accord. On y va. Voici ce que vous devez savoir avant de vous lancer si c’est votre cas (il y aura plusieurs billets sur les différents aspects du thème).

Note : j’ai réalisé le site de Côté Corps “par hasard”. Je suis rédactrice, pas webdesigner. Il se trouve juste que je suis une rédactrice qui adore bidouiller. Évacuons maintenant la question de mon auto-promo : plus d’info sur le pourquoi de mes bidouillages / plus d’info sur les prestas que je propose. Voilà, ça c’est fait. Passons à ce qui vous intéresse.

Nom de domaine et hébergement

D’abord un peu de pédagogie. Quand on achète une maison, son adresse est indissociable du lieu où elle se trouve. Sur internet c’est différent.

Le nom de domaine, c’est l’adresse à laquelle on trouve votre (futur?) site. C’est elle qu’on tape dans la barre du navigateur avec lequel on accède au web (exemple : Firefox, Internet explorer, Safari, Google Chrome etc.)

Le “lieu” où votre site se trouve s’appelle l’hébergement. Vous pouvez vous procurer les deux de manière indépendante, par exemple auprès de deux fournisseurs différents. Il suffit ensuite de faire le lien.

Si vous ne connaissez rien à internet, je vous recommande d’acheter les deux auprès du même fournisseur. Ça simplifie. Par contre, j’insiste avec la dernière énergie sur ce point :

ACHETEZ VOUS-MÊME VOTRE NOM DE DOMAINE ET VOTRE HÉBERGEMENT

Pourquoi suis-je aussi catégorique ? Reprenons nos histoires de maison. Vous en achetez une. Choisissez-vous de donner les sous à votre notaire ou votre entrepreneur en bâtiment pour qu’il devienne propriétaire à votre place ?

Fou rire dans un public
#MDR #LOL #XPTDR. Gif réalisé à partir d’une vidéo diffusée par Cyril Hanouna Europe 1.

Posée ainsi, la question est absurde, nous sommes d’accords. C’est la même chose pour votre nom de domaine et votre hébergement web. Vous n’avez aucune envie de vous retrouver à la rue au moindre souci avec le notaire ou l’entrepreneur. Notez-le bien : le genre d’ennuis auquel je fais allusion n’est pas forcément un désaccord commercial. Imaginez, vous faites réaliser un site web par un prestataire. Un an plus tard, vous le recontactez pour modifier un élément et entre-temps, il est parti vivre aux États Unis. Dommage…

C’est vrai, un nom de domaine et un hébergement représentent une petite somme, disons 20 ou 30€ HT par an. Vous pourriez peut-être prendre le risque si ça simplifie, pas vrai ?

Non. En faisant cela, vous risquez tout le travail que vous avez investi sur votre site ainsi que la renommée que vous avez construite autour. Et là, ça chiffre sévère, même pour une TPE. Vous achetez vous-même votre nom de domaine et votre hébergement. Si vous prenez un prestataire pour le site, vous lui filerez les clés le temps des travaux.

Où acheter un nom de domaine et un hébergement

Il y a de très nombreux fournisseurs. En voici 3 auxquels j’ai eu affaire, rangés dans l’ordre de mes préférences (oui, je suis chez moi, je fais ce que je veux).

Note : je ne suis pas affiliée à ces entreprises. Si vous leur achetez quelque chose, je n’en tirerai aucun avantage.

Gandi

Logo du fournisseur de noms de domaine et d'hébergements Gandi
Logo du fournisseur de noms de domaine et d’hébergements Gandi, tous droits réservés.

Il s’agit d’un très gros fournisseur de noms de domaine et d’hébergements web. Le service est pro, les tarifs très compétitifs. J’ai une excellente expérience du contact avec le service client. C’est un français. Ça compte : quand vous lisez de la documentation, vous n’avez pas affaire à une traduction viteuf’ et très approximative. Les non anglophones apprécieront. Autre aspect, l’entreprise considère internet comme un bien commun auquel elle contribue et dont elle bénéficie pour développer son activité. Autrement dit, elle s’investit dans des projets dits “citoyens”.

Le site de Gandi

OVH

Logo du fournisseur de noms de domaine et d'hébergements OVH
Logo du fournisseur de noms de domaine et d’hébergements OVH, tous droits réservés.

OVH est le leader européen de l’hébergement web. Idem que Gandi, le service est pro, les tarifs très compétitifs. Idem que Gandi, c’est un français, les non-anglophones ne se heurteront (pas souvent) à des textes maladroitement traduits de l’anglais. Je trouve la logique de l’interface client actuelle difficile à comprendre. De mon expérience, le service technique est réactif. Seul souci : lorsque vous avez une question précise, il est très compliqué d’obtenir autre chose qu’une réponse pré-formatée. L’entreprise est connue pour avoir hébergé WikiLeaks pendant un temps et ce malgré les pressions politiques dont elle a été l’objet.

Le site d’OVH

GoDaddy

Logo du fournisseur de noms de domaine et d'hébergements GoDaddy, tous droits réservés.
Logo du fournisseur de noms de domaine et d’hébergements GoDaddy, tous droits réservés.

C’est le plus gros fournisseur de noms de domaine au monde. C’est vraiment pas cher ça peut être vraiment pas cher, toutefois attention à la politique commerciale hyper agressive. Même si l’entreprise est américaine, les traductions proposées sur son site sont en général de bonne qualité. Niveau service client, c’est un peu moyen, très dépersonnalisé. L’entreprise est connue pour avoir soutenu un projet de loi sulfureux aux États Unis. Il aurait abouti selon ses détracteurs à des limitations de la liberté d’expression.

Le site de GoDaddy

Complément d’infos : je suis retournée sur GoDaddy avant de publier l’article. Normal, je n’ai plus rien chez eux depuis des années, il fallait vérifier. J’y ai trouvé une offre à 4.79€/mois pour une adresse e-mail. Je ne sais pas exactement de quoi il retourne et à vrai dire, ça ne m’intéresse pas. Ce prix là est juste délirant. Je soupçonne une exploitation de l’ignorance des non-pros sur la question. Une chose est sûre : quand vous avez un hébergement et un nom de domaine chez Gandi ou OVH, les adresses mail sont incluses.

Choisir son nom de domaine

Une adresse web comporte plusieurs éléments. Prenons par exemple la mienne.

← Adresse web →

Sous domaine

← Nom de domaine →

www

.

ma-redactrice

.

com

Abréviation de World Wide Web

Votre identité sur internet

Extension de votre nom de domaine

Concernant le www, rien à signaler. C’est comme ça pour (presque) tout le monde*. Compte tenu de l’évolution des technologies, vous n’avez pas à vous en préoccuper.

*Si vous connaissez quelqu’un qui peut me raconter l’histoire de ce fameux www et m’éclairer sur le fait que le site de l’Ifremer est en wwz, je prends !

Votre identité sur internet

Techniquement, vous pouvez installer un site présentant votre activité sur quelque chose du type www.voleur.com C’est pas très vendeur. Je vous conseille de choisir un nom de domaine qui reflète votre marque commerciale et votre activité. Autre élément à prendre en compte : il est préférable que votre adresse soit plutôt courte et facile à mémoriser.

Exemple : l’entreprise d’électricité générale Benoît et fils. Je suggère quelque chose du genre www.benoit-electricien.com

Premier élément : on ne peut pas avoir de caractères accentués dans les noms de domaine. C’est comme ça.

Deuxième élément : dans ce choix là, vos clients actuels vous retrouvent facilement. En effet, le “et fils” n’apporte que très peu d’info, on peut facilement l’omettre dans le nom de domaine (mais pas sur le site, nous y reviendrons dans un autre billet !)

Troisième élément : je suggère de choisir “electricien” plutôt que “electricite” ou “electricite generale”. Quand une personne qui vit à Quimper cherche un électricien sur internet, elle tape “électricien Quimper” dans son moteur de recherche. Ce n’est pas crucial, mais ça compte (et pour parler SEO c’est là-bas).

Dernier élément. Beaucoup de gens vous disent “noooon surtout pas de “-” dans un nom de domaine”. Perso, je ne suis pas d’accord. Comparons. Qu’est ce qui est le plus lisible ? www.benoit-electricien.com ou www.benoitelectricien.com ?

Ce sont des humains qui cliquent sur les URL (adresses web). Dès que vous mettez en place un contenu web, pensez aux humains qui les consulteront. Vous serez toujours gagnant.

L’extension de votre nom de domaine

Exemple : .fr, .com, .info, .net, .bzh etc. C’est elle qui va déterminer le prix que vous payez pour acheter un nom de domaine.

Pour un pro, j’ai tendance à recommander de taper dans ce que les gens connaissent le mieux. En clair : le .com et le .fr

Pour certaines questions liées à votre image, vous pourriez être amené à choisir un autre type d’extension. Classiquement, les .info, .net et .org sont plutôt pour les associations, les activités à but non lucratif.

Si vous avez une activité fortement ancrée localement, les .bzh .paris .corsica ou .alsace peuvent être de bons choix. Ils marquent votre identité. Attention, ils ont tous des conditions qui leurs sont propres. Veillez bien à les remplir avant de vous décider (autrement dit, lisez les encadrés avant de valider votre commande).

Il existe en fait des foultitudes d’extensions possibles. Certaines sont très classes. Exemple : .design pour un architecte, .boutique pour un magasin, .pro pour un artisan etc. Il faut toutefois bien réfléchir. En effet, vous prenez le risque d’être moins visible sur les moteurs de recherche qu’avec quelque chose de plus classique.

Le prix : en fonction de l’extension que vous choisissez, le prix n’est pas le même. Les extensions les plus économiques coûtent moins de 3€, les plus chères peuvent exploser à plusieurs milliers d’euros. Pour un .fr comptez entre 5 et 10€ par an en fonction de votre fournisseur.

Acheter plusieurs noms de domaine ?

Vous avez choisi www.benoit-electricien.fr toutefois quelque chose vous titille. Et si un concurrent achetait www.benoit-electricien.com ? Ne devriez-vous pas l’acheter avant lui pour vous prémunir ?

Ma réponse : si vous étiez Mac Donald, effectivement, je vous conseillerais d’acheter les déclinaisons les plus courantes de votre nom de domaine. Dans le cas d’une TPE/PME, les visites sur le site vont se monter au plus à quelques milliers par mois. Autant dire que vous n’avez aucun intérêt pour les cybersquatteurs. Quant à votre concurrent direct, croyez-moi, il a autre chose à faire que passer son temps à alimenter un site rien que pour vous embêter.

La taille de votre hébergement

Vous êtes un pro, vous devez donc prendre une offre “pro” pas vrai ?

Eh bien non. Si vous êtes un pro dont le modèle économique dépend d’internet, c’est votre métier, vous n’avez pas besoin de cet article. Si votre modèle économique est plus traditionnel, garagiste, salle de sport, ébéniste etc. vous aurez au plus quelques milliers de visites par mois. De plus votre site est relativement simple. Les premières formules nom de domaine + hébergement suffisent plus que largement.

Si vous deviez vous lancer dans la vente en ligne, là oui, une offre pro se justifierait. Sinon, c’est inutile. Autant acheter un bistouri laser pour se couper les ongles.

Le prochain billet parlera de comment choisir la technologie avec laquelle monter (ou faire monter) votre site.

Image à la une : Norma Jean Baker posant en pin-up avant de devenir Marylin Monroe. Carte postale par Teichnor Bros., Boston (eBayfrontback) [Public domain], via Wikimedia Commons

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.

How to : vivre en harmonie sur Twitter

Sur Twitter, on trouve le meilleur comme le pire. Ô rage, Ô désespoir, il semblerait que le pire fasse partie du “How to” devenir influenceur. Et les wannabe influenceur, ça ne manque pas.

Soit, filtrons à la source et soignons les followers de qualité.

Oui, je sais, aux yeux des community managers fous de Twitter, je suis et resterai une #TAAA (Twittos Antisocial Ascendant Autiste). J’assume.


Vivre en harmonie sur Twitter

les 10 commandements du #TAAA

0% back je followerai

Si je suis un compte, c’est parce qu’il peut m’intéresser. J’veux du contenu moi, et du bon. Alors ton +1 dans mes abonnés, s’il doit me coûter de me taper de la boue, c’est niet.

Des spammeurs d’auto-promo sans pitié me désabonnerai

Oui, okay, tu as sorti ton livre/ton papier/tu donnes un spectacle, c’est bon, j’ai compris. Même en admettant que je sois passée à côté une ou deux fois, faut pas pousser. Sans nouvelle actu sur le sujet, passés quelques rappels, stop.

Les listes imbuvables de #FF j’ignorerai

Vous en avez tous vu de ces tweets blindés de #FFB @duschmol CC RT hein? Désolée, je ne suis pas encore capable de lire directement dans la matrice. Indice : si un tweet apparaît à plus de 80% en bleu, c’est mort.

(Désolée pour la pauvre victime, choisie au hasard.)

Les #FF à des comptes qui me plaisent vraiment je réserverai, avec présentation siouplait

Si dans une soirée quelqu’un vous tend une page d’annuaire, vous en faites quoi vous? Perso, au mieux, je cale la porte avec. Sur Twitter, c’est pareil. Si j’ai envie de faire connaître quelqu’un, alors je me fends d’une petite phrase.

Un twittos en action (là c’est le #FF ultime, il faut le dire) :

Les bots à mass follow/unfollow j’éviterai

Machin vous suit en mode guirlande de Noël c’est pénible.

RT plize paske cé mn aniverssère je snoberai

●¸.•*¨Ƹ̵̡Ӝ̵̨̄Ʒ¨*•.¸● Nannif kan mm, sa vien du ♥ !●¸.•*¨Ƹ̵̡Ӝ̵̨̄Ʒ¨*•.¸●

Fun, claire et informative ma timeline je conserverai

Sérieux, expliquez moi comment suivre 5000 comptes sans se retrouver face à un ramassis de grand n’importe quoi ? Ou alors… oh, en fait vous ne lisez rien !

Du contenu dans mes tweets j’intègrerai

Vous les écoutez longtemps vous les gens qui parlent pour ne rien dire?

Le personal branling avec parcimonie j’userai

Quand on met son égo en avant, autant que ça présente un intérêt pour un potentiel auditoire.

Les personal branleurs égotrippés au dernier degré je zapperai

En fait, ce que t’as mangé au ptit dej’ et le nombre de RT que t’as eu, je m’en fous. Fun, clair et informatif on a dit.


À bien y regarder, cela ressemble à une déclaration d’amour pour les gens que je followe. Oui, toi qui voit le ptit bouton “abonné” dans ton interface Twitter en vérifiant mon profil, sache-le, tu me plais.

Toi qui ne le voit pas, et bien, c’est évidemment dû au fait que je ne te connais pas encore ! (oups?)

Entre vrai échange avec une communauté et manipulation éhontée de son cyber-prochain, perso mon cœur ne balance pas. Mais ça a des conséquences. À moins d’être très en vue dans la vraie vie, les masses ne se rueront pas pour boire vos paroles. Est-ce si grave?

(Eh, au fait, j’ai un secret à vous révéler. Le fait que vos tweets s’affichent et le fait qu’ils sont lus sont 2 choses très différentes. Vous voyez votre empire de followers ? Foutez-vous bien un truc en tête :  ils sont aussi attentifs à votre personne que ce que vous l’êtes envers eux.)

Avis aux wannabe influenceurs qui cherchent un guide pour accumuler les followers sur Twitter, spa dur : faites strictement l’inverse et surtout, surtout, oubliez moi.

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.

Image à la une : Tel Aviv street art, Yaffa Phillips, Whistling in the Dark, licence CC-BY-SA 2.0, disponible sur Flickr.

Enregistrer

Enregistrer

Enregistrer

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.

L’été de tous les concombres

Le soleil est tombé sur nos pauvres épidermes assoiffés de lumière sans crier gare. Joie, bonheur, extase… et coup de soleil. Quel est le rapport avec le concombre? Nous y viendrons.

Mais tout d’abord, qu’est ce qu’un coup de soleil?

Lorsque notre peau reçoit une quantité de lumière excessive par rapport à ce qu’elle peut supporter, cela provoque des dégâts, c’est la brûlure. Mais réjouissons nous, la nature est bien faite. Le corps possède des processus lui permettant de se réparer, dont la certes désagréable mais très efficace réaction inflammatoire.

Il est possible de donner un coup de pouce à cette merveilleuse mécanique tout en la rendant moins douloureuse. Et c’est là qu’intervient le concombre.

Concombres
Concombres. Crédit photo : Muu-karhu, Creative Commons Attribution-Share Alike 3.0 Unported, disponible sous wikimedia common.

Il possède des vertus apaisantes et hydratantes très développées, qu’il est possible de mettre à profit en cas de petit dérapage solaire incontrôlé. Je l’utilise sous la forme d’un masque maison, qui ne nécessite ni équipement particulier ni ingrédient exotique :

  • 3 cuillerées à soupe de concombre pelé
  • 2 cuillerées à soupe de fromage blanc
  • 1 cuillerée à café de miel
  • 3 cuillerées à soupe d’huile

Mixez jusqu’à obtention d’un mélange homogène.

Appliquez sur le coup de soleil du bout des doigts après avoir lavé la peau et laissez sécher. Il est possible d’appliquer le mélange plusieurs fois.

Éliminez le surplus avec un gant imbibé d’eau.

N.B : cette recette est destinée aux coups de soleil ne présentant aucun caractère de gravité et doit être réservée aux peaux intactes (pas de cloque ou autre blessure).

Le choix de l’huile… ah vaste sujet. Une huile alimentaire toute bête fait parfaitement l’affaire. Personnellement je n’aime pas trop l’olive, trop visqueuse à mon goût, et qui a tendance à ne pas se laisser oublier facilement. Mais un bon vieux colza des familles convient très bien.

Vous l’aurez noté, tout se mange. Le mélange se conserve donc de la même façon qu’un plat contenant les mêmes ingrédients : au frais, dans un récipient hermétique, de 24 à 48h. Pensez à bien mélanger avant de réutiliser!

♫♪Enfin l’été♪♫

Photo à la une : Soleil. Crédit : Viviane, copyleft, en partage sous wikimedia common

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.