bandolier-template/admin/bando/demos/OGPreview.svelte.md

This is mostly only a demo because Twitter doesn't actually render JavaScript client side so it won't see these meta tags. If you want this to work, put it on a page in rendered/pages/ and don't Hydrate it.

You can create a special page/link for Twitter, Facebook, and LinkedIn that will render a summary+image for the page. Uses its own preview-card feature docs while Facebook and LinkedIn use the OpenGraph specification. OpenGraph is much simpler, really only supporting things like links, images, etc. Twitter's is more capable since it allows you to link to images, embed videos, live streams, and link to apps in Apple and Google stores.

The component starts with a base set of attributes for OG and Twitter cards, which you can augment by simply updating the object used. All the component does is walk through the twiter or og keys and create the necessary <meta> tag for the head.

Svelte:Head Sort-of-Bug

One thing to keep in mind is if you place these <meta> tags directly in a page then they'll get duplicated on each page visit. This is because Svelte is updating the DOM for the page, but seems to not consider the <svelte:head> as idempotent as other elements in the DOM. The fix is to move all uses of <svelte:head> into a component so Svelte properly updates them on page changes.

The code for OGPreview.svelte does this, which means you do not put it into a <svelte:head>. Instead you do this:

<OGPreview og={ og } twitter={ twitter} />

Then OGPreview does everything for you. If you run into this bug in your own development use the client/components/HeaderOnce.svelte component like this:

<HeaderOnce>
<meta-tags-here>
</HeaderOnce>

Those tags will then technically be in a "component" so they'll update as you change pages rather than get duplicated for each page.