🔍 Résolution du problème de partage LinkedIn

🐛 Problème

Le partage LinkedIn ne montre pas l'image de l'article, alors que Facebook fonctionne correctement.

📋 Exigences LinkedIn pour Open Graph

LinkedIn est très strict sur les métadonnées Open Graph :

1️⃣ Taille de l'image

Minimum : 1200 x 627 pixels
Recommandé : 1200 x 630 pixels
Ratio : 1.91:1 (format paysage)
Poids : Maximum 5 MB
Format : JPG ou PNG

2️⃣ URL absolue requise

<!-- ❌ NE FONCTIONNE PAS -->
<meta property="og:image" content="/static/image.jpg">

<!-- ✅ FONCTIONNE -->
<meta property="og:image" content="https://www.duhaz.fr/static/image.jpg">

3️⃣ Balises obligatoires

<meta property="og:title" content="Titre de l'article">
<meta property="og:description" content="Description...">
<meta property="og:image" content="https://www.duhaz.fr/image.jpg">
<meta property="og:url" content="https://www.duhaz.fr/article">
<meta property="og:type" content="article">

4️⃣ Balises recommandées pour l'image

<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Description de l'image">
<meta property="og:image:type" content="image/jpeg">

🔍 Vérification de votre configuration actuelle

Étape 1 : Vérifier les métadonnées générées

Démarrez votre serveur :

cd /Users/duhaz/projets/blog-duhaz
./start.sh

Ouvrez un article dans votre navigateur
Faites clic droit → Afficher le code source
Recherchez les balises <meta property="og: et vérifiez :
- ✅ og:image contient une URL complète commençant par https://
- ✅ L'image fait au moins 1200x627 pixels
- ✅ Toutes les balises sont présentes

Étape 2 : Tester avec l'outil LinkedIn

LinkedIn fournit un outil de débogage : https://www.linkedin.com/post-inspector/

Collez l'URL de votre article
Cliquez sur "Inspect"
LinkedIn vous indiquera les problèmes détectés

🛠️ Solutions aux problèmes courants

Problème 1 : Image trop petite

Symptôme : LinkedIn affiche un texte mais pas d'image

Solution : Assurez-vous que vos images font au moins 1200x630 pixels

Dans votre admin Django, lors de l'ajout d'une image (b_description_img), utilisez des images qui respectent ces dimensions.

Problème 2 : URL relative au lieu d'absolue

Symptôme : L'image ne s'affiche nulle part

Vérification dans le code :

# Dans /blog/seo_helpers.py, ligne ~40
def get_image_url(self, image_field):
    if not image_field:
        return self.default_image
    
    # Vérifie si l'URL est déjà absolue
    if image_field.startswith(('http://', 'https://')):
        return image_field
    
    # Sinon, construire l'URL absolue
    if image_field.startswith('/'):
        return f"{self.site_url}{image_field}"
    else:
        return f"{self.site_url}/{image_field}"

✅ Votre code est correct, il transforme déjà les URLs relatives en absolues.

Problème 3 : Cache de LinkedIn

Symptôme : Vous avez corrigé mais LinkedIn montre toujours l'ancienne version

Solution : LinkedIn met en cache les métadonnées. Utilisez l'outil Post Inspector pour forcer la mise à jour :

Allez sur https://www.linkedin.com/post-inspector/
Entrez votre URL
Cliquez sur "Inspect"
LinkedIn rafraîchira les métadonnées

✅ Amélioration recommandée : Ajouter og:image:type

Actuellement, votre code ne spécifie pas le type MIME de l'image. Ajoutons-le :

Modification dans `/blog/seo_helpers.py`

Ligne ~85, dans la fonction get_blog_metadata(), ajoutez :

# Open Graph (Facebook)
'og': {
    'type': 'article',
    'title': article.b_titre,
    'description': description,
    'url': article_url,
    'image': image_url,
    'image_alt': image_alt,
    'image_width': '1200',
    'image_height': '630',
    'image_type': 'image/jpeg',  # ← AJOUTER CETTE LIGNE
    'site_name': self.site_name,
    'locale': 'fr_FR',
    # ... reste du code
},

Modification dans `/blog/templates/read.html`

Ligne ~27, ajoutez :

<meta property="og:image" content="{{ page.seo.og.image }}">
<meta property="og:image:alt" content="{{ page.seo.image_alt }}">
<meta property="og:image:width" content="{{ page.seo.og.image_width }}">
<meta property="og:image:height" content="{{ page.seo.og.image_height }}">
<meta property="og:image:type" content="{{ page.seo.og.image_type }}">  <!-- AJOUTER -->
<meta property="og:site_name" content="{{ page.seo.og.site_name }}">

🎯 Checklist de vérification

Avant de partager sur LinkedIn :

L'image fait au moins 1200x630 pixels
L'URL de l'image est absolue (commence par https://)
L'image est accessible publiquement (pas de login requis)
L'image pèse moins de 5 MB
Le format est JPG ou PNG
Toutes les balises og: sont présentes
Vous avez testé avec LinkedIn Post Inspector
Vous avez vidé le cache de LinkedIn si nécessaire

🔧 Script de diagnostic

Créez ce script pour tester vos métadonnées :

# test_og_meta.py
import os
import django

os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'duhaz_blog.settings')
django.setup()

from blog.models import Blog
from blog.seo_helpers import SEOMetadata
from django.test import RequestFactory

# Créer une fausse requête
factory = RequestFactory()
request = factory.get('/')

# Récupérer un article
article = Blog.objects.filter(b_publier=True).first()

if article:
    # Générer les métadonnées
    seo_helper = SEOMetadata(request, article)
    metadata = seo_helper.get_blog_metadata(article)
    
    print("=" * 60)
    print("MÉTADONNÉES OPEN GRAPH")
    print("=" * 60)
    print(f"Titre: {metadata['og']['title']}")
    print(f"Description: {metadata['og']['description']}")
    print(f"URL: {metadata['og']['url']}")
    print(f"Image: {metadata['og']['image']}")
    print(f"Dimensions: {metadata['og']['image_width']}x{metadata['og']['image_height']}")
    print("=" * 60)
    
    # Vérifications
    print("\nVÉRIFICATIONS:")
    
    # URL absolue
    if metadata['og']['image'].startswith('https://'):
        print("✅ Image URL est absolue")
    else:
        print("❌ Image URL doit être absolue (https://)")
    
    # Dimensions
    if int(metadata['og']['image_width']) >= 1200:
        print("✅ Largeur suffisante pour LinkedIn")
    else:
        print(f"❌ Largeur insuffisante: {metadata['og']['image_width']}px (minimum 1200px)")
    
    if int(metadata['og']['image_height']) >= 627:
        print("✅ Hauteur suffisante pour LinkedIn")
    else:
        print(f"❌ Hauteur insuffisante: {metadata['og']['image_height']}px (minimum 627px)")
else:
    print("Aucun article publié trouvé")

Exécutez-le :

cd /Users/duhaz/projets/blog-duhaz
source venv/bin/activate
python test_og_meta.py

🚀 Solution rapide

Si vous voulez corriger immédiatement :

Vérifiez vos images : Assurez-vous qu'elles font au moins 1200x630px
Testez sur LinkedIn Post Inspector : https://www.linkedin.com/post-inspector/
Si ça ne marche toujours pas, envoyez-moi :
- L'URL complète de l'article
- Une capture d'écran du code source HTML (les balises og:)
- Le résultat de LinkedIn Post Inspector

📚 Ressources

LinkedIn Post Inspector
Guide Open Graph LinkedIn
Open Graph Protocol
Facebook Sharing Debugger (pour comparaison)

Prochaine étape : Testez avec LinkedIn Post Inspector et dites-moi ce qu'il affiche ! 🎯

RESOLUTION_LINKEDIN.md 7.7 KB 履歴 Raw