bandolier-template/rendered/pages/test_og_card.svelte

<script>
  import Layout from "$/rendered/Layout.svelte";
  import OGPreview from "$/client/components/OGPreview.svelte";
  import { og_base_host } from "$/client/config.js";

  let og = {
    "title": "LJSTHW OG Card Test", // title of the article
    "description": "A simple test of the OG style of sharing cards.", // description for inside preview
    "image": `${ og_base_host }/images/zed.png`, // image to display, 5mb/1200/627 max
    "url": `${ og_base_host }/test_og_card.html`, // URL to article
    "type": "website", // not mentioned on linked in but needed
  }

  let twitter = {
    "card": "summary", // must be summary, summary_large_image, app, player
    "creator": "@lzsthw", // @username of content creator
    "description": og.description, // max 200 chars
    "image": og.image,
    "image:alt": "A drawing of Zed by Zed.", // max 420 chars image alt
    "site": "@lzsthw", // @username of site
    "title": og.title,
  }
</script>

<style>
  card {
    width: 600px;
  }

  card top {
    background-color: var(--yellow);
    text-align: center;
  }

</style>

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

<Layout centered={ true }>
  <card>
    <top>
    <!-- this is how you assign a set of properties to a component using the {...} syntax -->
      <img src="/images/zed.png" />
    </top>
    <middle>
      <h4>OG Twitter Test</h4>
      <p>If you visit <a href="https://cards-dev.twitter.com/validator">the Twitter validator tool</a> and enter an internet accessible link to this demo it will show the above image and a description.
      </p>
    </middle>
  </card>
</Layout>