Les Résumés d’articles sur Twitter comment ça marche – Twitter Cards
Cette nouvelle fonctionnalité de Twitter permet de donner une plus value à vos tweets grâce au lien présent dans votre tweet. Cette mise en avant prend la simple forme du lien » voir le résumé« , permettant d’avoir un aperçu de la page en question avec titre, description et image dans le cas de la Summary Card
Il existe donc trois formats :
- La carte photo
- La carte vidéo
- La carte contenu
Je ne vais vous parler aujourd’hui que de cette dernière car en tant que blogueur ou administrateur de site, c’est la carte « passe partout » utilisée le plus souvent.
Mise en place technique de Twitter Cards
Méthode Classique
Sachez qu’avant d’entrer dans le monde merveilleux du résumé de votre contenu directement dans Twitter, vous devez passer par une « autorisation/validation » via un formulaire en ligne. Le mail de validation de Twitter peut prendre plusieurs jours (semaines?) à arriver.
Mais ne mettons pas la charrue avant les bœufs, ne vous précipitez pas sur le lien du formulaire ci-dessus car avant tout, il faut que vous fassiez quelques mises en place techniques (rien de très compliqué, je vous rassure).
Ce code est à mettre dans le header de votre page. Si je vous parle chinois, recherchez juste vos balises <head></head> et copiez moi ça quelque part là dedans !
<meta name="twitter:card" content="summary"> <meta name="twitter:site" content="@CompteDuSite"> <meta name="twitter:creator" content="@CompteRedacteur"> <meta name="twitter:url" content="Adresse web de l'article"> <meta name="twitter:title" content="Titre de l'article"> <meta name="twitter:description" content="Description de l'article tronquée dès qu'elle dépasse les 200 caractères"> <meta name="twitter:image" content="Image liée à l'article recadrée en 120*120">
- L’image est recadrée en 120px par 120px
- La description ne dépasse pas les 200 caractères
En pratique ça donne quoi? Simple, prenons l’exemple de l’article de mon premier screen sur Viewpont Resizer & le responsive Design. Le rendu sur twitter est présenté dans l’introduction de cet article, mais derrière ce rendu agréable, les balises meta correspondantes sont les suivantes :
<meta name="twitter:card" content="summary"> <meta name="twitter:site" content="@blogdelicart"> <meta name='twitter:image' content='http://www.delicart.fr/wp-content/uploads/2012/11/responsivedesign1-600x249.png</a>'> <meta name="twitter:description" content="<a>Avec la montée en flèche de la navigation web sur mobile, tout le monde rêve que son site ait un design responsive. Avoir un site web réactif sur un écran de la résolution d’un smartphone comme sur des écrans 30 pouces est le Graal de tout designer/développeur. Viewport resizer est un outil très simple. Lors de vos phases de développement, ou même tout simplement lors d’une ballade sur la toile, vous cliquez sur le bookmark, et hop, vous testez le … →"> <meta name="twitter:title" content="Responsive web design : un bookmark pour tester toutes les résolutions - Delicart"> <meta name="twitter:url" content="http://www.delicart.fr/2012/11/bookmarks-resize/">
Plugins wordpress
Deux petits plugins si vous êtes sous WordPress pour permettre la mise en place automatique de votre Twitter Card. De quoi éviter la mise en place de requêtes.
- WordPress SEO by Yoast (testé et approuvé !)
- Twitter Cards ( non testé)
Cependant, si vous voulez éviter d’installer un nouveau plugin à votre WordPress (le plugin de Yoast mérite vraiment d’être testé pour sa plus-value SEO !), sachez que @artesea a proposé un bout de code à implanter aussi dans le header pour cette mise en place dynamique.
EDIT: Choblad m’a récemment fait découvrir l’excellent JM Card. Il permet, entre autre, de gérer sur chaque article un auteur différent.
<?php
#twitter cards hack
if(is_single() || is_page()) {
$twitter_url = get_permalink();
$twitter_title = get_the_title();
$twitter_desc = get_the_excerpt();
$twitter_thumbs = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), full );
$twitter_thumb = $twitter_thumbs[0];
if(!$twitter_thumb) {
$twitter_thumb = 'http://www.gravatar.com/avatar/8eb9ee80d39f13cbbad56da88ef3a6ee?rating=PG&size=75';
}
$twitter_name = str_replace('@', '', get_the_author_meta('twitter'));
?>
<meta name="twitter:card" value="summary" />
<meta name="twitter:url" value="<?php echo $twitter_url; ?>" />
<meta name="twitter:title" value="<?php echo $twitter_title; ?>" />
<meta name="twitter:description" value="<?php echo $twitter_desc; ?>" />
<meta name="twitter:image" value="<?php echo $twitter_thumb; ?>" />
<meta name="twitter:site" value="@libdemvoice" />
<?
if($twitter_name) {
?>
<meta name="twitter:creator" value="@<?php echo $twitter_name; ?>" />
<?
}
}
?>
Comment demander sa Twitter Cards
En dehors de la consultation évidente de la doc Twitter Cards, je vous conseille surtout d’utiliser l’outil twitter pour tester la validité et le fonctionnement de votre code.