Svelte Seo

hansuribe

Download

Svelte SEO

Svelte SEO is a plugin that makes managing your SEO easier in Svelte projects.

Installing
Usage
Acknowledgements
License

Installing

Install using yarn:

yarn add svelte-seo

or npm:

npm install --save svelte-seo

Usage

Add SEO to Page

Import Svelte SEO and add the desired properties. This will render out the tags in the <head> for SEO. At a bare minimum, you should add a title and description.

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

<SvelteSeo
  title="Simple Usage Example"
  description="A short description goes here."
/>

Svelte SEO options

Property	Type	Description
`title`	string	Sets the page meta title.
`description`	string	Sets the page meta description.
`noindex`	boolean (default false)	Sets whether page should be indexed or not. More Info.
`nofollow`	boolean (default false)	Sets whether page should be followed or not. More Info.
`keywords`	string	Set the page keywords.
`canonical`	string	Set the page canonical url.
`openGraph.type`	string	The type of your object. Depending on the type you specify, other properties may also be required More Info.
`openGraph.title`	string	The open graph title, this can be different than your meta title.
`openGraph.description`	string	The open graph description, this can be different than your meta description.
`openGraph.url`	string	The canonical URL of your object that will be used as its permanent ID in the graph.
`openGraph.images`	array	An array of images (object) to be used as a preview. If multiple supplied you can choose one when sharing. See Examples
`openGraph.article.publishedTime`	datetime	When the article was first published. See Examples.
`openGraph.article.modifiedTime`	datetime	When the article was last changed.
`openGraph.article.expirationTime`	datetime	When the article is out of date after.
`openGraph.article.authors`	string[]	Writers of the article.
`openGraph.article.section`	string	A high-level section name. E.g. Technology
`openGraph.article.tags`	string[]	Tag words associated with this article.

Open Graph

For the full specification please check out http://ogp.me/

Svelte SEO currently supports:

basic
article

Basic Example

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

<SvelteSeo
  openGraph={{
    title: 'Open Graph Title',
    description: 'Open Graph Description',
    url: 'https://www.example.com/page',
    type: 'website',
    images: [
      {
        url: 'https://www.example.com/images/og-image.jpg',
        width: 850,
        height: 650,
        alt: 'Og Image Alt'
      }
     ]
  }}
/>

Article Example

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

<SvelteSeo
  openGraph={{
    title: "Open Graph Article Title",
    description: "Description of open graph article",
    type: "article",
    url: "https://www.example.com/articles/article-title",
    article: {
      publishedTime: "2020-08-03T17:31:37Z",
      modifiedTime: "2020-08-20T09:31:37Z",
      expirationTime: "2025-12-21T17:31:37Z",
      section: "Section II",
      authors: [
        "https://www.example.com/authors/@firstnameA-lastnameA",
        "https://www.example.com/authors/@firstnameB-lastnameB",
      ],
      tags: ["Tag A", "Tag B", "Tag C"],
    },
    images: [
      {
        url: "https://www.example.com/images/cover.jpg",
        width: 850,
        height: 650,
        alt: "Og Image Alt",
      },
    ],
  }}
/>

Acknowledgements

This is inspired by Next SEO by @garmeeh.

License

MIT

Top categories