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.

Notes

The original developer seems to have abandoned this project, so I started to patching it in this forked repository, because I needed to fix some errors.

• svelte-seo
  • Notes
  • 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 @rgglez/svelte-seo
• or yarn
  yarn add -D @rgglez/svelte-seo
• or pnpm
  pnpm add -D @rgglez/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 "@rgglez/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 "@rgglez/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 | string | The title of the content, maximum 70 characters. | | twitter.description | string | A description of the content, maximum 200 characters. | | twitter.image | string | The URL of an image to use in the Twitter card. Images must be less than 5MB in size. | | twitter.imageAlt | string | A text description of the image conveying its essential nature to visually impaired users. Maximum 420 characters. | | twitter.card | "summary" , "summary_large_image" , "player" , "app" | The type of Twitter card to use. | | twitter.site | string | The @username of the website. | | twitter.creator | string | The @username of the content creator. | | twitter.player | string | The HTTPS URL of the player iframe. | | twitter.playerWidth | string | The width of the iframe in pixels. | | twitter.playerHeight | string | The height of the iframe in pixels. | | twitter.playerStream | string | The URL to the raw video or audio stream. | | twitter.appNameIphone | string | The name of your iPhone app. | | twitter.appUrlIphone | string | The custom URL scheme for your app on iPhone (include ”://” after your scheme name) | | twitter.appNameIpad | string | The name of your iPad-optimized app | | twitter.appIdIpad | string | Your app's ID in the iTunes App Store | | twitter.appNameGoogleplay | string | The name of your Android app | | twitter.appIdGoogleplay | string | Your app's ID in the Google Play Store | | twitter.appUrlGoogleplay | string | The custom URL scheme for your app on Google Play | | facebook.appId | string | A unique number that identifies your app when you request ads from Audience Network, known as a Facebook App ID | | openGraph.title | string | The title of your object as it should appear within the graph | | openGraph.type | string | The type of your object, such as "video.movie". Depending on the type, other properties may also be required. | | openGraph.url | string | The canonical URL of your object that will be used as its permanent ID in the graph | | openGraph.audio | string | An audio file to accompany the content. | | openGraph.audioSecure_url | string | An alternate URL to use if the webpage requires HTTPS | | openGraph.audioType | string | The MIME type for the audio | | openGraph.description | string | A one- or two-sentence description of your object | | openGraph.determiner | string | The word that appears before the title, e.g., "the" or "a". | | openGraph.locale | string | The locale of the content, e.g., "en_US". | | openGraph.localeAlternate | string[] | Alternate locales for the content. https://ogp.me/#array | | openGraph.site_name | string | The name of the website where the content is hosted. | | openGraph.images | Array | Properties about images related to the web page. | | openGraph.videos | OpenGraphVideo | Properties about videos related to the web page. | | openGraph.music | OpenGraphMusic | OpenGraph for music files. | | openGraph.movie | OpenGraphMovie | OpenGraph for a movie. | | openGraph.article | OpenGraphArticle | OpenGraph for an article. | | openGraph.book | OpenGraphBook | OpenGraph for a book. | | openGraph.profile | OpenGraphProfile | OpenGraph for a profile. |

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 project was forked from artiebits/svelte-seo, which in turn was inspired by Next SEO by @garmeeh.

License

Copyright (c) 2020 artiebits Copyright (c) 2024 Rodolfo González González

Published under the MIT license. Please read the LICENSE file.