I have a blog built with Django on the server and Sveltekit on the frontend.
When I share a link to a blog post to Twitter, the link preview renders properly with the blog's image and title.
But when I share on Facebook or Whatsapp, it does not render. It was working before and I didn't touch the codebase, but I just noticed it does not work on Facebook and Whatsapp anymore. So it seems to have just broken.
this is my app.html -
<!doctype html><html lang="en"><head><meta charset="utf-8" /><link rel="icon" href="%sveltekit.assets%/RxJourney.png" /><meta name="viewport" content="width=device-width, initial-scale=1" /><!-- Open Graph Image for Social Media --><meta property="og:image" content="%sveltekit.assets%/images/RxJourney.png" /><meta property="og:title" content="RxJourney" /><meta property="og:description" content="The Journey of an Intern Pharmacist" /><!-- rest of code below -->
In my blog's detail page I have this -
<script> import { beforeUpdate } from 'svelte'; import PostIcons from '../../components/PostIcons.svelte'; import { formatDate } from '../../utils'; import SupportSection from '../../components/SupportSection.svelte'; import ProfileCard from '../../components/ProfileCard.svelte'; import MorePosts from '../../components/MorePosts.svelte'; export let data; let { post } = data; beforeUpdate(() => { post = data.post; // Update post data when route changes });</script><svelte:head><title>{post ? `${data.title} | RxJourney` : 'RxJourney'}</title><!-- Meta description for SEO --><meta name="description" content={post ? post.content.slice(0, 150) : 'The Journey of an Intern Pharmacist'} /><!-- Open Graph meta tags for social media sharing --><meta property="og:title" content={post ? post.title : 'RxJourney'} /><meta property="og:description" content={post ? post.content.slice(0, 150) : 'The Journey of an Intern Pharmacist'} /><meta property="og:image" content={post ? post.image : '%sveltekit.assets%/images/RxJourney.png'} /><meta property="og:url" content={typeof window !== 'undefined'&& post ? window.location.href : ''} /><meta property="og:type" content="article" /><!-- Twitter Card meta tags for Twitter sharing --><meta name="twitter:card" content="summary_large_image" /><meta name="twitter:title" content={post ? post.title : 'RxJourney'} /><meta name="twitter:description" content={post ? post.content.slice(0, 150) : 'The Journey of an Intern Pharmacist'} /><meta name="twitter:image" content={post ? post.image : '%sveltekit.assets%/images/RxJourney.png'} /><meta name="twitter:url" content={typeof window !== 'undefined'&& post ? window.location.href : ''} /></svelte:head><!-- Other code below -->
this is my +page.js -
export async function load({ fetch, params }) { const { slug } = params; try { const response = await fetch(`https://mydomainserver/home/posts/${slug}/`, { method: 'GET', headers: {'Content-Type': 'application/json', }, credentials: 'include', }); if (!response.ok) { throw new Error('Failed to fetch post'); } const post = await response.json(); return { post }; } catch (error) { console.error('Error fetching post:', error); return { post: null }; } }
What exactly am I doing wrong?