🔧 Fix social media link preview image display

**Fixed Open Graph Image Issues:**
- Updated static asset handling in security middleware
- Removed CSP restrictions for /static/ paths to allow social media scrapers
- Added proper cache headers for static assets (1 year cache)
- Fixed og:image dimensions to match actual image (1800x600)
- Added og:image:alt attribute for accessibility
- Added cache-busting version parameter (?v=2) to force preview refresh

**Added Debug Test Page:**
- Created /test-og/ endpoint for testing social media previews
- Displays actual meta tag URLs and image preview
- Includes testing instructions and troubleshooting tips

**Root Cause:** CSP and security headers were blocking social media crawlers from accessing the og-image.png file

**Testing:** Visit /test-og/ and use Facebook/Twitter debugging tools to verify image previews work

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

core/middleware.py

@@ -132,8 +132,17 @@ class SecurityHeadersMiddleware:
             # Deny framing for all other pages
             response['X-Frame-Options'] = 'DENY'
         
+        # Special handling for static assets (og-image, etc.)
+        if request.path.startswith('/static/'):
+            # Allow social media scrapers to access og-image and other static assets
+            response['X-Frame-Options'] = 'SAMEORIGIN'
+            response['Cache-Control'] = 'public, max-age=31536000'  # 1 year cache
+            # Remove CSP for static assets to ensure accessibility
+            if 'Content-Security-Policy' in response:
+                del response['Content-Security-Policy']
+        
         # Security for critical pages
-        if request.path.startswith('/admin/') or request.path.startswith('/wallet/'):
+        elif request.path.startswith('/admin/') or request.path.startswith('/wallet/'):
             response['X-Frame-Options'] = 'DENY'
             response['Cache-Control'] = 'no-store, no-cache, must-revalidate, max-age=0'
             response['Pragma'] = 'no-cache'

core/urls.py

@@ -9,6 +9,7 @@ urlpatterns = [
     path('pricing/', views.pricing_view, name='pricing'),
     path('contact/', views.contact_form_view, name='contact_form'),
     path('health/', views.health_check_view, name='health_check'),
+    path('test-og/', views.test_og_view, name='test_og'),
     
     # External service wrapper pages
     path('<str:page_name>/', views.external_page_view, name='external_page'),

core/views.py

@@ -284,6 +284,11 @@ def health_check_view(request):
     return JsonResponse(health_data, status=200)
 
 
+def test_og_view(request):
+    """Test page for debugging social media Open Graph previews."""
+    return render(request, 'test_og.html')
+
+
 # Simple external service wrapper configurations
 EXTERNAL_PAGES = {
     'event': {

templates/base.html

@@ -17,17 +17,18 @@
     <meta property="og:title" content="{% block og_title %}Quantum Tasks AI - AI Platform{% endblock %}">
     <meta property="og:description" content="{% block og_description %}Advanced AI agent marketplace for automation, analysis, and productivity. Access powerful AI tools for business and personal use.{% endblock %}">
     <meta property="og:url" content="{% block og_url %}https://www.quantumtaskai.com{{ request.get_full_path }}{% endblock %}">
-    <meta property="og:image" content="{% block og_image %}https://www.quantumtaskai.com{% static 'img/og-image.png' %}{% endblock %}">
-    <meta property="og:image:width" content="1200">
-    <meta property="og:image:height" content="630">
+    <meta property="og:image" content="{% block og_image %}https://www.quantumtaskai.com{% static 'img/og-image.png' %}?v=2{% endblock %}">
+    <meta property="og:image:width" content="1800">
+    <meta property="og:image:height" content="600">
     <meta property="og:image:type" content="image/png">
+    <meta property="og:image:alt" content="Quantum Tasks AI - Advanced AI Platform">
     
     <!-- Twitter Card Meta Tags -->
     <meta name="twitter:card" content="summary_large_image">
     <meta name="twitter:site" content="@quantumtaskai">
     <meta name="twitter:title" content="{% block twitter_title %}Quantum Tasks AI - AI Platform{% endblock %}">
     <meta name="twitter:description" content="{% block twitter_description %}Advanced AI agent marketplace for automation, analysis, and productivity. Access powerful AI tools for business and personal use.{% endblock %}">
-    <meta name="twitter:image" content="{% block twitter_image %}https://www.quantumtaskai.com{% static 'img/og-image.png' %}{% endblock %}">
+    <meta name="twitter:image" content="{% block twitter_image %}https://www.quantumtaskai.com{% static 'img/og-image.png' %}?v=2{% endblock %}">
     
     <!-- Unified Font Loading - Single Source of Truth -->
     <link rel="preconnect" href="https://fonts.googleapis.com">

templates/test_og.html

@@ -0,0 +1,46 @@
+{% extends 'base.html' %}
+{% load static %}
+
+{% block title %}Social Media Test - Quantum Tasks AI{% endblock %}
+
+{% block og_title %}Social Media Preview Test - Quantum Tasks AI{% endblock %}
+{% block og_description %}Testing social media link preview with branded image. This should show the Quantum Tasks AI logo and branding.{% endblock %}
+
+{% block content %}
+<div style="padding: 40px; max-width: 800px; margin: 0 auto;">
+    <h1>Social Media Preview Test</h1>
+    
+    <div style="background: #f5f5f5; padding: 20px; border-radius: 8px; margin: 20px 0;">
+        <h2>Open Graph Meta Tags Debug</h2>
+        <p><strong>OG Image URL:</strong> https://www.quantumtaskai.com{% static 'img/og-image.png' %}</p>
+        <p><strong>Current Page URL:</strong> https://www.quantumtaskai.com{{ request.get_full_path }}</p>
+        <p><strong>Static URL:</strong> {% static 'img/og-image.png' %}</p>
+    </div>
+    
+    <div style="margin: 20px 0;">
+        <h3>Preview Image</h3>
+        <img src="{% static 'img/og-image.png' %}" alt="OG Image Preview" style="max-width: 100%; border: 1px solid #ddd;">
+    </div>
+    
+    <div style="background: #e7f3ff; padding: 20px; border-radius: 8px; margin: 20px 0;">
+        <h3>Testing Instructions</h3>
+        <ol>
+            <li>Copy this page URL: <code>https://www.quantumtaskai.com/test-og/</code></li>
+            <li>Paste it in WhatsApp, Discord, Twitter, or LinkedIn</li>
+            <li>Check if the image preview appears</li>
+            <li>Use Facebook Sharing Debugger: <a href="https://developers.facebook.com/tools/debug/" target="_blank">https://developers.facebook.com/tools/debug/</a></li>
+            <li>Use Twitter Card Validator: <a href="https://cards-dev.twitter.com/validator" target="_blank">https://cards-dev.twitter.com/validator</a></li>
+        </ol>
+    </div>
+    
+    <div style="background: #fff3cd; padding: 20px; border-radius: 8px; margin: 20px 0;">
+        <h3>Troubleshooting</h3>
+        <ul>
+            <li>Social platforms cache previews - may take time to update</li>
+            <li>Image must be publicly accessible (no authentication required)</li>
+            <li>Image should be at least 600x315px for optimal display</li>
+            <li>URL must be publicly accessible (not localhost)</li>
+        </ul>
+    </div>
+</div>
+{% endblock %}