Smart Seo for Svelte

Effortlessly optimize your SvelteKit projects with this intelligent SEO component. It automatically includes essential meta tags, saving you valuable setup time.

Just drop this component on the main layout and it does its magic for all the child pages.

Svelte Magic SEO

Use this on non-critical projects where you do not want to add basic SEO tags yourself. For example, demo projects, package sites etc.

If you want SEO on critical websites, then consider using svelte-seo.

This website uses smart-seo. Here is what it has generated automatically.

generates current page name from the route
generates description from the page name.
tried to get the first image on the page for og:image
generates correct canonical if SITE_URL is provided

Installation

npm i -D svelte-smart-seo

Usage

You should be using it only at routes/+layout.svelte, nowhere else.

<script>
  import SmartSeo from "svelte-smart-seo";
</script>

<SmartSeo SITE_TITLE="Smart Seo" SITE_URL="https://smart-seo.sveltethemes.dev" />

Tags added

It adds title, description, and canonical tags (and their open graph versions). Nothing else.

Examples

Imagine you have a page /about

Here are the tags added.

<title>About | Smart Seo</title>
<meta property="og:title" content="About | Smart Seo" />
<meta name="description" content="This is About page from Smart Seo." />
<meta property="og:description" content="This is About page from Smart Seo." />
<link rel="canonical" href="https://smart-seo.sveltethemes.dev/about" />
<meta property="og:url" content="https://smart-seo.sveltethemes.dev/about" />

Page - /about/me

<title>Me | Smart Seo</title>
<meta property="og:title" content="Me |  Smart Seo" />
<meta name="description" content="Me page from Smart Seo." />
<meta property="og:description" content="Me page from Smart Seo." />
<link rel="canonical" href="https://smart-seo.sveltethemes.dev/about/me" />
<meta property="og:url" content="https://smart-seo.sveltethemes.dev/about/me" />
<meta
  property="og:image"
  content="https://smart-seo.sveltethemes.dev/my-image.png"
/>

Grouped Route - /(auth)/profile

<title>Profile | Smart Seo</title>
<meta property="og:title" content="Profile | Smart Seo" />
<meta name="description" content="Profile page from Smart Seo." />
<meta property="og:description" content="Profile page from Smart Seo." />
<link rel="canonical" href="https://smart-seo.sveltethemes.dev/profile" />
<meta property="og:url" content="https://smart-seo.sveltethemes.dev/profile" />

Page - /blog/svelte-seo/new/package

<title>Package | New | Svelte Seo | Blog | Smart Seo</title>
<meta
  property="og:title"
  content="Package | New | Svelte Seo | Blog |  Smart Seo"
/>
<meta
  name="description"
  content="Package New Svelte Seo Blog page from Smart Seo."
/>
<meta
  property="og:description"
  content="Package New Svelte Seo Blog page from Smart Seo."
/>
<link
  rel="canonical"
  href="https://smart-seo.sveltethemes.dev/blog/svelte-seo/new/package"
/><meta
  property="og:url"
  content="https://smart-seo.sveltethemes.dev/blog/svelte-seo/new/package"
/>

More Tags

You have to add them yourself using the default svete:head.

<svelte:head>
<!-- Your custom tags -->
</svelte:head>

Desclaimer

This package is currently under development and may contain unforeseen issues. Please exercise caution when using it.

github npm