Quantcast
Channel: Active questions tagged svelte - Stack Overflow
Viewing all articles
Browse latest Browse all 1541

Open Graph content not rendering correctly on Meta platforms, but works on Twitter

$
0
0

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?


Viewing all articles
Browse latest Browse all 1541

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>