Doc Site SEO + Open Graph

[endigo9740]

As we prep for the v1 launch we need to revisit the following:

1. SEO / Metatags - ensure we're well optimized for search
2. Implement Open Graph data - consider using Vercel's Satori tool
3. Revisit our blog SEO/Open graph, as Ghost provides some of this turnkey.

@niktek I welcome your support on this one as well!

[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:

• SEO & Metatag Improvements #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!