Skip to content

Instantly share code, notes, and snippets.

@garraflavatra
Last active October 23, 2023 10:22
Show Gist options
  • Save garraflavatra/4f3f9a81f1e8f0cf2ccc4518f40e6b20 to your computer and use it in GitHub Desktop.
Save garraflavatra/4f3f9a81f1e8f0cf2ccc4518f40e6b20 to your computer and use it in GitHub Desktop.
Meta tags component for SvelteKit
<script>
import { page } from '$app/stores';
export let type = 'website'; // or article, or music.album etc. See https://ogp.me/#types
export let title = '';
export let description = '';
export let image = '/img/social/preview.jpg';
export let path = $page.url.pathname;
export let domain = 'https://www.mysite.com';
export let siteTitle = 'Romein';
const titleWithSuffix = (siteTitle === title) ? title : (title ? title + ' | ' : '') + siteTitle;
const fullURI = `${domain}${path}`;
</script>
<svelte:head>
<meta property="og:type" content={type} />
<meta property="og:url" content={fullURI} />
<meta property="twitter:url" content={fullURI} />
{#if titleWithSuffix}
<title>{titleWithSuffix}</title>
<meta name="title" content={titleWithSuffix} />
<meta property="og:title" content={titleWithSuffix} />
<meta property="twitter:title" content={titleWithSuffix} />
{/if}
{#if description}
<meta name="description" content={description} />
<meta property="og:description" content={description} />
<meta property="twitter:description" content={description} />
{/if}
{#if image}
<meta property="og:image" content={image} />
<meta property="twitter:card" content="summary_large_image" />
<meta property="twitter:image" content={image} />
{/if}
</svelte:head>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment