Welcome to Svead
The Svelte Head Component.
Svead, a component that allows you to set head meta information, canonical, title, Twitter and Facebook Open Graph tags.
Visit GitHub to contrubute to this project.
View source (Ctrl+u or ⌘+⌥+u on macOS) to see all the head goodness.
Yes. it’s <svelte:head> with props being passed to it!
I have several projects that use the same code so I decided to package it up for use in other projects.
Props
It takes the following props:
Required props
url: string; // Full URL of the current page
title: string; // page title
description: string; // page descriptionOptional props
website: string = ''; // website URL
authorName: string = ''; // Author Name
image: string = ''; // Open Graph image
paymentPointer: string = ''; // Web Monetisation Payment pointerUse it
pnpm i -D sveadImport it into your Svelte pages and use:
<script>
import { page } from '$app/stores';
import { Head } from 'svead';
let title = 'This is Svead a Svelte Head Component';
let image = `https://og.tailgraph.com/og?fontFamily=Roboto&title=This+is+Svead&titleTailwind=text-gray-800+font-bold+text-6xl&text=Set+Head+meta+tag+information&textTailwind=text-gray-700+text-2xl+mt-4&logoTailwind=h-8&bgTailwind=bg-white&footer=svead.vercel.app&footerTailwind=text-teal-600`;
let description =
'Svead, a component that allows you to set head meta information, canonical, title, Twitter and Facebook Open Graph tags.';
let url = $page.url.toString();
</script>
<Head {title} {description} {image} {url} />Output
<head>
<title>This is Svead a Svelte Head Component</title>
<link rel="canonical" href="https://svead.vercel.app/" />
<meta
name="title"
content="This is Svead a Svelte Head Component"
/>
<meta
name="description"
content="Svead, a component that allows you to set head meta information, canonical, title, Twitter and Facebook Open Graph tags."
/>
<meta
itemprop="name"
content="This is Svead a Svelte Head Component"
/>
<meta
itemprop="description"
content="Svead, a component that allows you to set head meta information, canonical, title, Twitter and Facebook Open Graph tags."
/>
<meta
itemprop="image"
content="https://og.tailgraph.com/og?fontFamily=Roboto&title=This+is+Svead&titleTailwind=text-gray-800+font-bold+text-6xl&text=Set+Head+meta+tag+information&textTailwind=text-gray-700+text-2xl+mt-4&logoTailwind=h-8&bgTailwind=bg-white&footer=svead.vercel.app&footerTailwind=text-teal-600"
/>
<meta property="og:url" content="https://svead.vercel.app/" />
<meta property="og:type" content="website" />
<meta
property="og:title"
content="This is Svead a Svelte Head Component"
/>
<meta
property="og:description"
content="Svead, a component that allows you to set head meta information, canonical, title, Twitter and Facebook Open Graph tags."
/>
<meta
property="og:image"
content="https://og.tailgraph.com/og?fontFamily=Roboto&title=This+is+Svead&titleTailwind=text-gray-800+font-bold+text-6xl&text=Set+Head+meta+tag+information&textTailwind=text-gray-700+text-2xl+mt-4&logoTailwind=h-8&bgTailwind=bg-white&footer=svead.vercel.app&footerTailwind=text-teal-600"
/>
<meta name="twitter:card" content="summary_large_image" />
<meta
property="twitter:domain"
content="https://svead.vercel.app/"
/>
<meta property="twitter:url" content="https://svead.vercel.app/" />
<meta
name="twitter:title"
content="This is Svead a Svelte Head Component"
/>
<meta
name="twitter:description"
content="Svead, a component that allows you to set head meta information, canonical, title, Twitter and Facebook Open Graph tags."
/>
<meta
name="twitter:image"
content="https://og.tailgraph.com/og?fontFamily=Roboto&title=This+is+Svead&titleTailwind=text-gray-800+font-bold+text-6xl&text=Set+Head+meta+tag+information&textTailwind=text-gray-700+text-2xl+mt-4&logoTailwind=h-8&bgTailwind=bg-white&footer=svead.vercel.app&footerTailwind=text-teal-600"
/>
</head>