mirror of
https://github.com/thecyberlearn/quantum-ai-v3.git
synced 2026-08-18 08:52:58 +00:00
2f3999dabf
**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>
46 lines
2.3 KiB
HTML
46 lines
2.3 KiB
HTML
{% 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 %} |