bandolier-template/client/components/SEOTricks.svelte

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

  const og_url = new URL(config.og_base_host);

  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
    "tag": "",
    "tags": [],
  }

  // 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
  }

  // have to do this here because reasons
  twitter.domain = og_url.hostname;

  export let language = "en";

  export let schema_context = "http://schema.org";
  export let schema_type = "WebSite";
  export let schema_data = {
    "name": og.title,
    "url": og.url,
    "sameAs": [`https://twitter.com/${twitter.site}`],
  }
</script>

<svelte:head>
  <title>{ og.title }</title>
  <meta name="description" content={ og.description }>
  <!--OG Spec for LinkedIn/Facebook/Others -->
  {#each Object.keys(og) as key}
    {#if key === "tags" && og.tags.length > 0}
      {#each og.tags as tag}
        <meta property="article:tag" content={tag} />
      {/each}
    {:else if og[key] !== "" && og[key] !== undefined}
      <meta property="og:{ key }" content="{ og[key] }" />
    {/if}
  {/each}

  {#if og.type === "article" && og.published_time}
    <meta property="article:published_time" content={og.published_time} />
  {/if}

  {#if og.type === "article" && og.modified_time}
    <meta property="article:modified_time" content={og.modified_time} />
  {/if}

  <!--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>

<!-- SCHEMA.org spec -->
<div style="display: none" itemscope itemtype="{schema_context}/{schema_type}">
  {#each Object.keys(schema_data) as key}
    <meta itemprop={ key } content={ schema_data[key] }>
  {/each}
</div>