Open Graph Updates + Review Satori

[endigo9740]

Describe what feature you'd like. Pseudo-code, mockups, or screenshots of similar solutions are encouraged!

We need to revisit and update our Open Graph implementation in the docs site. The new Satori tool by Vercel might be useful for this process.

What type of pull request would this be?

Docs

Any links to similar examples or other references we should review?

https://github.com/vercel/satori

[endigo9740]

https://twitter.com/geoffrich_/status/1580954774434119680

[niktek]

Just doing some background research and came across this component for handling metadata in svelte: https://github.com/oekazuma/svelte-meta-tags

Seems to be recently updated too

[ak4zh]

Here's svelte equivalent of vercel-og using satori: https://github.com/etherCorps/sveltekit-og

[endigo9740]

FYI I've tagged myself and Nik since we will need to be involved with this, but I do welcome help from anyone wiling and able to implement the changes in the codebase. Thanks!

[endigo9740]

https://www.ogimage.gallery/

[endigo9740]

Reference:

• https://kit.svelte.dev/docs/seo#manual-setup-title-and-meta
• https://metatags.io/

[endigo9740]

A PR is now available and ready to test here:

• https://github.com/skeletonlabs/skeleton/pull/822

Preview:

• https://skeleton-docs-git-docs-seo-open-graph-skeleton-labs.vercel.app/
• https://skeleton-docs-git-docs-seo-open-graph-skeleton-labs.vercel.app/blog/support-skeleton-on-github-sponsors

Unfortunately it wasn't as trivial as I'd hoped. But here's what the "before" looked like with meta tag tools like: https://metatags.io/

Then after:

However I am getting one odd issue - when testing directly on Twitter, I get inconsistent results.

• For the homepage, the open graph data never appears. Though it's very clearly set.
• For article pages, it never works the first time, but when deleting and paste the URL again it appears

I'm going to chalk up that latter issue to Twitter bugs, but I'm not quite certain why the homepage isn't working

I suppose an important detail here is I've had to dramatically change where and how meta tags are rendered. Originally they were set in app.html which of course carries through the entire site. Then on a blog article page I'd use <svelte:head> to "overwrite" these. Turns out that does work - we end up with duplicate tags. So instead I've followed SvelteKit's advice here regarding $page.data: https://kit.svelte.dev/docs/seo#manual-setup

Now all meta data is set in a <svelte:head> element in the root layout. This appears to work in most regards - but I worry this may be the cause of our Twitter issue. If anyone has any ideas I'm all ears. Thanks!