Générer une Twitter Card complète sans extension, en plus d’Open Graph

Un article WordPress partagé sur Twitter affiche parfois une vignette minuscule et tronquée, même quand les balises Open Graph sont correctement en place. La raison : Twitter lit en priorité son propre jeu de balises meta, préfixées twitter:, avant de retomber sur Open Graph en cas d’absence. Sans ces balises spécifiques, l’aperçu reste basique et peu engageant.

Voici comment ajouter ces balises manuellement, sans installer une extension SEO complète, pour un site qui n’a besoin que de ce point précis. La méthode s’appuie uniquement sur le hook wp_head, déjà utilisé pour d’autres métadonnées du thème.

Étape 1 : comprendre les deux types de Twitter Card

Twitter propose principalement deux formats de carte : summary, avec une vignette carrée à gauche du texte, et summary_large_image, avec une image pleine largeur au-dessus du texte. Pour un blog d’articles, le second format est presque toujours préférable car il donne davantage de visibilité à l’image mise en avant.

Étape 2 : identifier les quatre balises minimales

• twitter:card : le format choisi, summary ou summary_large_image
• twitter:title : le titre affiché dans l’aperçu, distinct si besoin du titre SEO
• twitter:description : une description courte, idéalement sous 200 caractères
• twitter:image : l’URL absolue de l’image, au minimum 300 pixels de large pour le format large

Étape 3 : accrocher la fonction au bon endroit

La fonction suivante, ajoutée dans functions.php ou dans un plugin de site maison, génère ces balises uniquement sur les articles singuliers :

add_action( 'wp_head', function() {
    if ( ! is_singular( 'post' ) ) {
        return;
    }

    $titre = get_the_title();
    $description = get_the_excerpt() ? get_the_excerpt() : wp_trim_words( get_the_content(), 30 );
    $image_id = get_post_thumbnail_id();
    $image_url = $image_id ? wp_get_attachment_image_url( $image_id, 'large' ) : '';

    if ( ! $image_url ) {
        return;
    }

    printf(
        '<meta name="twitter:card" content="summary_large_image">' . "\n" .
        '<meta name="twitter:title" content="%s">' . "\n" .
        '<meta name="twitter:description" content="%s">' . "\n" .
        '<meta name="twitter:image" content="%s">' . "\n",
        esc_attr( $titre ),
        esc_attr( $description ),
        esc_url( $image_url )
    );
}, 5 );

Étape 4 : vérifier le rendu avant publication

L’outil Card Validator de Twitter permet de coller l’URL d’un article et de voir immédiatement l’aperçu généré, avant même de publier le partage réel. C’est l’étape la plus utile pour repérer un titre tronqué ou une image absente, sans attendre un premier partage manqué.

Étape adaptée aux pages sans image mise en avant

Certaines pages, comme une page de contact ou une page à propos, n’ont pas d’image mise en avant définie. Dans ce cas, la fonction retourne sans générer de balise, ce qui laisse Twitter afficher un aperçu minimal sans vignette. Il est possible de prévoir une image de repli générique, hébergée dans le thème, pour éviter cet aperçu dégradé sur les pages qui en ont le plus besoin, comme la page d’accueil :

$image_url = $image_id
    ? wp_get_attachment_image_url( $image_id, 'large' )
    : get_theme_file_uri( 'images/apercu-par-defaut.jpg' );

Étape 5 : éviter la duplication avec Open Graph

Si le thème ou un module maison génère déjà des balises Open Graph (og:title, og:description, og:image), il n’est pas nécessaire de dupliquer ces valeurs dans les balises Twitter si elles sont identiques : Twitter accepte de retomber sur Open Graph pour les champs non renseignés explicitement en twitter:. Ne définir que twitter:card seul, en s’appuyant sur Open Graph pour le reste, est une option valable pour limiter la duplication de code.

Notre pratique sur les projets sans extension SEO : ne définir que ce qui diffère réellement d’Open Graph, jamais tout dupliquer par prudence.

En résumé

Quatre balises suffisent à transformer un aperçu Twitter minimal en une vignette pleine largeur bien plus engageante, sans justifier l’installation d’une extension SEO complète pour ce seul besoin. La fonction proposée ici tient dans une vingtaine de lignes, se limite aux articles singuliers, et peut être adaptée facilement aux pages ou aux types de contenu personnalisés selon les besoins du site.