Studio d’aperçu SERP et social

Affiche Google SERP (troncature au pixel près desktop/mobile), carte X et OpenGraph avec diagnostics SEO pré-lancement

Saisissez les métadonnées de votre page et l’outil rend trois cibles réelles :

  1. Carte SERP Google — troncature du titre sur desktop (~600px) et mobile (~920px) calculée d’après les largeurs réelles en pixels d’Arial (string-pixel-width), pas seulement le nombre de caractères.
  2. Carte X (Twitter) — dispositions summary et summarylargeimage.
  3. Carte OpenGraph — style LinkedIn/Facebook avec le ratio og:image recommandé 1.91:1.

L’outil lance aussi une diagnostics SEO pré-lancement : titre trop court/long, troncature par appareil, longueur de description, caractères non échappés, validité de l’URL canonique, underscores vs tirets, og:image HTTPS/valide, longueur de og:description, og:site_name, twitter:card manquant — plus des indices quand le titre suggère des données structurées FAQ / HowTo / Product.

Mode d’emploi :

  • Remplissez ce que vous avez ; laissez le reste vide pour voir ce qui manque.
  • Choisissez l’appareil : desktop, mobile ou les deux.
  • Utilisez le tableau de diagnostics comme checklist de lancement.

Exemples de résultats

1 Exemples

Aperçu d’une page d’avis en SERP et cartes sociales

Troncature de titre au pixel près desktop/mobile, cartes X et OpenGraph, diagnostics.

SERP desktop/mobile + Twitter + OpenGraph previews with diagnostics.
Voir paramètres d'entrée
{ "title": "Best Running Shoes 2026 — Tested & Reviewed | RunLab", "description": "We tested 40 running shoes for comfort, durability, and speed. See our top picks for road, trail, and racing in 2026.", "url": "https://runlab.example.com/best-running-shoes-2026", "ogImage": "https://runlab.example.com/og/shoes-1200x630.jpg", "ogDescription": "The 2026 running shoe guide, lab-tested for every type of runner.", "siteName": "RunLab", "twitterCard": "summary_large_image", "device": "both" }

Points clés

Catégorie
Développement et Web
Types d’entrée
text, textarea, select
Type de sortie
html
Couverture des échantillons
4
API disponible
Yes

Vue d’ensemble

Le Studio d’aperçu SERP et social vous permet de visualiser instantanément l'affichage de vos pages web sur Google (desktop et mobile), X (Twitter) et les réseaux utilisant OpenGraph comme LinkedIn ou Facebook. Grâce à un calcul précis de la troncature au pixel près et à un système de diagnostic SEO pré-lancement, vous pouvez optimiser vos balises meta, valider vos images de partage et corriger les erreurs structurelles avant la mise en ligne.

Quand l’utiliser

  • •Avant de publier un nouvel article ou une page produit pour s'assurer que le titre ne sera pas tronqué dans les résultats de recherche Google.
  • •Lors de la configuration des balises OpenGraph et X Card pour vérifier le rendu visuel des images et des descriptions sur les réseaux sociaux.
  • •Pendant un audit SEO pour identifier rapidement les métadonnées manquantes, les URL mal formatées ou les opportunités de données structurées.

Comment ça marche

  • •Saisissez le titre de votre page, la méta description, l'URL canonique et l'URL de votre image OpenGraph dans les champs correspondants.
  • •Choisissez le type de carte Twitter (résumé ou grande image) et sélectionnez l'appareil cible pour l'aperçu Google (desktop, mobile ou les deux).
  • •Analysez instantanément les rendus visuels générés et consultez le tableau de diagnostics SEO pour corriger les alertes de longueur ou de formatage.

Cas d’usage

Optimisation du taux de clic (CTR) en ajustant la longueur des titres au pixel près pour éviter les points de suspension dans la SERP.
Validation du cadrage et de la conformité HTTPS des images de partage social (og:image) avant le partage sur LinkedIn ou Facebook.
Audit rapide des balises meta d'une page pour détecter les caractères non échappés ou l'utilisation incorrecte d'underscores dans l'URL canonique.

Exemples

1. Optimisation d'un article de blog sur le running

Rédacteur SEO
Contexte
Un rédacteur prépare un guide comparatif sur les chaussures de course pour 2026 et souhaite maximiser son CTR sur Google et X.
Problème
Le titre de l'article risque d'être coupé sur mobile et l'image sociale ne s'affiche pas correctement.
Comment l’utiliser
Saisir le titre 'Best Running Shoes 2026 — Tested & Reviewed | RunLab', ajouter la méta description, l'URL canonique et l'URL de l'image OpenGraph, puis sélectionner 'both' pour l'appareil.
Configuration d’exemple
{
  "title": "Best Running Shoes 2026 — Tested & Reviewed | RunLab",
  "description": "We tested 40 running shoes for comfort, durability, and speed. See our top picks for road, trail, and racing in 2026.",
  "url": "https://runlab.example.com/best-running-shoes-2026",
  "ogImage": "https://runlab.example.com/og/shoes-1200x630.jpg",
  "twitterCard": "summary_large_image",
  "device": "both"
}
Résultat
L'aperçu montre que le titre s'affiche entièrement sur desktop et mobile. Le diagnostic confirme que l'image OpenGraph est bien en HTTPS et que la carte X s'affiche au format large.

2. Validation des métadonnées d'une page produit e-commerce

Responsable E-commerce
Contexte
Une boutique en ligne lance une nouvelle page produit et veut s'assurer que le partage sur Facebook et LinkedIn est visuellement parfait.
Problème
Absence de validation des balises OpenGraph et risque de mauvaise troncature de la description sociale.
Comment l’utiliser
Renseigner le titre du produit, l'URL de la page, le nom du site et l'image og:image dans le formulaire, puis analyser les alertes de diagnostic.
Configuration d’exemple
{
  "title": "Chaussures de Trail Imperméables - Modèle XT | RunLab",
  "description": "Découvrez notre nouveau modèle de trail imperméable conçu pour les terrains difficiles.",
  "url": "https://runlab.example.com/products/trail-xt",
  "ogImage": "https://runlab.example.com/og/trail-xt.jpg",
  "siteName": "RunLab",
  "device": "desktop"
}
Résultat
L'outil génère l'aperçu de la carte OpenGraph au ratio 1.91:1 et signale dans les diagnostics si la balise twitter:card est manquante pour X.

Tester avec des échantillons

image
Échantillons de Publications sur les Réseaux Sociaux
Échantillons de texte de réseaux sociaux pour tester l'extraction de hashtags et de mentions
title token social
sample
Protocole ActivityPub de Réseau Social Décentralisé
Exemples du protocole ActivityPub pour les réseaux sociaux fédérés, compatibilité Mastodon et médias sociaux décentralisés
title token social
sample
Exemples d'Étiquettes d'Image Docker
Collection de références d'images Docker avec différents registres, dépôts, tags et digest
matched family image
image
Exemples de Codes QR
Images de codes QR d'exemple pour tester les outils de lecture et de génération de codes QR
matched family image
image

Hubs associés

Outils de conversion de formats d image et d export anime
Comparez les convertisseurs d image pour JPG, PNG, GIF, AVIF, WebP, TIFF, ICO, base64 et les exports orientes animation dans un meme hub.
Outils de nettoyage, finition et preparation d images en lot
Regroupe dans un meme hub les outils de nettoyage d image, rognage, marge, encadrement, redimensionnement et compression par lot, filigrane et finition visuelle.
Outils de métadonnées image, EXIF et nettoyage de confidentialité
Comparez les visionneuses de métadonnées image, inspecteurs EXIF/IPTC/XMP, correcteurs d’orientation, éditeurs de métadonnées et outils de nettoyage de confidentialité.

FAQ

Comment l'outil calcule-t-il la troncature du titre Google ?

Il utilise les largeurs réelles en pixels de la police Arial (~600px sur desktop et ~920px sur mobile) pour simuler le comportement exact du moteur de recherche.

Quels réseaux sociaux sont couverts par l'aperçu OpenGraph ?

L'aperçu OpenGraph simule le rendu sur les plateformes comme Facebook et LinkedIn en respectant le ratio d'image recommandé de 1.91:1.

Qu'est-ce que le diagnostic SEO pré-lancement ?

C'est une checklist automatique qui vérifie la longueur des balises, la validité HTTPS de l'image, le format de l'URL et la présence des balises sociales requises.

Puis-je tester des pages qui ne sont pas encore en ligne ?

Oui, il vous suffit de saisir manuellement les métadonnées prévues dans les champs du formulaire pour simuler leur affichage.

L'outil détecte-t-il les opportunités de données structurées ?

Oui, si votre titre suggère des formats spécifiques comme FAQ, HowTo ou Product, le diagnostic vous affichera des suggestions d'optimisation.

Documentation de l'API

Point de terminaison de la requête

POST /fr/api/tools/serp-social-preview-studio

Paramètres de la requête

Nom du paramètre Type Requis Description
title text Oui -
description textarea Non -
url text Oui -
ogImage text Non -
ogDescription textarea Non -
siteName text Non -
twitterCard select Non -
device select Non -

Format de réponse

{
  "result": "
Processed HTML content
",
  "error": "Error message (optional)",
  "message": "Notification message (optional)",
  "metadata": {
    "key": "value"
  }
}
HTML: HTML

Documentation de MCP

Ajoutez cet outil à votre configuration de serveur MCP: 

{
  "mcpServers": {
    "elysiatools-serp-social-preview-studio": {
      "name": "serp-social-preview-studio",
      "description": "Affiche Google SERP (troncature au pixel près desktop/mobile), carte X et OpenGraph avec diagnostics SEO pré-lancement",
      "baseUrl": "https://elysiatools.com/mcp/sse?toolId=serp-social-preview-studio",
      "command": "",
      "args": [],
      "env": {},
      "isActive": true,
      "type": "sse"
    }
  }
}

Vous pouvez chaîner plusieurs outils, par ex.: `https://elysiatools.com/mcp/sse?toolId=png-to-webp,jpg-to-webp,gif-to-webp`, max 20 outils.

Si vous rencontrez des problèmes, veuillez nous contacter à [email protected]