A Svelte SEO Component for Sapper & SvelteKit

A drop-in Svelte component to set page titles, descriptions, canonical urls, and sitewide default SEO & social sharing tags with the option to manually override on individual pages.

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 🤷