artiebits / svelte-seo

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

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	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 is inspired by Next SEO by @garmeeh.

License

MIT

svelte-seo's Issues

Tags do not get updated on Sveltekit single page app

Describe the bug

For a sveltekit single page app (when csr = true), the meta tags are not updated when client-side page navigation happens. In my +layout.svelte file

<script>
  // Load SEO data from the route's load function
  $: title = $page.data.page?.content.seo?.title
</script>

<!-- This works -->
<svelte:head>
  <title>{title}</title>
</svelte:head> -->

<!-- Does not work -->
<SvelteSeo {title} />

Argument of type 'typeof SvelteSeo' is not assignable to parameter of type ConstructorOfATypedSvelteComponent ......

After following the installation from the readme.md i get this error.

Svelte version: "svelte": "3.54.0",
Kit: "@sveltejs/kit": "1.0.1",
SvelteSeo: "svelte-seo": "1.4.1",

Import:

import SvelteSeo from 'svelte-seo';

Canonical doesn't seems to work ?

<SvelteSeo title='test' canonical='https://test.fr' />

The following example add the title but doesn't add the canonical link, did I miss something ? Thank's

Request Feature Keyword

Hi, Thanks for your awesome library, this very2 helpful, but i woul to like request property keyword for this ..

can we make pull request for this ?

Would it be appropriate to have a warning on <title> character limits?

I've recently learned that for SEO there is usually a sweet spot under 60 characters for title tag lengths. I was wondering if there was a way to implement a compiler warning for this library when <title> tag contents are over 60 characters (or under 25 or something).

Include additional options for `og:type`

It would be helpful to include videos and other types of content. Happy to help make it happen. I can also include more docs if needed, but the main OpenGraph page describes them, like video: https://ogp.me/#type_video

Automatically filling OpenGraph and Twitter cards object with data from the title and description tags

@artiebits , I was suggesting that, the data for the opengraph tags and twitter cards should be taken from the title tags if they are not initially provided, the reason being it that, in most sites, the data used in the title tag is the same used for the OpenGraph and Twitter Cards. Also, it will save time.

Export declarations for Svelte and Vite not present

Describe the bug
Svelte's Vite plugin now requires to declare the exports

To Reproduce
Steps to reproduce the behavior:

1. Install and use svelte-seo on latest SvelteKit version

Screenshots

12:20:56 PM [vite-plugin-svelte] WARNING: The following packages have a svelte field in their package.json but no exports condition for svelte.

[email protected]

Please see https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/faq.md#missing-exports-condition for details.

Additional context
"@sveltejs/kit": "^2.0.6"
"@sveltejs/vite-plugin-svelte": "^3.0.1"
"vite": "^5.0.11"

I'm looking forward on opening a PR if I get some free time.

Layout wont get overwritten by Page, but appends.

Describe the bug
Layout seo data doesn't get overwritten by page. It stacks on top, but on e.g facebook, we see the the data from layout, not the page.

To Reproduce
Steps to reproduce the behavior:

1. Add sample SEO data in layout.
2. Add sample SEO data in page.
3. See the contents of page,
4. See error - data from layout hasn't been overwritten by page.

Expected behavior
I would expect that the layout gets overwritten by page Seo Data.

Additional context
If this is the intended way, then explain on how you imagine to use the plugin?

Duplicate json-ld schemas

Describe the bug
There are 2 JSON+LD script tags instead of 1 in dev and static build using svelte-kit's static adater.

To Reproduce
Steps to reproduce the behavior:

1. Setup skeleton svelte-kit project npm init svelte@next
2. Replace /src/routes/index.svelte with the following:

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

<h1>Welcome to SvelteKit</h1>
<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>
<SvelteSeo jsonLd={{
    '@context': 'http://www.schema.org',
    '@type': 'Locksmith',
    name: 'BOLT Schlüsseldienst',
    priceRange: '$',
    openingHours: 'Mo,Tu,We,Th,Fr,Sa,Su 00:00-24:00'
}}/>

3. Run npm dev and open browser and inspect devtools.

Expected behavior
Only 1 JSON+LD script tag should be added.

Screenshots

Desktop (please complete the following information):

• OS: Windows 11
• Browser: Microsoft Edge
• Version: 95

Additional remarks
When disabling javascript, the bug is fixed.

Include `<slot/>` between `<svelte:head>` tags

To allow for cleaner markup, <slot> could be leveraged allowing for custom meta tags to be added in the component itself.

User Provided LD+JSON assigned to a `data` property in a wrapper object

Describe the bug
The user provided jsonLd object has a wrapper object that looks like this:

{
  "@context": "https://schema.org",
  "data": {
    __USER_PROVIDED_DATA__
  }
}

Example:

{
  "@context": "https://schema.org",
  "data": {
    "@context": "https://schema.org",
    "@type": "Blog",
    "@id": "https://www.myblog.com",
    "name": "My Blog",
    "description": "This is my blog's description",
    "url": "https://www.myblog.com",
  }
}

When validating the LD+JSON the root object is missing a @type property and results in an "Unspecified Type" error

To Reproduce
Provide any data for the jsonLd component property like this:

<SvelteSeo
  title="My Blog"
  description="This is my blog"
  canonical="https://www.myblog.com"
  jsonLd={{
    "@context": "https://schema.org",
    "@type": "Blog",
    "@id": "https://www.myblog.com",
    "name": "My Blog",
    "description": "This is my blog's description",
    "url": "https://www.myblog.com",
  }} />

This wrapper is added here:

svelte-seo/src/lib/index.svelte

Lines 145 to 147 in 8c28fcf

	{@html `<script type="application/ld+json">${
	JSON.stringify({ "@context": "https://schema.org", data }) + "<"
	}/script>`}

Expected behavior
The LD+JSON should be exactly what users provided without the wrapper:

<script type="application/ld+json">
{
    "@context": "https://schema.org",
    "@type": "Blog",
    "@id": "https://www.myblog.com",
    "name": "My Blog",
    "description": "This is my blog's description",
    "url": "https://www.myblog.com",
  }
</script>

Or is there a reason for doing it this way?

Thanks!

Minimun required Fields from Backend?

What minimum BACKEND fields apart Title/Description are required, to fully utilize this Svelte-SEO addon and stay flexible?

SPA prerender

Does it work with

export const ssr = false;
export const prerender = true;

The exported html files must have title and others into head

Open Graph not working in Svelte Kit

The issue was actually in my code.

JSON-LD stringification is non-standard

Describe the bug

Same as google/react-schemaorg#9

JSON-LD stringification doesn't properly escape </script>, etc.

To Reproduce

1. Set JSON-LD to

{ name: "</script><script>alert('xss')</script>" }

(which is valid)

Expected behavior
Characters are escaped according to spec.

Additional context

The spec: https://www.w3.org/TR/json-ld11/#restrictions-for-contents-of-json-ld-script-elements

See the parent issue in w3c/json-ld-syntax#100 where this was created.

Example fix: google/react-schemaorg@22e7dec

Suggesting a complete rewrite of this library

Hi @artiebits,
I want to suggest that we rewrite this library entirely. The reason for this is the manner in which this library was initially created.
Currently, there are two popular Svelte libraries for SEO: this library and Svelte Meta Tags.
Though this library has more stars, forks and watches than the library, it has more options than this library. The use of if statements make it really painful to create additional tags since you will be writing a lot of ifs.

Also, I suggest we move from using rollup to vite. SvelteKit nows makes it very easy to package a library and we are still using the old-school method.

For the testing, we need to move from cypress to vitest. That's because Vitest is very fast and Cypress takes a very long time to install.

If you would allow, we can outline the goals for the rewrite and I will task myself to coding it.

Thank you

Ts Types not working with vs code

Describe the bug
Types are not properly exported for svetelkit-v2 project

To Reproduce
Create a new sveltekit app , and install the svelte-seo package

Expected behavior
Proper Assignment of types