From 2f3999dabf37fb4d70c673ea568d179fafa3dcf0 Mon Sep 17 00:00:00 2001 From: Claude Date: Sat, 16 Aug 2025 15:03:10 +0530 Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A7=20Fix=20social=20media=20link=20pr?= =?UTF-8?q?eview=20image=20display?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit **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 --- core/middleware.py | 11 +++++++++- core/urls.py | 1 + core/views.py | 5 +++++ templates/base.html | 9 +++++---- templates/test_og.html | 46 ++++++++++++++++++++++++++++++++++++++++++ 5 files changed, 67 insertions(+), 5 deletions(-) create mode 100644 templates/test_og.html diff --git a/core/middleware.py b/core/middleware.py index 075aea7..bdcd7c6 100644 --- a/core/middleware.py +++ b/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' diff --git a/core/urls.py b/core/urls.py index 3859cfd..179075a 100644 --- a/core/urls.py +++ b/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('/', views.external_page_view, name='external_page'), diff --git a/core/views.py b/core/views.py index 6de1006..5bc0aca 100644 --- a/core/views.py +++ b/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': { diff --git a/templates/base.html b/templates/base.html index 618d7fc..4196fc7 100644 --- a/templates/base.html +++ b/templates/base.html @@ -17,17 +17,18 @@ - - - + + + + - + diff --git a/templates/test_og.html b/templates/test_og.html new file mode 100644 index 0000000..3f94881 --- /dev/null +++ b/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 %} +
+

Social Media Preview Test

+ +
+

Open Graph Meta Tags Debug

+

OG Image URL: https://www.quantumtaskai.com{% static 'img/og-image.png' %}

+

Current Page URL: https://www.quantumtaskai.com{{ request.get_full_path }}

+

Static URL: {% static 'img/og-image.png' %}

+
+ +
+

Preview Image

+ OG Image Preview +
+ +
+

Testing Instructions

+
    +
  1. Copy this page URL: https://www.quantumtaskai.com/test-og/
    2. +
  2. Paste it in WhatsApp, Discord, Twitter, or LinkedIn
    3. +
  3. Check if the image preview appears
    4. +
  4. Use Facebook Sharing Debugger: https://developers.facebook.com/tools/debug/
    5. +
  5. Use Twitter Card Validator: https://cards-dev.twitter.com/validator
    6. +
+
+ +
+

Troubleshooting

+
    +
  • Social platforms cache previews - may take time to update
    • +
  • Image must be publicly accessible (no authentication required)
    • +
  • Image should be at least 600x315px for optimal display
    • +
  • URL must be publicly accessible (not localhost)
    • +
+
+
+{% endblock %} \ No newline at end of file