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 description

Optional props

website: string = '' // website URL
authorName: string = '' // Author Name
image: string = '' // Open Graph image
paymentPointer: string = '' // Web Monetisation Payment pointer

Use it

pnpm i -D svead

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