Seo.svelte

<script lang="ts">
  import { page } from "$app/stores";
  
  export let title: string = "";
  export let type: string = "";
  export let image: string = "";
  export let url: string = $page.url.pathname;
  export let description: string = "";
  export let siteName: string = "";
  export let twitter: string = "";

  function getUrl() {
    return url.startsWith($page.url.origin) ? url : `${$page.url.origin}${url}`;
  }
</script>

<svelte:head>
  <title>{title}</title>
  <meta name="title" content={title} />
  <meta name="description" content={description} />
  <meta property="og:type" content={type} />
  <meta property="og:url" content={getUrl()} />
  <meta property="og:title" content={title} />
  <meta property="og:description" content={description} />
  <meta property="og:image" content={image} />
  <meta property="og:site_name" content={siteName} />
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:url" content={getUrl()} />
  <meta name="twitter:title" content={title} />
  <meta name="twitter:description" content={description} />
  <meta name="twitter:image" content={image} />
  <meta name="twitter:site" content={twitter} />
  <meta name="twitter:creator" content={twitter} />
</svelte:head>