Unable to get Facebook Open Graph meta tags to work in Sveltekit for routes other than home '/'

The Facebook meta tags work fine on the homepage and a preview is generated along with the og:image. However, when trying with individual blog article pages, the preview is not generated. https://developers.facebook.com/tools/debug/ is used for this testing.

When I try to navigate to routes such as /blog and /blog/title, the Facebook Open Graph Debugger does not see them. (actual page data omitted for simplicity)

The following is my +page.svelte:

<!--src/routes/blog/[slug]/+page.svelte-->
<script>
    import { PUBLIC_API_URL } from '$env/static/public';
    import moment from 'moment';

    /** @type {import('./$types').PageData} */
    export let data;
</script>

<svelte:head>
    <meta property="og:title" content="My Blog" />
    <meta property="og:type" content="website" />
    <meta property="og:image" content="<blog specific image>" />
    <meta property="og:url" content="<blog url>" />
    <meta property="og:description" content="<short description>" />

    <title>Blog | Article title</title>
    <meta name="description" content="<short description>" />
</svelte:head>

The following is my +page.server.js for reference:

// src/routes/blog/[slug]/+page.server.js

import { PUBLIC_API_URL } from '$env/static/public';

/** @type {import('./$types').PageServerLoad} */
export async function load({ fetch, params }) {
    const res = await fetch(`${PUBLIC_API_URL}/blog/${params.slug}`);
    const article = await res.json();
    return { article };
}

I have also tried locally with cURL -I https://myurl.example. The home / route returns:

HTTP/2 200
access-control-allow-origin: *
content-type: text/html
date: Fri, 16 Jun 2023 22:06:35 GMT
etag: "g9p070"
x-sveltekit-page: true
content-length: 132771

(all the page HTML is returned when running without -I option)

But the /privacy-policy, /blog and /blog/[slug] route returns:

HTTP/2 200
access-control-allow-origin: *
date: Fri, 16 Jun 2023 22:09:10 GMT

(no output is shown when running without -I option)

The Resolution

I found the solution by chance, while creating the reproduction for this issue.

I was using the handy Svelte for VS Code extension in my original project to create routes.

I was selecting all the files by default, even-though some of them I did not intend to use as follows:

The particular file that was creating the issue was the default +server.js created by the extension. Contents as follows:

// +server.js

/** @type {import('./$types').RequestHandler} */
export async function GET() {
    return new Response();
};

While creating the reproduction I only created the necessary files manually and did not encounter the issue there.

Hence, removing the unused files from my original project solved it for me.

The Facebook Sharing Debugger shows the expected output now.

I'm happy!