A Svelte SEO Component for Sapper & SvelteKit

Be Seen with Svelte

I made a versatile component that can be used to set common meta tags in the head of pages in a Svelte app.

See the Source Code

You can set a default title, description, and image in the component itself. When using the component, it's recommended to always pass title and description as props to avoid duplicate titles and metadescriptions across your app. These props will set title & description meta tags, as well as associated Open Graph & Twitter tags.

This component also accepts Open Graph- & Twitter-specific props that will override the generic title and description values if passed.

The logic of the component assumes that the default value for image and alt are set for a global default sharing image. I recommend adding your default share image to the static folder in Sveltekit projects for easy access.

Here's an example of a very standard instance of the component, assuming that all of the default values have been changed to be relevant to the project:

    <SEO
	title="A Svelte SEO Component for Sapper & SvelteKit | Jesse Benjamin"
	description="This prop fills out description tags."
	slug="/blog/svelte-seo-component"
    />

If you really wanted to, you could have different titles, descriptions, and images for Search Engines, Facebook, and Twitter. I know it sounds farfetched, but you gotta be prepared for anything when you're working with clients 🤷