Bien bloguer: l'art de faire des liens [fr]

[en] Some guidelines and advice for making links. Blogging is more than just shoving text in WordPress!

Pour bloguer, il ne suffit pas d’écrire des articles à la suite les uns des autres. Il faut apprendre à écrire en 2D — écrire en hypertexte. Bien maîtriser l’art du lien est indispensable pour celui ou celle qui veut bloguer un tant soit peu sérieusement.

Editeur visuel

Je donne ici les indications pour WordPress, que je vous conseille vivement d’adopter comme outil de blog.

  1. Si nécessaire, aller chercher l’URL (=adresse web) de la page web de destination et la copier.
  2. Dans le texte de son article, sélectionner les mots sur lesquels on veut mettre ce lien — ceux qu’on veut rendre cliquables.
  3. Cliquer sur le bouton représentant un maillon de chaîne dans la barre d’outils.
  4. Coller dans le pop-up qui apparaît l’adresse du lien précédemment copié, et appuyer sur entrée.

WordPress: faire un lien

Editeur HTML

Si on écrit en HTML directement, on sait en principe ce qu’on fait. Il peut arriver néanmoins qu’on doive aller farfouiller dans le code pour réparer des accidents. Dans ce cas, c’est utile de comprendre un peu ce qu’on voit. Un lien comme “Climb to the Stars“, ça ressemble à:

<a href="http://climbtothestars.org" title="Le blog de Stephanie.">Climb to the Stars</a>

Les parties en gras sont les bouts à ne pas toucher. Ce qui n’est pas en gras peut être modifié à volonté (destination du lien, texte pour quand on survole le lien, texte cliquable).

Etre efficace

Quand on écrit article après article, et qu’on veut les enrichir de liens joyeusement, et qu’on ne veut pas que ça prenne des plombes, il faut absolument abandonner sa souris et utiliser le clavier. De façon générale, moins on utilise la souris, plus on est rapide.

Voici donc comment ajouter un lien sous WordPress avec le clavier (sous OSX). Pour apprendre, n’hésitez pas à exercer cette séquence 10-20 fois pour bien l’intégrer.

  1. Seule manipulation à la souris autorisée (mais on peut aussi faire ça au clavier!): sélectionner les mots sur lesquels on veut mettre le lien 😉
  2. ⌘T — ouvre un nouveau tab de navigateur
  3. Ouvrir la page vers laquelle on veut que notre lien pointe: taper l’URL, les mots-clés pour chercher dans Google… Ne pas oublier d’utiliser les flèches pour naviguer dans les suggestions de complétion et la touche entrée pour valider. Pas besoin de souris!
  4. ⌘L — sélectionne l’URL dans la barre de navigation
  5. ⌘C — copie l’URL
  6. ⌘W — ferme le tab qu’on avait ouvert pour charger l’URL de destination, et nous ramène donc sur notre page WordPress avec les mots sélectionnés
  7. ⌥⇧A — ouvre la petite boîte de dialogue pour insertion du lien
  8. ⌘V — colle l’URL de destination. Pas besoin d’appuyer sur quoi que ce soit pour effacer le “http://” déjà dans le champ, il est sélectionné et sera écrasé quand on colle
  9. ⏎ [entrée] — pour valider tout ça.

Ça peut sembler long et compliqué écrit comme ça avec tous les détails, mais quand on a mémorisé la séquence et qu’elle est bien entraînée, ça prend quelques secondes (et on remarque par exemple que les étapes 5-6-7 sont quasi instantanées: on garde la touche ⌘ enfoncée et on appuie sur L, C, W à la suite). Exercez-vous, cela en vaut la peine: vous vous en féliciterez bientôt!

Faire les choses proprement

On rentre un peu dans les détails. Ils sont importants même si tout le monde n’est pas capable de les identifier, parce que comme les finitions d’un meuble ou la typographie d’un document imprimée, ils influent sur la perception globale qu’on aura de votre blog ou de vos articles.

  • Choix du lien de destination: vérifiez que celui-ci est pertinent par rapport à votre texte.
  • Quand on fait un lien vers un article, attention de bien prendre l’adresse de l’article (en cliquant sur le titre) et non simplement l’adresse du blog ou de la page d’accueil du site.
  • Après avoir publié votre article (ou avant, si vous prévisualisez), cliquez sur vos liens pour vérifier s’ils mènent là où vous le désirez. Surtout si vous débutez 😉
  • Nettoyez l’URL du lien de destination (suivant comment vous y êtes arrivés, il peut contenir des indications de source, comme ?utm_source=fb&utm_medium=fb... etc.). Enlevez des morceaux, appuyez sur entrée, regardez si vous arrivez toujours sur la bonne page.
  • Choix des mots sur lesquels on met le lien: d’une part, le lien met en évidence les mots sur lesquels il est (c’est l’occasion de les faire ressortir pour le lecteur); d’autre part, ces mots vont compter pour l’indexation du site de destination (et possiblement du vôtre) par les moteurs de recherche. Des fois, il vaut la peine de remanier sa phrase pour avoir une jolie suite de mots sur laquelle mettre son lien.
  • Espaces et signes de ponctuation: ne jamais les inclure dans le lien sauf si le lien porte sur toute la phrase. Attention au mode “sélection automatique des mots” qui sélectionne toujours l’espace après le dernier mot. Ça fait chenit, les espaces qui traînent à la fin des liens!
  • Si on met un lien sur une expression ou un nom, éviter de remettre le lien à chaque fois qu’on cite ce nom ou cette expression.
  • Ne cochez jamais la case “ouvrir le lien dans une nouvelle fenêtre” — target="_blank" c’est très bien pour les applications web comme Twitter et Facebook, mais vraiment pas top pour un blog ou un site web.
  • Eviter d’utiliser les URLs raccourcies (bitly et autres). Une URL raccourcie a toujours une espérance de vie plus courte que l’URL originale. Réserver les URLs raccourcies à Twitter, là où le nombre de caractères compte.
  • Trouver le bon équilibre entre pas assez de liens et trop de liens…

Bloguez bien! Avec des liens!

Similar Posts:

A Plugin to Compensate for Flickr Broken Embed Suckage? [en]

[fr] Quand on met à jour une photo dans Flickr, Flickr change le nom du fichier. Idée de plugin WordPress pour faire la chasse aux liens cassés.

A few days ago I started noticing this kind of thing in my posts:

Missing photos due to Flickr suckage

The explanation? I’ve used my week of holiday-at-home to fool around quite a bit in Lightroom. Lightroom publishes my photos directly to Flickr. When I change a published photos, Lightroom updates it. But Flickr changes the file name when you republish a photo. And that breaks embeds.

(And yeah, Lightroom replaces the whole photo even if you’ve just edited metadata.)

To make things worse, my browser cache shows me all my photos, even the missing ones. So I don’t see which ones are missing.

Idea! A plugin that would crawl through all the embedded Flickr images in a blog, and make sure that all the photos display correctly. Produce a list of the posts and photos that need updating. Or even better, do it automatically (even if the link to the displayed photo is broken, the link to the photo page still works, and it should be trivial to get the updated embed code and replace it in the post.)

Anybody?

Similar Posts:

Links in New Windows: Websites vs. Applications [en]

[fr] En 2011, c'est toujours pas bien de forcer les liens à ouvrir dans une nouvelle fenêtre. Sauf, on peut l'admettre, quand votre site est en fait une application web.

I was surprised recently to realize that in 2011, it wasn’t obvious to everybody that forcing links to open in a new window (with target="_blank") was not a good idea.

Actually, there are quite a few high-profile sites which force links to open in new windows, and I realized I actually don’t mind it that much: Twitter is one. I like that when I click on a link in Twitter, it opens in a new tab. I’ve learned that Twitter does this, and I now rely on it.

So, maybe links in new windows aren’t always a bad thing?

Here’s what I think: if your “site” is in fact an application, then it doesn’t matter much. People will learn to use the interface of your web application, and if links open in new windows, they will discover that and (hopefully) remember it. However, if your site is a real site, meaning it contains stuff that people are going to read, and that stuff might contain links to other stuff people might want to read or see, then it remains a Bad Thing.

Why is it a Bad Thing to force links to open in a new window (in your blog, for example)? Here’s the reasoning behind this.

  • Normal behavior is that links open in the same window.
  • When you force a link to open in a new window, you’re breaking that expectation — and there is no way to know, by looking at the link, that it’s going to spawn a new window.
  • Opening new windows is a user decision, not a website design decision. Windows are part of the browser, not the site.
  • A link can easily be opened in a new tab or window by holding down a modifier key before clicking on it (Cmd/Ctrl for example).
  • A link which is set to be opened in a new window cannot be opened in the same window if that’s what the reader would prefer.
  • Opening links in new windows may confuse the user (who might not notice the new window) and breaks the back button (to go back, you have to close the current window instead of hitting the back button — adding a different way to “go back”… more confusion).

Summary:

  • if your site is actually a web application, where links open is part of the application design, and forcing links to open in a new window can make sense in certain situations;
  • if your site is a “proper website” or a blog, don’t force links to open in a new window — where they open belongs to the way your reader chooses to use his browser, and not to the website design.

Similar Posts:

Google Alerts Trick to Monitor Website Health [fr]

[en] Un petit truc pour être alertée immédiatement si mon site recommence à servir à Google des pages truffées de mots-clés pharmaceutiques: une Alerte Google qui cherche ces mots-clés uniquement sur mon site. Fûté, non?

As you can guess, I’m now a little paranoid about getting hacked and having my blog pages stuffed with pharma keywords for the benefit of search engines. I’m keeping a close eye on my site now, but logging into Google Webmaster Central each day to “Fetch as Googlebot” gets old quickly.

So I had a bright idea I’m pretty proud of and want to share with you.

I simply set up a Google Alert for spammy pharma keywords on my site, like this:

site:climbtothestars.org keyword1 OR keyword2 OR keyword3

Given I don’t blog about those meds (or any pharma-related stuff, actually), any alert that shows up will be a sign that Googlebot has been served spammy content from my site, which should not happen as it is now supposed to be clean. And if it does, I will know about it immediately (you can easily set alert frequency for your alert in Google Alerts).

Similar Posts:

On Being Hacked [en]

[fr] Hackée, et voilà, moi qui savais justement pas quoi faire de mon beau dimanche après-midi ensoleillé...

I’m currently battling with a hacked WordPress installation. You won’t see anything if you view source, but Google unfortunately sees a whole lot of spam right at the top of each of my pages.

Result of being hacked on CTTS

Here’s some information in the hope somebody may have a bright idea to help me root out the hack.

  • I’m running 3.0.3 and would like to find the source of the problem before upgrading to 3.04 (bad idea?)
  • I’ve tried disabling all plugins, and the problem is still there when I do that.
  • I’m using the vanilla default Twenty-Ten theme
  • I’ve looked in the theme header (header.php) for anything obvious, and also in wp-content, wp-plugins, etc. for anything that looked out of place to my eyes
  • I’ve run greps for base64 (anything here look suspicious?), spammy keywords, and other things I could think of
  • It does not seem to be this pharma hack (have failed at finding any signs of it following the instructions there — wp_option keys, backdoor files…)
  • I have searched my database for spammy keywords (also backwards) and haven’t found any aside in spam comments caught in Akismet

I will update this post as I find out more. Thanks for your suggestions.

Update: at least a partial solution… running find . -iname *.php -print0 |xargs -0 grep base64 allowed us to identify a problem in l10n.php, which was promptly replaced by a new version (evil version available on request). One of my pages as viewed by Googlebot now looks like this. So, the site is cleaner, but are there any backdoors left?

Google Webmaster Central is definitely a place to visit regularly — I would have spotted this way sooner if I had, rather than wondering what was wrong with my robots.txt file when I stopped being able to “direct Google” my posts. View more scary screenshots.

Similar Posts:

Facebook Page Like Buttons: Quick and Dirty [en]

[fr] Comment ajouter à votre sidebar WordPress un bouton "J'aime" simple pour vos pages Facebook.

Sorting out my mess of Facebook pages and groups (part 2 coming soon!), I’ve spent way too much time struggling with the Facebook Like Box creator and a couple of WordPress plugins (Facebook Social Plugins and Facebook Like Box Widget). I just didn’t manage to get what I want, which is a simple, minimal list of my Facebook pages and a Like button next to them.

Here’s what I wanted (it’s in the CTTS footer now, so you can also scroll down and see it live… and like my pages!)

Quick and Dirty Facebook Page Like Buttons

I didn’t want a Like Box full of stuff. Just the page name, avatar, and the like button.

Here’s how I finally did it (it’s dirty, but it works — just stick the code in a text widget if you have a WordPress blog):

<iframe src="http://www.facebook.com/plugins/likebox.php?id=7812744463" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:220px;height:60px;" allowTransparency="true"></iframe>

Just replace the number after id= by your page’s ID (you can find it easily by going to your page, it’s the number following your page name in the URL.

If your page name is long, you might want to increase the height of your iframe to 80px or 100px (trial and error, you’ll find the right height).

There you go!

Oh, and I added like buttons to my posts, too, with the Facebook Like Button plugin. Dunno if it’s the best one out there or not, but it seems to work and I didn’t have to struggle too much setting it up.

Similar Posts: