w
Documentation Outils de base Open Graph Meta Generator

Référence API

Ce document fournit les détails techniques sur l'outil Open Graph Meta Generator et son fonctionnement sous-jacent.

Vue d'ensemble de l'outil

L'Open Graph Meta Generator est un outil côté client qui génère des balises meta HTML pour les protocoles Open Graph et Twitter Card. Il traite les données saisies par l'utilisateur et produit des balises meta HTML correctement formatées.

Paramètres d'entrée

Informations générales

ParamètreTypeObligatoireDescriptionExemple
pageTypestringOuiType de contenu"website", "article", "book"
titlestringNonTitre de la page"My Awesome Website"
descriptionstringNonDescription de la page"A great website for developers"
urlstringNonURL de la page"https://example.com/page"
siteNamestringNonNom du site"My Company"

Paramètres d'image

ParamètreTypeObligatoireDescriptionExemple
imageUrlstringNonURL de l'image"https://example.com/image.jpg"
imageAltstringNonTexte alternatif de l'image"Company logo"
imageWidthstringNonLargeur de l'image en pixels"1200"
imageHeightstringNonHauteur de l'image en pixels"630"

Paramètres Twitter

ParamètreTypeObligatoireDescriptionExemple
twitterCardTypestringOuiType de Twitter Card"summary_large_image"
twitterSitestringNonHandle Twitter du site"@example"
twitterCreatorstringNonHandle Twitter du créateur"@author"

Format de sortie

L'outil génère des balises meta HTML au format suivant :

Balises Open Graph

<!-- Open Graph Meta Tags -->
<meta property="og:type" content="website" />
<meta property="og:title" content="Page Title" />
<meta property="og:description" content="Page description" />
<meta property="og:url" content="https://example.com/page" />
<meta property="og:site_name" content="Site Name" />
<meta property="og:image" content="https://example.com/image.jpg" />
<meta property="og:image:alt" content="Image description" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />

Balises Twitter

<!-- Twitter Meta Tags -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@example" />
<meta name="twitter:creator" content="@author" />
<meta name="twitter:title" content="Page Title" />
<meta name="twitter:description" content="Page description" />
<meta name="twitter:image" content="https://example.com/image.jpg" />

Types de contenu

Types de pages pris en charge

TypeDescriptionCas d'usage
websitePages web généralesPage d'accueil, page à propos, contact
articleArticles de blog et d'actualitéArticles, actualités, tutoriels
bookPages de livres et e-booksFiches de livres, pages d'e-books
profileProfils personnels ou professionnelsProfils utilisateur, pages d'entreprise
musicMorceaux et albumsStreaming musical, pages d'album
videoContenus vidéoPages vidéo, catalogues de films

Types de Twitter Card

TypeDescriptionIdéal pour
summaryCarte basique avec vignetteArticles de blog, actualités
summary_large_imageCarte avec grande imageContenus visuels, produits
appPromotion d'application mobilePages d'app store
playerContenus vidéo/audioPages vidéo, podcasts

Traitement des données

Échappement HTML

Toutes les données saisies par l'utilisateur sont automatiquement échappées pour prévenir les attaques XSS :

function escapeHtml(text) {
  const div = document.createElement("div");
  div.textContent = text;
  return div.innerHTML;
}

Validation des URL

Les URL sont validées pour vérifier qu'elles sont correctement formatées :

function isValidUrl(string) {
  try {
    new URL(string);
    return true;
  } catch (_) {
    return false;
  }
}

Limites de longueur du contenu

L'outil applique les limites de longueur recommandées :

  • Titre : 60 caractères maximum
  • Description : 160 caractères maximum
  • URL : doit respecter un format d'URL valide

Compatibilité des navigateurs

BrowserVersionSupport
Chrome60+Prise en charge complète
Firefox55+Prise en charge complète
Safari12+Prise en charge complète
Edge79+Prise en charge complète

Fonctionnalités requises

  • Prise en charge d'ES6+
  • Prise en charge de l'API Clipboard
  • Prise en charge du Local Storage
  • Prise en charge de CSS Grid

Considérations de performance

Traitement côté client

  • Tout le traitement s'effectue dans le navigateur
  • Aucune requête serveur n'est nécessaire
  • Génération et aperçu instantanés
  • Empreinte mémoire minimale

Mise en cache

  • Les balises meta générées sont mises en cache dans le stockage du navigateur
  • L'historique est conservé localement
  • Aucune dépendance externe

Gestion des erreurs

Erreurs de validation des entrées

// Example error handling
if (!title.trim()) {
  showError("Title is required");
  return;
}

if (url && !isValidUrl(url)) {
  showError("Please enter a valid URL");
  return;
}

Erreurs de chargement d'image

// Handle image loading errors
function handleImageError(event) {
  const img = event.target;
  img.style.display = "none";
  showWarning("Image failed to load");
}

Exemples d'intégration

Intégration WordPress

// Add to functions.php
function add_open_graph_tags() {
    if (is_single()) {
        $title = get_the_title();
        $description = get_the_excerpt();
        $image = get_the_post_thumbnail_url();

        echo '<meta property="og:title" content="' . esc_attr($title) . '" />';
        echo '<meta property="og:description" content="' . esc_attr($description) . '" />';
        echo '<meta property="og:image" content="' . esc_url($image) . '" />';
    }
}
add_action('wp_head', 'add_open_graph_tags');

Intégration React

// React component example
function OpenGraphMeta({ title, description, image, url }) {
  return (
    <>
      <meta property="og:title" content={title} />
      <meta property="og:description" content={description} />
      <meta property="og:image" content={image} />
      <meta property="og:url" content={url} />
    </>
  );
}

Intégration Next.js

// Next.js Head component
import Head from "next/head";

function MyPage() {
  return (
    <Head>
      <meta property="og:title" content="My Page Title" />
      <meta property="og:description" content="My page description" />
      <meta property="og:image" content="https://example.com/image.jpg" />
    </Head>
  );
}

Tests et validation

Débogueurs de réseaux sociaux

Tests automatisés

// Example test for meta tag generation
describe("Open Graph Meta Generator", () => {
  test("generates correct meta tags", () => {
    const input = {
      pageType: "website",
      title: "Test Page",
      description: "Test description",
    };

    const output = generateMetaTags(input);

    expect(output).toContain('<meta property="og:type" content="website" />');
    expect(output).toContain('<meta property="og:title" content="Test Page" />');
  });
});

Dépannage

Problèmes courants

  1. Les images ne s'affichent pas: vérifiez le format de l'URL et son accessibilité
  2. Les balises ne fonctionnent pas: validez-les avec des débogueurs de réseaux sociaux
  3. Le contenu est tronqué: vérifiez les limites de caractères
  4. Problèmes de cache: utilisez les outils de débogage pour rafraîchir le cache

Mode debug

Activez le mode debug pour afficher des informations détaillées :

// Enable debug logging
localStorage.setItem("debug", "true");

Améliorations futures

Fonctionnalités prévues

  • Prise en charge des données structurées Schema.org
  • Prise en charge multi-langues
  • Capacités de génération en masse
  • Endpoint API pour la génération côté serveur
  • Optimisation avancée des images
  • Intégration Analytics

Contribuer

Pour contribuer à l'Open Graph Meta Generator :

  1. Forkez le dépôt
  2. Créez une branche de fonctionnalité
  3. Apportez vos modifications
  4. Ajoutez des tests
  5. Soumettez une Pull Request

Support

Pour obtenir une assistance technique ou poser une question :

  • Consultez la FAQ
  • Consultez les Examples
  • Contactez le support via le site principal
Cette page vous a-t-elle été utile ?