blog-duhaz-v3/docs/OPEN_GRAPH_GUIDE.md

📱 Guide Open Graph - Partage sur Réseaux Sociaux

✅ Ce qui a été fait

Votre blog dispose maintenant d'un système Open Graph enrichi qui génère automatiquement :

🎯 Métadonnées pour chaque article

• Open Graph (Facebook, LinkedIn, WhatsApp)
• Twitter Cards (Twitter/X)
• Schema.org JSON-LD (SEO avancé)
• Meta descriptions optimisées
• Images avec dimensions correctes

🔄 Automatisation complète

Quand vous publiez un article, le système génère automatiquement :

• Titre optimisé pour le partage
• Description de 160 caractères max
• URL canonique
• Image de prévisualisation
• Catégories et mots-clés
• Date de publication
• Auteur

---

📐 Spécifications des Images

Dimensions recommandées Open Graph

Réseau Social	Dimensions optimales	Format	Taille max
Facebook	1200 x 630 px	JPG/PNG	8 MB
Twitter	1200 x 675 px	JPG/PNG/GIF	5 MB
LinkedIn	1200 x 627 px	JPG/PNG	5 MB
WhatsApp	300 x 300 px min	JPG/PNG	-

⚠️ Dimensions minimales

• Minimum absolu : 200 x 200 px
• Recommandé : 1200 x 630 px (ratio 1.91:1)
• Optimal : 1200 x 630 px pour tous les réseaux

📏 Zones de sécurité

• Gardez les éléments importants au centre
• Évitez le texte sur les bords (peut être rogné)
• Zone sûre : Centre de 1000 x 500 px

---

🎨 Comment créer une bonne image Open Graph

1. Outils en ligne gratuits

• Canva - Templates prêts à l'emploi
• Figma - Design professionnel
• Photopea - Alternative à Photoshop
• Remove.bg - Retirer les fonds

2. Template recommandé (1200 x 630 px)

┌─────────────────────────────────────┐
│                                     │
│        Titre de l'article          │
│                                     │
│     [Image ou illustration]         │
│                                     │
│          www.duhaz.fr              │
│                                     │
└─────────────────────────────────────┘

3. Bonnes pratiques

✅ À FAIRE :

• Utiliser des couleurs contrastées
• Texte lisible (min 60px de hauteur)
• Logo/marque visible mais discret
• Image haute résolution
• Ratio 1.91:1 (1200x630)

❌ À ÉVITER :

• Trop de texte (max 20% de l'image)
• Texte sur les bords
• Images pixelisées
• Fonds trop chargés
• Couleurs illisibles

---

🛠️ Configuration actuelle

Fichiers modifiés

1. blog/templates/read.html - Métadonnées Open Graph intégrées
2. blog/seo_helpers.py - Générateur de métadonnées amélioré
3. blog/views.py - Déjà configuré pour passer les métadonnées

Variables configurables

Dans blog/seo_helpers.py ligne 14-18 :

self.site_name = "Mr Duhaz"
self.site_url = "https://www.duhaz.fr"
self.default_image = f"{self.site_url}/static/logo-txt-Mrduhaz.png"
self.twitter_handle = "@mrduhaz"  # Changez par votre handle

---

🧪 Tester vos métadonnées Open Graph

Outils de validation en ligne

1. Facebook Sharing Debugger

   • URL : https://developers.facebook.com/tools/debug/
   • Testez et prévisualisez vos articles
   • Cliquez sur "Scrape Again" pour rafraîchir le cache

2. Twitter Card Validator

   • URL : https://cards-dev.twitter.com/validator
   • Prévisualisez le rendu sur Twitter
   • Nécessite un compte Twitter connecté

3. LinkedIn Post Inspector

   • URL : https://www.linkedin.com/post-inspector/
   • Testez le rendu LinkedIn
   • Effacez le cache si nécessaire

4. Open Graph Check

   • URL : https://opengraphcheck.com/
   • Test multi-plateforme
   • Aperçu pour tous les réseaux

Test manuel rapide

# Voir les métadonnées d'une page
curl -s "https://www.duhaz.fr/blog/mon-article/" | grep -E 'og:|twitter:'

---

📝 Comment ajouter une image à un article

Dans l'admin Django

1. Connectez-vous à l'admin : https://www.duhaz.fr/admin/
2. Allez dans Blog > Articles
3. Sélectionnez l'article à modifier
4. Dans le champ "Image de description" (b_description_img) :
   • Soit uploadez une image (recommandé : 1200x630px)
   • Soit collez une URL d'image externe

Formats supportés

• JPG - Meilleur pour photos (plus léger)
• PNG - Meilleur pour logos/illustrations (transparence)
• WebP - Format moderne (meilleure compression)

Si aucune image n'est définie

Le système utilise automatiquement l'image par défaut : /static/logo-txt-Mrduhaz.png

---

🚀 Résultat attendu

Quand quelqu'un partage votre article

Sur Facebook/LinkedIn/WhatsApp

┌─────────────────────────────────────┐
│  [IMAGE 1200x630]                   │
├─────────────────────────────────────┤
│  Titre de l'article                 │
│  Description courte (160 car max)   │
│  www.duhaz.fr                       │
└─────────────────────────────────────┘

Sur Twitter

┌─────────────────────────────────────┐
│  Titre de l'article                 │
│  Description courte                 │
│  [IMAGE 1200x675]                   │
│  🔗 www.duhaz.fr                    │
└─────────────────────────────────────┘

---

🔍 Métadonnées générées automatiquement

Pour chaque article, le système génère :

<!-- Open Graph -->
<meta property="og:type" content="article">
<meta property="og:title" content="Titre de l'article">
<meta property="og:description" content="Description...">
<meta property="og:url" content="https://www.duhaz.fr/blog/slug/">
<meta property="og:image" content="https://www.duhaz.fr/image.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:site_name" content="Mr Duhaz">
<meta property="article:published_time" content="2025-11-02T...">
<meta property="article:author" content="Mr Duhaz">

<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Titre">
<meta name="twitter:description" content="Description">
<meta name="twitter:image" content="https://...">
<meta name="twitter:site" content="@mrduhaz">

<!-- Schema.org -->
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BlogPosting",
  "headline": "Titre",
  "image": "https://...",
  "author": {...},
  "datePublished": "2025-11-02T..."
}
</script>

---

💡 Astuces et optimisations

1. Réutiliser des templates d'images

Créez un template Canva avec :

• Votre logo/marque
• Typographie cohérente
• Couleurs de votre charte graphique

2. Optimiser le poids des images

# Compresser une image avec ImageMagick
convert image.jpg -quality 85 -resize 1200x630 optimized.jpg

# Avec TinyPNG (en ligne)
# https://tinypng.com/

3. Nommer intelligemment vos images

✅ BIEN : article-django-tutoriel-2025.jpg
❌ MAL : IMG_2034.jpg

4. Vérifier avant publication

Avant de publier/partager :

1. ✅ Image de taille correcte (1200x630)
2. ✅ Titre accrocheur (max 60 caractères)
3. ✅ Description claire (max 160 caractères)
4. ✅ Tester avec Facebook Debugger
5. ✅ Tester avec Twitter Validator

---

🐛 Problèmes courants et solutions

L'image ne s'affiche pas lors du partage

Causes possibles :

1. Image pas en HTTPS
2. Image trop lourde (> 8 MB)
3. Dimensions incorrectes (< 200x200)
4. Cache des réseaux sociaux

Solutions :

# 1. Vérifier que l'URL est accessible
curl -I https://www.duhaz.fr/static/image.jpg

# 2. Vérifier les métadonnées
curl -s https://www.duhaz.fr/blog/article/ | grep og:image

# 3. Forcer le rafraîchissement du cache Facebook
# Allez sur : https://developers.facebook.com/tools/debug/
# Entrez votre URL et cliquez "Scrape Again"

L'image est coupée/mal cadrée

Solution :

• Respecter le ratio 1.91:1 (1200x630)
• Gardez les éléments importants au centre
• Évitez les textes sur les bords (15% de marge)

Description tronquée

Limites par plateforme :

• Facebook : 300 caractères (mais affiche ~110)
• Twitter : 200 caractères
• LinkedIn : 256 caractères

Recommandation :

• Gardez les 120 premiers caractères les plus importants
• Allez à l'essentiel dès le début

Cache persistant

Si vos modifications ne s'affichent pas :

1. Facebook : Debugger + "Scrape Again"
2. Twitter : Attendre 24h ou contacter le support
3. LinkedIn : Post Inspector + Clear Cache
4. WhatsApp : Partager en message privé d'abord

---

📊 Statistiques de partage

Suivre les partages (optionnel)

Pour suivre combien de fois vos articles sont partagés, ajoutez Google Analytics ou un tracker personnalisé.

Option 1 : Google Analytics Les clics sur vos boutons sociaux sont déjà trackables via les événements.

Option 2 : Tracker personnalisé Créez un modèle Django pour compter les partages :

# Dans blog/models.py
class ShareCounter(models.Model):
    article = models.ForeignKey(Blog, on_delete=models.CASCADE)
    platform = models.CharField(max_length=20)  # facebook, twitter, etc.
    count = models.IntegerField(default=0)
    
    class Meta:
        unique_together = ('article', 'platform')

---

✅ Checklist finale

Avant de partager votre article sur les réseaux sociaux :

• Image uploadée (1200x630 px)
• Titre < 60 caractères
• Description < 160 caractères
  
• URL testée sur Facebook Debugger
• URL testée sur Twitter Validator
• Prévisualisation correcte
• Aucune erreur 404 sur l'image
• Image chargée rapidement

---

🔗 Ressources utiles

Outils de création d'images

• Canva - Templates Open Graph
• Crello - Alternative à Canva
• Pablo by Buffer - Création rapide

Banques d'images gratuites

• Unsplash
• Pexels
• Pixabay

Documentation officielle

• Open Graph Protocol
• Twitter Cards
• Schema.org

Compression d'images

• TinyPNG
• Squoosh
• ImageOptim (Mac)

---

🎓 Exemples de bonnes pratiques

Exemple 1 : Article technique

Titre : "Comment créer une API REST avec Django"
Image : Code coloré + logo Django
Description : "Guide complet pour développer une API RESTful avec Django REST Framework. Tutoriel pas à pas avec exemples de code."

Exemple 2 : Article actualité

Titre : "Django 5.1 : Les nouveautés"
Image : Logo Django + "5.1" en grand
Description : "Découvrez toutes les nouvelles fonctionnalités de Django 5.1 LTS et comment migrer votre projet."

Exemple 3 : Article tutoriel

Titre : "10 astuces pour optimiser Django"
Image : Checklist visuelle + chronomètre
Description : "Améliorez les performances de votre application Django avec ces 10 techniques éprouvées par les pros."

---

📞 Support

Si vous rencontrez des problèmes :

1. Vérifiez d'abord avec les outils de validation
2. Consultez les logs Django (python manage.py runserver)
3. Vérifiez que votre site est accessible publiquement

---

✨ Votre blog est maintenant optimisé pour le partage social !

Chaque article bénéficie automatiquement :

• D'un bel aperçu sur Facebook, LinkedIn, WhatsApp
• D'une Twitter Card optimisée
• De métadonnées SEO complètes
• D'un markup Schema.org pour Google

🎉 Profitez-en pour partager vos meilleurs articles !