Svelte SEO

Optimize your Svelte app for search engines and social media with meta tags, Open Graph, and JSON-LD.

Svelte SEO is a powerful and easy-to-use package designed to optimize your Svelte app for search engines and social media. By adding essential meta tags, Open Graph, Twitter Card tags, and JSON-LD to your pages, Svelte SEO improves your website's visibility and ranking in search results.

Sponsor Svelte SEO

If you rely on Svelte SEO and find it useful, please consider supporting it. Maintaining an open source project takes time and your support would be greatly appreciated.

• Installation
• Usage
  • Basic Usage
  • Advanced Usage
• Svelte SEO Properties
  • Open Graph
  • Twitter
  • Facebook
  • JSON-LD
• Setting Default SEO Properties
• Acknowledgements
• License

Installation

• npm
  npm install -D svelte-seo
• or yarn
  yarn add -D svelte-seo
• or pnpm
  pnpm add -D svelte-seo

Usage

Basic Usage

To add basic meta tags like "title" and "description" you can import the package and use it like this:

<script>
  import SvelteSeo from "svelte-seo";
</script>

<SvelteSeo
  title="Simple page title"
  description="Simple description about a page"
/>

Advanced Usage

You can provide additional properties to SvelteSeo component. Here is an example:

<script>
  import SvelteSeo from "svelte-seo";
</script>

<SvelteSeo
  title="Primal Movement | Natural Movement for Better Health"
  description="Learn about primal movement exercises and how they can benefit your fitness."
  canonical="https://www.primal-movement.com/"
  keywords="primal movement, natural movement, squatting, lunging, crawling, jumping, fitness"
  openGraph={{
    title: "Primal Movement | Natural Movement for Better Health",
    description:
      "Learn about primal movement exercises and how they can benefit your fitness.",
    image: "https://www.primal-movement.com/images/squatting.jpg",
    url: "https://www.primal-movement.com/",
    type: "website",
    images: [
      {
        url: "https://www.primal-movement.com/images/squatting.jpg",
        width: 800,
        height: 600,
        alt: "Squatting",
      },
      {
        url: "https://www.primal-movement.com/images/lunging.jpg",
        width: 900,
        height: 800,
        alt: "Crawling",
      },
      {
        url: "https://www.primal-movement.com/images/crawling.jpg",
        alt: "Jumping",
      },
      {
        url: "https://www.primal-movement.com/images/jumping.jpg",
      },
    ],
    site_name: "Primal Movement",
  }}
  twitter={{
    card: "summary_large_image",
    site: "@primalmovement",
    title: "Primal Movement | Natural Movement for Better Health",
    description:
      "Learn about primal movement exercises and how they can benefit your fitness.",
    image: "https://www.primal-movement.com/images/squatting.jpg",
  }}
  facebook={{
    appId: "1234567890",
  }}
/>

Svelte SEO Properties

Open Graph

Svelte SEO supports the following Open Graph object types: basic, music, movie, article, book, and profile. For the full specification, please check out http://ogp.me/.

Twitter

Svelte SEO supports all Twitter Card Tags. For more information, check out the Twitter documentation at https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/markup.

twitter={{
  card: "summary_large_image",
  site: "@primalmovement",
  title: "Primal Movement | Natural Movement for Better Health",
  description:
    "Learn about primal movement exercises and how they can benefit your fitness.",
  image: "https://www.primal-movement.com/images/squatting.jpg",
  imageAlt: "Squatting",
}}

Facebook

facebook={{
  appId: "1234567890",
}}

JSON-LD

JSON-LD provides a more customizable and detailed representation of content in search results. With Svelte SEO, you can implement all available JSON-LD types. Here is a basic example:

jsonLd={{
  "@context": "https://schema.org",
  "@type": "WebSite",
  name: "Primal Movement | Natural Movement for Better Health",
  description:
    "Learn about primal movement exercises and how they can benefit your fitness.",
  url: "https://www.primal-movement.com",
}}

Setting Default SEO Properties

You can set default SEO properties that will appear on every page without needing to add them individually. Common meta tags like theme-color, manifest, and base can be present on every page. If you configure the Svelte SEO in your +layout.svelte, these properties will stay fixed for every page. They can be changed on a per-page basis if necessary. For more information on using layouts and routing with SvelteKit, please refer to the official documentation at https://kit.svelte.dev/docs/routing#layout.

Acknowledgements

This is inspired by Next SEO by @garmeeh.

License

MIT