Welcome to Svead 🍺

The Svelte Head Component.

Svead is a dynamic component that enhances your SEO by allowing you to set head meta information for canonical, title, Twitter, Facebook, Open Graph tags and JSON-LD.

Visit GitHub to contribute to this project.

View source (Ctrl+u or ⌘+⌥+u on macOS) to see all the head goodness in action.

Yes, it’s <svelte:head> with props being passed to it!

Having implemented this in several projects with repetitive code, I decided to package it up for broader use.

Props

It takes the following props:

Required props

title: string; // Page title
description: string; // Page description
url: string; // Full URL of the current page

Optional props

website: string = ''; // Website URL
author_name: string = ''; // Author Name
open_graph_image: string = ''; // Open Graph image
payment_pointer: string = ''; // Web Monetisation Payment pointer

Use it

pnpm i -D svead

Import it into your Svelte pages and use it, the config for this page looks like this:

<script lang="ts">import { page } from "$app/stores";
import { Head } from "svead";
const seo_config = {
  title: "This is Svead a Svelte Head Component",
  description: "Svead, a component that allows you to set head meta information, canonical, title, Twitter and Facebook Open Graph tags.",
  author_name: "Scott Spence",
  open_graph_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",
  website: "https://svead.pages.dev",
  url: $page.url.toString()
};
</script>

<Head {seo_config} />

Output

<head>
	<link rel="canonical" href="https://svead.pages.dev/" />
	<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.pages.dev&footerTailwind=text-teal-600"
	/>
	<meta property="og:url" content="https://svead.pages.dev/" />
	<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.pages.dev&footerTailwind=text-teal-600"
	/>
	<meta name="twitter:card" content="summary_large_image" />
	<meta property="twitter:domain" content="https://svead.pages.dev" />
	<meta property="twitter:url" content="https://svead.pages.dev/" />
	<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.pages.dev&footerTailwind=text-teal-600"
	/>
	<title>This is Svead a Svelte Head Component</title>
</head>

Example Routes

Explore how Svead works with different content types:

Advanced Examples

Delve deeper into the capabilities of Svead with these advanced use cases:

Breadcrumbs

Learn how to implement breadcrumbs for enhanced navigation and SEO.

<script>
	// Example code for breadcrumbs
</script>

For more information and full documentation, visit the Svead GitHub repository.

Breadcrumbs Implementation

Breadcrumbs are a great way to enhance user navigation and SEO by providing a clear path back to previous pages. Here’s how you can implement breadcrumbs with Svead:

First, you’ll need to define your breadcrumb structure. This is typically an array of objects, each representing a step in the path.

const breadcrumbs = [
	{ name: 'Home', url: '/' },
	{ name: 'Articles', url: '/articles' },
	// The current page
	{ name: 'Current Article', url: '/articles/current-article' },
];

Next, incorporate the breadcrumb data into the Svead component within your Svelte page:

<script>
	import { Head } from 'svead';

	const title = 'Current Article - My Awesome Site';
	const description =
		'This is an article about something really interesting.';
	const url =
		'https://www.myawesomesite.com/articles/current-article';
	const image = 'https://www.myawesomesite.com/path/to/image.jpg';

	// Define breadcrumbs as shown above
	const breadcrumbs = [
		{ name: 'Home', url: '/' },
		{ name: 'Articles', url: '/articles' },
		{ name: 'Current Article', url: '/articles/current-article' },
	];
</script>

<Head {title} {description} {image} {url} {breadcrumbs} />

Finally, you’ll need to ensure that Svead is set up to handle the breadcrumbs prop and render the appropriate JSON-LD structured data. Here’s an example of what that might look like in your Svead component:

// Inside your Svead component
function generateBreadcrumbJSONLD(breadcrumbs) {
	const itemListElement = breadcrumbs.map((breadcrumb, index) => ({
		'@type': 'ListItem',
		position: index + 1,
		name: breadcrumb.name,
		item: breadcrumb.url,
	}));

	return {
		'@context': 'https://schema.org',
		'@type': 'BreadcrumbList',
		itemListElement: itemListElement,
	};
}

// Inside the <script> tag
export let breadcrumbs = [];

$: breadcrumbJSONLD = breadcrumbs.length
	? generateBreadcrumbJSONLD(breadcrumbs)
	: null;

Remember to include the generated JSON-LD data in the head of your document. This will provide search engines with the structured data they need to understand the breadcrumb trail for your page.

By following these steps, you should have a fully functional breadcrumb system integrated with your Svead component, enhancing both navigation and SEO for your site.