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

Property	Type	Description
title	string	A page title that will appear in search results.
description	string	A page description that will appear in search results.
keywords	string	Keywords that give search engines more information about the content of the page.
base	string	A default URL and target for all links on a page.
applicationName	string	The name of the web application that the page represents.
themeColor	string	A suggested color that user agents should use to customize the display of the page or the surrounding user interface.
nofollow	boolean (default false)	Prevents Googlebot from following any links on the page.
noindex	boolean (default false)	Prevents the page from being included in the index.
nositelinkssearchbox	boolean (default false)	Opt out of Google's Sitelinks search box.
notranslate	boolean	Prevents Google from translating the page.
canonical	string	The canonical URL of the page.
amp	string	A URL to the AMP version of the webpage.
manifest	string	The URL to a JSON file that tells the browser about your Progressive Web App and how it should behave when installed on the user's desktop or mobile device.
languageAlternates	Array<{ hreflang: string; href: string }>	Provides Google with information about the variations of your content in other languages.
twitter.title