OpenGraph et métadonnées Twitter Card
Ajoutez des balises meta og: et twitter: pour enrichir les aperçus de liens sur les réseaux sociaux.
OpenGraph et métadonnées Twitter Card est une leçon Sveltejs Academy gratuite sur CoddyKit. Ceci est la leçon 2 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Sveltejs Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Sveltejs Academy comprend 4 leçons au total.
Pourquoi utiliser les balises OG
Les métadonnées Open Graph offrent aux plateformes sociales (Facebook, LinkedIn, Slack) des aperçus enrichis lors du partage de liens.
Balises OG obligatoires
og:title, og:description, og:image et og:url sont les plus importantes.
<svelte:head>
<meta property="og:title" content={title} />
<meta property="og:description" content={description} />
<meta property="og:image" content={imageUrl} />
<meta property="og:url" content={url} />
</svelte:head>Taille des images
1200x630 est la taille d’image OG recommandée pour un affichage optimal sur les différentes plateformes.
Cartes Twitter
Twitter respecte les balises OG, mais possède également ses propres métadonnées twitter: pour offrir davantage de contrôle.
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content={title} />Types de cartes
Twitter prend en charge les cartes summary, summary_large_image, app et player.
Valider
Utilisez le Sharing Debugger de Facebook et le Card Validator de Twitter pour prévisualiser vos balises.
URL absolues
Les URL des images OG doivent être absolues ; les chemins relatifs échouent.
Personnalisation par page
Définissez des balises OG propres à chaque article, produit ou profil pour obtenir des aperçus riches en contexte.
Éviter les valeurs par défaut en double
Fournissez des valeurs par défaut pour tout le site dans la mise en page racine, puis remplacez-les page par page.
Mise en cache
Les plateformes sociales mettent les données OG en cache. Utilisez leurs outils de débogage pour les actualiser.
Impact réel
Les aperçus enrichis augmentent considérablement les taux de clics lors des partages sur les réseaux sociaux.
Vérification rapide
Pourquoi les URL des images OG doivent-elles être absolues ?
Récapitulatif
Ajoutez les métadonnées OG et Twitter dans <svelte:head>, avec des URL d’images absolues, pour obtenir des aperçus enrichis sur les réseaux sociaux.
Questions Fréquemment Posées
La leçon « OpenGraph et métadonnées Twitter Card » est-elle gratuite ?
Oui — le texte complet de « OpenGraph et métadonnées Twitter Card » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Sveltejs Academy, passe à CoddyKit PRO. Le cours Sveltejs Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « OpenGraph et métadonnées Twitter Card » ?
Ajoutez des balises meta og: et twitter: pour enrichir les aperçus de liens sur les réseaux sociaux. Tu pratiques Sveltejs Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Sveltejs Academy ?
Aucune expérience préalable n'est requise. Sveltejs Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 2 sur 4.
Combien de temps prend la leçon « OpenGraph et métadonnées Twitter Card » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Sveltejs Academy ?
Oui. Chaque leçon Sveltejs Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- svelte:head pour les balises meta dynamiques
- OpenGraph et métadonnées Twitter Card
- Données structurées JSON-LD dans SvelteKit
- URL canoniques et génération de sitemap