bandolier-template/client/components/OGPreview.svelte

<script>
  import config from "$/client/config.js";

  export let og = {
    "title": "", // title of the article
    "description": "", // description for inside preview
    "image": "", // image to display, 5mb/1200/627 max
    "url": config.og_base_host, // URL to article
    "type": "website", // not mentioned on linked in but needed
  }

  // taken from https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/markup
  // also refer to https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/player-card
  export let twitter = {
    "card": "summary", // must be summary or player
    "creator": config.twitter_user, // @username of content creator
    "description": og.description, // max 200 chars
    "image": "", // max 5mb image url 1:1 ratio
    "image:alt": "", // max 420 chars image alt
    "site": config.twitter_user, // @username of site
    "title": og.title, // max 70 chars title
    "player": "", // https url of player iframe
    "player:width": "", // width iframe in pixels
    "player:height": "", // height iframe in pixels
    "player:stream": "", // URL to raw video/audio stream
  }

  export let language = "en";

  export let json_ld = {
    "@context": "http://schema.org",
    "@type": "WebSite",
    "name": og.title,
    "url": og.url,
    "sameAs": [`https://twitter.com/${twitter.site}`],
  }
</script>

<svelte:head>
  <meta name="description" content={ og.description }>
  <!-- JSON-LD spec -->
  <script type="application/ld+json">
    { JSON.stringify(json_ld) }
  </script>

  <!--OG Spec for LinkedIn/Facebook/Others -->
  {#each Object.keys(og) as key}
    <meta property="og:{ key }" content="{ og[key] }" />
  {/each}

  <!--Twitter Spec for ... Twitter -->
  {#each Object.keys(twitter) as key}
    <meta name="twitter:{key}" content={ twitter[key] }/>
  {/each}

  <link rel="alternate" hreflang={ language } href={ og.url } />
  <link rel="canonical" href={ og.url }/>
</svelte:head>