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

[Vipulkushwaha]

Describe the bug

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.

Reproduction

(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)

Logs

No response

System Info

System:
    OS: macOS 13.2.1
    CPU: (8) arm64 Apple M1
    Memory: 160.86 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.16.0 - /Volumes/Samsung_PSSD_T7_Media/usr/local/bin/node
    Yarn: 1.22.19 - /Volumes/Samsung_PSSD_T7_Media/usr/local/bin/yarn
    npm: 9.6.7 - /Volumes/Samsung_PSSD_T7_Media/usr/local/bin/npm
  Browsers:
    Brave Browser: 104.1.42.95
    Chrome: 114.0.5735.133
    Safari: 16.3
  npmPackages:
    @sveltejs/adapter-auto: ^2.0.0 => 2.0.1 
    @sveltejs/adapter-node: ^1.2.4 => 1.2.4 
    @sveltejs/adapter-static: ^2.0.2 => 2.0.2 
    @sveltejs/kit: ^1.5.0 => 1.15.9 
    svelte: ^3.54.0 => 3.58.0 
    vite: ^4.3.0 => 4.3.9

Severity

serious, but I can work around it

Additional Information

No response

[gtm-nayan]

Please provide a proper reproduction for the issue as instructed by the issue template:

A link to a repository, or a fork of https://node.new/sveltekit, that reproduces the issue. Reproductions must be short, self-contained and correct and must not contain files or code that aren't relevant to the issue — please do NOT just paste a link to your project. Explaining how to reproduce is generally not enough. It pushes the burden of creating a reproduction project onto a small set of volunteer maintainers and isn't scalable. If no reproduction is provided, the issue will be closed.

[Vipulkushwaha]

This is a general behaviour that I observed. This does not need a specific reproduction. If you create a project and add Facebook meta tags to other routes (eg. /blog/article-title) using <svelte:head>.

For example,

<svelte:head>

    <meta property="og:title" content={data.article.title} />
    <meta property="og:type" content="website" />
    <meta property="og:image" content="{PUBLIC_API_URL}{data.article.banner}" />
    <meta property="og:url" content="https://mywebsite.com/blog/{data.article.slug}" />

    <title>{data.article.title} | {data.article.author_name} | MyWebsite</title>
    <meta
        name="description"
        content={data.article.content
            .replaceAll(/(<([^>]+)>)/gi, '')
            .replace(/&ndash;/g, '')
            .slice(0, 200)}
    />
</svelte:head>

As you can see, I'm getting the page data from an API here.

The meta tags on the other pages do not work. (The page does not load in time, I guess). I have also included cURL output to demonstrate the same.

I have also tried keeping the data (og:title, og:image etc.) hardcoded just to narrow down the issue. I'm also rendering the page on server using page.server.js as follows:

// 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();
    // console.log(article);
    return { article };
}

However, it did not work that way too.

There may be an underlying issue that's preventing the expected behaviour.

PS: I have tried stripping all the css and moving the FB tags above the others in <head> as per suggestions.

[david-plugge]

It does need a proper reproduction. It's not always easy to get what exact problem an issue is about and it's just way easier and quicker to clone a repo than setting up a project yourself. Most maintainers can't afford to spend that much time for every issue. So do yourself a favour and create a reproduction, most times you even notice a mistake when replicating the issue on a smaller scale.

[SiNONiMiTY]

Cannot reproduce this issue, are you sure that the %sveltekit.head% notation is in your src/app.html

Went ahead and copypasta'd your meta tags and dropped it onto my project and tested it on a non-root route.

Browser

[Vipulkushwaha]

Fixed the issue, finally

Thank you @gtm-nayan @david-plugge for your response and guidance. Special thanks to @SiNONiMiTY for taking the effort to include my snippet in your code for troubleshooting.

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!

[dummdidumm]

Glad it's solved! Closing this issue then 👍