somerset

v0.0.6

Published

a year ago

Literally just [Next SEO](https://github.com/garmeeh/next-seo) for SvelteKit.

Downloads

0High
0Medium
0Low

realgoatish

svelte seo sveltekit

Somerset

Literally just Next SEO for SvelteKit.

Usage

Somerset works by including it on pages where you would like SEO attributes to be added and passing it props to render OpenGraph/Meta tags. It also offers components for rendering JSON-LD.

Setup

First, install it:

npm install somerset

yarn add somerset

Add SEO to Page

Then you need to import Somerset 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.

Example with just title and description:

<script>

  import { Somerset } from 'somerset';

</script>

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

But Somerset gives you many more options that you can add. See below for a typical example of a page.

Typical page example:

<script>

  import { Somerset } from 'somerset';

</script>

<Somerset
  title="Using More of Config"
  description="This example uses more of the available config options."
  canonical="https://www.canonical.ie/"
  openGraph={{
    url: 'https://www.url.ie/a',
    title: 'Open Graph Title',
    description: 'Open Graph Description',
    images: [
      {
        url: 'https://www.example.ie/og-image-01.jpg',
        width: 800,
        height: 600,
        alt: 'Og Image Alt',
        type: 'image/jpeg',
      },
      {
        url: 'https://www.example.ie/og-image-02.jpg',
        width: 900,
        height: 800,
        alt: 'Og Image Alt Second',
        type: 'image/jpeg',
      },
      { url: 'https://www.example.ie/og-image-03.jpg' },
      { url: 'https://www.example.ie/og-image-04.jpg' },
    ],
    siteName: 'SiteName',
  }}
  twitter={{
    handle: '@handle',
    site: '@site',
    cardType: 'summary_large_image',
  }}
/>
<p>SEO Added to Page</p>

A note on Twitter Tags

Props cardType, site, handle are equivalent to twitter:card, twitter:site, twitter:creator. Documentation can be found here.

Twitter will read the og:title, og:image and og:description tags for their card. somerset omits twitter:title, twitter:image and twitter:description to avoid duplication.

Some tools may report this an error. If you want to add these tags, you can do so via the additionalMetaTags prop

Handling Global SEO Data

somerset doesn't offer something equivalent to next-seo's DefaultSeo component. somerset uses simple JavaScript template strings to render <head> tags, so it can't currently do per-page overrides of global defaults. I recommend using the Somerset component to set all the meta & openGraph tags you want on each page.

You can still centrally manage your global SEO data by passing it "downward" from a +layout.svelte page & feeding it to the Somerset component on each page. Here's an example of how this might look with data coming from a CMS:

<!-- MyPage.svelte -->
<script>

  import { Somerset } from 'somerset'

  export let data;

  const { pageSeo, globalSeo } = data;

</script>

<Somerset
  title={pageSeo.title}
  description={pageSeo.description}
  canonical={`${globalSeo.url}${data.slug}`}
  openGraph={{
    type: 'website',
    url: `${globalSeo.url}${data.slug}`,
    title: pageSeo.openGraph.title,
    description: pageSeo.openGraph.description,
    locale: 'en_US',
    siteName: globalSeo.name,
    images: [
      {
        url: pageSeo.openGraph.image.url,
        width: 1200,
        height: 630,
	alt: pageSeo.openGraph.image.alt
      }
    ]
  }}
/>

Somerset Options

| Property | ---------------------------------- | titleTemplate | title | defaultTitle | noindex | nofollow | robotsProps | description | canonical | mobileAlternate.media | mobileAlternate.href | languageAlternates | themeColor | additionalMetaTags | additionalLinkTags | twitter.cardType | twitter.site | twitter.handle | facebook.appId | openGraph.url | openGraph.type | openGraph.title | openGraph.description | openGraph.images | openGraph.videos | openGraph.locale | openGraph.siteName | openGraph.profile.firstName | openGraph.profile.lastName | openGraph.profile.username | openGraph.profile.gender | openGraph.book.authors | openGraph.book.isbn | openGraph.book.releaseDate | openGraph.book.tags | openGraph.article.publishedTime | openGraph.article.modifiedTime | openGraph.article.expirat | openGraph.article.authors | openGraph.article.section | openGraph.article.tags | Type | Description | | ----------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | string | Allows you to set default title template that will be added to your title More Info | | string | Set the meta title of the page | | string | If no title is set on a page, this string will be used instead of an empty titleTemplate More Info | | boolean (default false) | Sets whether page should be indexed or not More Info | | boolean (default false) | Sets whether page should be followed or not More Info | | Object | Set the more meta information for the X-Robots-Tag More Info | | string | Set the page meta description | | string | Set the page canonical url | | string | Set what screen size the mobile website should be served from | | string | Set the mobile page alternate url | | array | Set the language of the alternate urls. Expects array of objects with the shape: { hrefLang: string, href: string } | | string | Indicates a suggested color that user agents should use to customize the display of the page or of the surrounding user interface. Must contain a valid CSS color | | array | Allows you to add a meta tag that is not documented here. More Info | | array | Allows you to add a link tag that is not documented here. More Info | | string | The card type, which will be one of summary, summary_large_image, app, or player | | string | @username for the website used in the card footer | | string | @username for the content creator / author (outputs as twitter:creator) | | string | Used for Facebook Insights, you must add a facebook app ID to your page to for it More Info | | string | The canonical URL of your object that will be used as its permanent ID in the graph | | string | The type of your object. Depending on the type you specify, other properties may also be required More Info | | string | The open graph title, this can be different than your meta title. | | string | The open graph description, this can be different than your meta description. | | array | An array of images (object) to be used by social media platforms, slack etc as a preview. If multiple supplied you can choose one when sharing. See Examples | | array | An array of videos (object) | | string | The locale the open graph tags are marked up in. Of the format language_TERRITORY. Default is en_US. | | string | If your object is part of a larger web site, the name which should be displayed for the overall site. | | string | Person's first name. | | string | Person's last name. | | string | Person's username. | | string | Person's gender. | | string[] | Writers of the article. See Examples | | string | The ISBN | | datetime | The date the book was released. | | string[] | Tag words associated with this book. | | datetime | When the article was first published. See Examples | | datetime | When the article was last changed. | ionTime | datetime | When the article is out of date after. | | string[] | Writers of the article. | | string | A high-level section name. E.g. Technology | | string[] | Tag words associated with this article. |

Title Template

Replaces %s with your title string

title = 'This is my title';
titleTemplate = 'Somerset | %s';
// outputs: Somerset | This is my title

title = 'This is my title';
titleTemplate = '%s | Somerset';
// outputs: This is my title | Somerset

Default Title

title = undefined;
titleTemplate = 'Somerset | %s';
defaultTitle = 'Somerset';
// outputs: Somerset

No Index

Setting this to true will set noindex,follow (to set nofollow, please refer to nofollow). This works on a page by page basis. This property works in tandem with the nofollow property and together they populate the robots meta tag.

Note: If you want to set all pages to noindex, do so in your +layout.svelte. Just be aware that you can not override this at the page level (it would only produce another robots tag).

Example No Index on a single page:

If you have a single page that you want no indexed you can achieve this by:

<script>

  import { Somerset } from 'somerset';

</script>

<Somerset noindex={true} />
<p>This page is no indexed</p>

<!-- 
<meta name="robots" content="noindex,follow"> 
-->

No Follow

Setting this to true will set index,nofollow (to set noindex, please refer to noindex). This works on a page by page basis. This property works in tandem with the noindex property and together they populate the robots meta tag.

Note: If you want to set all pages to nofollow, do so in your +layout.svelte. Just be aware that you can not override this at the page level (it would only produce another robots tag).

Example No Follow on a single page:

If you have a single page that you want no followed you can achieve this by:

<script>

  import { Somerset } from 'somerset';

</script>

<Somerset nofollow={true} />
<p>This page is no followed</p>

<!-- 
<meta name="robots" content="index,nofollow"> 
-->

| noindex | nofollow | meta content of robots | | --------- | ---------- | -------------------------- | | -- | -- | index,follow (default) | | false | false | index,follow | | true | -- | noindex,follow | | true | false | noindex,follow | | -- | true | index,nofollow | | false | true | index,nofollow | | true | true | noindex,nofollow |

robotsProps

In addition to index, follow the robots meta tag accepts more properties to archive a more accurate crawling and serve better snippets for SEO bots that crawl your page.

Example:

<script>

import { Somerset } from 'somerset';

</script>

<Somerset
  robotsProps={{
    nosnippet: true,
    notranslate: true,
    noimageindex: true,
    noarchive: true,
    maxSnippet: -1,
    maxImagePreview: 'none',
    maxVideoPreview: -1,
  }}
/>
<p>Additional robots props in Somerset!!</p>

<!--
<meta name="robots" content="index,follow,nosnippet,max-snippet:-1,max-image-preview:none,noarchive,noimageindex,max-video-preview:-1,notranslate">
-->

Available properties

| Property | Type | Description | | ------------------- | ------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | noarchive | boolean | Do not show a cached link in search results. | | nosnippet | boolean | Do not show a text snippet or video preview in the search results for this page. | | max-snippet | number | Use a maximum of [number] characters as a textual snippet for this search result. Read more | | max-image-preview | 'none','standard','large' | Set the maximum size of an image preview for this page in a search results. | | max-video-preview | number | Use a maximum of [number] seconds as a video snippet for videos on this page in search results. Read more | | notranslate | boolean | Do not offer translation of this page in search results. | | noimageindex | boolean | Do not index images on this page. | | unavailable_after | string | Do not show this page in search results after the specified date/time. The date/time must be specified in a widely adopted format including, but not limited to RFC 822, RFC 850, and ISO 8601. |

For more reference about the X-Robots-Tag visit Google Search Central - Control Crawling and Indexing

Twitter

Twitter will read the og:title, og:image and og:description tags for their card, this is why somerset omits twitter:title, twitter:image and twitter:description so not to duplicate.

Some tools may report this an error. If you want to add these tags, you can do so via the additionalMetaTags prop

facebook

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

Add this to your facebook prop object to include the fb:app_id meta if you need to enable Facebook insights for your site. Information regarding this can be found in facebook's documentation

Canonical URL

Add this on a page per page basis when you want to consolidate duplicate URLs.

canonical = 'https://www.canonical.ie/';

Alternate

This link relation is used to indicate a relation between a desktop and a mobile website to search engines.

Example:

mobileAlternate={{
  media: 'only screen and (max-width: 640px)',
  href: 'https://m.canonical.ie',
}}

languageAlternates={[{
  hrefLang: 'de-AT',
  href: 'https://www.canonical.ie/de',
}]}

Additional Meta Tags

This allows you to add any other meta tags that are not covered in the config and should be used instead of children prop.

content is required. Then either name, property or httpEquiv. (Only one on each)

Example:

additionalMetaTags={[{
  property: 'dc:creator',
  content: 'Jane Doe'
}, {
  name: 'application-name',
  content: 'Somerset'
}, {
  httpEquiv: 'x-ua-compatible',
  content: 'IE=edge; chrome=1'
}]}

Invalid Examples:

These are invalid as they contain more than one of name, property and httpEquiv on the same entry.

additionalMetaTags={[{
  property: 'dc:creator',
  name: 'dc:creator',
  content: 'Jane Doe'
}, {
  property: 'application-name',
  httpEquiv: 'application-name',
  content: 'Somerset'
}]}

Additional Link Tags

This allows you to add any other link tags that are not covered in the config.

rel and href is required.

Example:

additionalLinkTags={[
  {
    rel: 'icon',
    href: 'https://www.test.ie/favicon.ico',
  },
  {
    rel: 'apple-touch-icon',
    href: 'https://www.test.ie/touch-icon-ipad.jpg',
    sizes: '76x76'
  },
  {
    rel: 'manifest',
    href: '/manifest.json'
  },
  {
    rel: 'preload',
    href: 'https://www.test.ie/font/sample-font.woof2',
    as: 'font',
    type: 'font/woff2',
    crossOrigin: 'anonymous'
  }
]}

it will result in this being rendered:

<link rel="icon" href="https://www.test.ie/favicon.ico" />
<link
  rel="apple-touch-icon"
  href="https://www.test.ie/touch-icon-ipad.jpg"
  sizes="76x76"
/>
<link rel="manifest" href="/manifest.json" />
<link
  rel="preload"
  href="https://www.test.ie/font/sample-font.woof2"
  as="font"
  type="font/woff2"
  crossorigin="anonymous"
/>

Open Graph

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

Somerset currently supports:

Open Graph Examples

Basic

<script>

  import { Somerset } from 'somerset';

</script>

<Somerset
  openGraph={{
    type: 'website',
    url: 'https://www.example.com/page',
    title: 'Open Graph Title',
    description: 'Open Graph Description',
    images: [
      {
        url: 'https://www.example.ie/og-image.jpg',
        width: 800,
        height: 600,
        alt: 'Og Image Alt',
      },
      {
        url: 'https://www.example.ie/og-image-2.jpg',
        width: 800,
        height: 600,
        alt: 'Og Image Alt 2',
      },
    ],
  }}
/>
<p>Basic</p>

Video

Full info on http://ogp.me/

<script>

  import { Somerset } from 'somerset';

</script>

<Somerset
  title="Video Page Title"
  description="Description of video page"
  openGraph={{
    title: 'Open Graph Video Title',
    description: 'Description of open graph video',
    url: 'https://www.example.com/videos/video-title',
    type: 'video.movie',
    video: {
      actors: [
        {
          profile: 'https://www.example.com/actors/@firstnameA-lastnameA',
          role: 'Protagonist',
        },
        {
          profile: 'https://www.example.com/actors/@firstnameB-lastnameB',
          role: 'Antagonist',
        },
      ],
      directors: [
        'https://www.example.com/directors/@firstnameA-lastnameA',
        'https://www.example.com/directors/@firstnameB-lastnameB',
      ],
      writers: [
        'https://www.example.com/writers/@firstnameA-lastnameA',
        'https://www.example.com/writers/@firstnameB-lastnameB',
      ],
      duration: 680000,
      releaseDate: '2022-12-21T22:04:11Z',
      tags: ['Tag A', 'Tag B', 'Tag C'],
    },
    siteName: 'SiteName',
  }}
/>
<h1>Video Page SEO</h1>

Audio

Full info on http://ogp.me/

<script>

  import { Somerset } from 'somerset';

</script>

<Somerset
  title="Audio Page Title"
  description="Description of audio page"
  openGraph={{
    title: 'Open Graph Audio',
    description: 'Description of open graph audio',
    url: 'https://www.example.com/audio/audio',
    audio: [
      {
        url: 'http://examples.opengraphprotocol.us/media/audio/1khz.mp3',
        secureUrl: 'https://d72cgtgi6hvvl.cloudfront.net/media/audio/1khz.mp3',
        type: "audio/mpeg"
      },
      {
        url: 'http://examples.opengraphprotocol.us/media/audio/250hz.mp3',
        secureUrl: 'https://d72cgtgi6hvvl.cloudfront.net/media/audio/250hz.mp3',
        type: "audio/mpeg"
      },
    ]
    site_name: 'SiteName',
  }}
/>
<h1>Audio Page SEO</h1>

Article

<script>

  import { Somerset } from 'somerset';

</script>

<Somerset
  openGraph={{
    title: 'Open Graph Article Title',
    description: 'Description of open graph article',
    url: 'https://www.example.com/articles/article-title',
    type: 'article',
    article: {
      publishedTime: '2017-06-21T23:04:13Z',
      modifiedTime: '2018-01-21T18:04:43Z',
      expirationTime: '2022-12-21T22:04:11Z',
      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.test.ie/images/cover.jpg',
        width: 850,
        height: 650,
        alt: 'Photo of text',
      },
    ],
  }}
/>
<p>Article</p>

Book

<script>

  import { Somerset } from 'somerset';

</script>

<Somerset
  openGraph={{
    title: 'Open Graph Book Title',
    description: 'Description of open graph book',
    url: 'https://www.example.com/books/book-title',
    type: 'book',
    book: {
      releaseDate: '2018-09-17T11:08:13Z',
      isbn: '978-3-16-148410-0',
      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.test.ie/images/book.jpg',
        width: 850,
        height: 650,
        alt: 'Cover of the book',
      },
    ],
  }}
/>
<p>Book</p>

Profile

<script>

  import { Somerset } from 'somerset';

</script>

<Somerset
  openGraph={{
    title: 'Open Graph Profile Title',
    description: 'Description of open graph profile',
    url: 'https://www.example.com/@firstlast123',
    type: 'profile',
    profile: {
      firstName: 'First',
      lastName: 'Last',
      username: 'firstlast123',
      gender: 'female',
    },
    images: [
      {
        url: 'https://www.test.ie/images/profile.jpg',
        width: 850,
        height: 650,
        alt: 'Profile Photo',
      },
    ],
  }}
/>
<p>Profile</p>

JSON-LD

Somerset has the ability to set JSON-LD a form of structured data. Structured data is a standardised format for providing information about a page and classifying the page content.

Google has excellent content on JSON-LD -> HERE

Below you will find a very basic page implementing each of the available JSON-LD types:

Pull request very welcome to add any from the list found on here

JSON-LD Security

Just a quick note on security. To get JSON-LD onto the page it needs to be in a script tag. somerset achieves this by using a JavaScript template strings.

So if passing anything directly from a URL to one of the components below please ensure you sanitize it first if needed.

View toJson.tsx for implementation detail.

Handling multiple instances

If your page requires multiple instances of a given JSON-LD component, you can specify unique keyOverride properties, and somerset will handle the rest.

This comes in handy for blog rolls, search results, and overview pages.

Please fully research when you should and shouldn't add multiple instances of JSON-LD.

<ExampleJsonLd keyOverride="my-new-key" />

Article

<script>

  import { ArticleJsonLd } from 'somerset';

</script>

<h1>Article JSON-LD</h1>
<ArticleJsonLd
  useAppDir={false}
  url="https://example.com/article"
  title="Article headline"
  images={[
    'https://example.com/photos/1x1/photo.jpg',
    'https://example.com/photos/4x3/photo.jpg',
    'https://example.com/photos/16x9/photo.jpg',
  ]}
  datePublished="2015-02-05T08:00:00+08:00"
  dateModified="2015-02-05T09:00:00+08:00"
  authorName={[
    {
      name: 'Jane Blogs',
      url: 'https://example.com',
    },
    {
      name: 'Mary Stone',
      url: 'https://example.com',
    },
  ]}
  publisherName="Gary Meehan"
  publisherLogo="https://www.example.com/photos/logo.jpg"
  description="This is a mighty good description of this article."
  isAccessibleForFree={true}
/>

Breadcrumb

<script>

  import { BreadcrumbJsonLd } from 'somerset';

</script>

<h1>Breadcrumb JSON-LD</h1>
<BreadcrumbJsonLd
  itemListElements={[
    {
      position: 1,
      name: 'Books',
      item: 'https://example.com/books',
    },
    {
      position: 2,
      name: 'Authors',
      item: 'https://example.com/books/authors',
    },
    {
      position: 3,
      name: 'Ann Leckie',
      item: 'https://example.com/books/authors/annleckie',
    },
    {
      position: 4,
      name: 'Ancillary Justice',
      item: 'https://example.com/books/authors/ancillaryjustice',
    },
  ]}
/>

Required properties

| Property | Info | | --------------------------- | -------------------------------------------------------------------------------------------------------- | | itemListElements | | | itemListElements.position | The position of the breadcrumb in the breadcrumb trail. Position 1 signifies the beginning of the trail. | | itemListElements.name | The title of the breadcrumb displayed for the user. | | itemListElements.item | The URL to the webpage that represents the breadcrumb. |

Blog

<script>

  import { ArticleJsonLd } from 'somerset';

</script>

<h1>Blog JSON-LD</h1>
<ArticleJsonLd
  type="BlogPosting"
  url="https://example.com/blog"
  title="Blog headline"
  images={[
    'https://example.com/photos/1x1/photo.jpg',
    'https://example.com/photos/4x3/photo.jpg',
    'https://example.com/photos/16x9/photo.jpg',
  ]}
  datePublished="2015-02-05T08:00:00+08:00"
  dateModified="2015-02-05T09:00:00+08:00"
  authorName="Jane Blogs"
  description="This is a mighty good description of this blog."
/>

Recipe

<script>

  import { RecipeJsonLd } from 'somerset';

</script>

<h1>Recipe JSON-LD</h1>
<RecipeJsonLd
  name="Party Coffee Cake"
  description="This coffee cake is awesome and perfect for parties."
  datePublished="2018-03-10"
  authorName={['Jane Blogs', 'Mary Stone']}
  prepTime="PT20M"
  cookTime="PT30M"
  totalTime="PT50M"
  keywords="cake for a party, coffee"
  yields="10"
  category="Dessert"
  cuisine="American"
  calories={270}
  images={[
    'https://example.com/photos/1x1/photo.jpg',
    'https://example.com/photos/4x3/photo.jpg',
    'https://example.com/photos/16x9/photo.jpg',
  ]}
  ingredients={[
    '2 cups of flour',
    '3/4 cup white sugar',
    '2 teaspoons baking powder',
    '1/2 teaspoon salt',
    '1/2 cup butter',
    '2 eggs',
    '3/4 cup milk',
  ]}
  instructions={[
    {
      name: 'Preheat',
      text: 'Preheat the oven to 350 degrees F. Grease and flour a 9x9 inch pan.',
      url: 'https://example.com/party-coffee-cake#step1',
      image: 'https://example.com/photos/party-coffee-cake/step1.jpg',
    },
  ]}
  aggregateRating={{
    ratingValue: '5',
    ratingCount: '18',
  }}
  video={{
    name: 'How to make a Party Coffee Cake',
    description: 'This is how you make a Party Coffee Cake.',
    contentUrl: 'http://www.example.com/video123.mp4',
    embedUrl: 'http://www.example.com/videoplayer?video=123',
    uploadDate: '2018-02-05T08:00:00+08:00',
    duration: 'PT1M33S',
    thumbnailUrls: [
      'https://example.com/photos/1x1/photo.jpg',
      'https://example.com/photos/4x3/photo.jpg',
      'https://example.com/photos/16x9/photo.jpg',
    ],
    expires: '2019-02-05T08:00:00+08:00',
    hasPart: {
      '@type': 'Clip',
      name: 'Preheat oven',
      startOffset: 30,
      url: 'http://www.example.com/example?t=30',
    },
    watchCount: 2347,
    publication: {
      '@type': 'BroadcastEvent',
      isLiveBroadcast: true,
      startDate: '2020-10-24T14:00:00+00:00',
      endDate: '2020-10-24T14:37:14+00:00',
    },
    regionsAllowed: ['IT', 'NL'],
  }}
/>

Required properties

| Property | Info | | ------------------- | ------------------------------------------------------------------- | | name | The name of the recipe | | description | A description of the recipe | | authorName | The name of the recipe author. Can be a string or array of strings. | | ingredients | A list of ingredient strings | | instructions | - | | instructions.name | The name of the instruction step. | | instructions.text | The directions of the instruction step. |

Sitelinks Search Box

<script>

  import { SiteLinksSearchBoxJsonLd } from 'somerset';

</script>

<h1>Sitelinks Search Box JSON-LD</h1>
<SiteLinksSearchBoxJsonLd
  url="https://www.example.com"
  potentialActions={[
    {
      target: 'https://query.example.com/search?q',
      queryInput: 'search_term_string',
    },
    {
      target: 'android-app://com.example/https/query.example.com/search/?q',
      queryInput: 'search_term_string',
    },
  ]}
/>

Required properties

| Property | Info | | ----------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | url | URL of the website associated with the sitelinks searchbox | | potentialActions | Array of one or two SearchAction objects. Describes the URI to send the query to, and the syntax of the request that is sent | | potentialActions.target | For websites, the URL of the handler that should receive and handle the search query; for apps, the URI of the intent handler for your search engine that should handle queries | | potentialActions.queryInput | Placeholder used in target, gets substituted for user given query |

Read the documentation

Course

<script>

  import { CourseJsonLd } from 'somerset';

</script>

<h1>Course JSON-LD</h1>
<CourseJsonLd
  courseName="Course Name"
  description="Introductory CS course laying out the basics."
  provider={{
    name: 'Course Provider',
    url: 'https//www.example.com/provider',
  }}
/>

Required properties

| Property | Info | | --------------- | ------------------------------------------------------------ | | courseName | The title of the course. | | description | A description of the course. Display limit of 60 characters. | | provider.name | The course provider name. | | provider.url | The course provider name url. |

Recommended properties

| Property | Info | | ------------- | ------------------------------- | | providerUrl | The url to the course provider. |

Dataset

<script>

  import { DatasetJsonLd } from 'somerset';

</script>

<h1>Dataset JSON-LD</h1>
<DatasetJsonLd
  description="The description needs to be at least 50 characters long"
  name="name of the dataset"
  license="https//www.example.com"
/>

Required properties

| Property | Info | | ------------- | --------------------------------------------------------------------------------- | | description | A short summary describing a dataset. Needs to be between 50 and 5000 characters. | | name | A license under which the dataset is distributed. |

Recommended properties

| Property | Info | | --------- | ------------------------------- | | license | The url to the course provider. |

Corporate Contact

<script>

  import { CorporateContactJsonLd } from 'somerset';

</script>

<h1>Corporate Contact JSON-LD</h1>
<CorporateContactJsonLd
  url="http://www.your-company-site.com"
  logo="http://www.example.com/logo.png"
  contactPoint={[
    {
      telephone: '+1-401-555-1212',
      contactType: 'customer service',
      email: '[email protected]',
      areaServed: 'US',
      availableLanguage: ['English', 'Spanish', 'French'],
    },
    {
      telephone: '+1-877-746-0909',
      contactType: 'customer service',
      email: '[email protected]',
      contactOption: 'TollFree',
      availableLanguage: 'English',
    },
    {
      telephone: '+1-877-453-1304',
      contactType: 'technical support',
      contactOption: 'TollFree',
      areaServed: ['US', 'CA'],
      availableLanguage: ['English', 'French'],
    },
  ]}
/>

Required properties

| Property | Info | | -------------------------- | ----------------------------------------------------------------------------------------------- | | url | Url to the home page of the company's official site. | | contactPoint | | | contactPoint.telephone | An internationalized version of the phone number, starting with the "+" symbol and country code | | contactPoint.contactType | Description of the purpose of the phone number i.e. Technical Support. |

Recommended ContactPoint properties

| Property | Info | | -------------------------------- | ---------------------------------------------------------------------------------------------------------- | | contactPoint.areaServed | String or Array of geographical regions served by the business. Example "US" or ["US", "CA", "MX"] | | contactPoint.availableLanguage | Details about the language spoken. Example "English" or ["English", "French"] | | contactPoint.email | Email asscosiated with the business| |gecontactPointo.contactOption | Details about the phone number. Example"TollFree"` |

FAQ Page

<script>

  import { FAQPageJsonLd } from 'somerset';

</script>

<h1>FAQ Page JSON-LD</h1>
<FAQPageJsonLd
  mainEntity={[
    {
      questionName: 'How long is the delivery time?',
      acceptedAnswerText: '3-5 business days.',
    },
    {
      questionName: 'Where can I find information about product recalls?',
      acceptedAnswerText: 'Read more on under information.',
    },
  ]}
/>

Required properties

| Property | Info | | ------------------------------- | ----------------------------------------------------------------------------- | | mainEntity | | | mainEntity.questionName | The full text of the question. For example, "How long is the delivery time?". | | mainEntity.acceptedAnswerText | The full answer to the question. |

How-to

<script>

  import { HowToJsonLd } from 'somerset';

</script>

<h1>How-to JSON-LD</h1>
<HowToJsonLd
  name="How to tile a kitchen backsplash"
  image="https://example.com/photos/1x1/photo.jpg"
  estimatedCost={{ currency: 'USD', value: '100' }}
  supply={['tiles', 'thin-set', 'mortar', 'tile grout', 'grout sealer']}
  tool={['notched trowel', 'bucket', 'large sponge']}
  step={[
    {
      url: 'https://example.com/kitchen#step1',
      name: 'Prepare the surfaces',
      itemListElement: [
        {
          type: 'HowToTip',
          text: 'Turn off the power to the kitchen and then remove everything that is on the wall, such as outlet covers, switchplates, and any other item in the area that is to be tiled.',
        },
        {
          type: 'HowToDirection',
          text: 'Then clean the surface thoroughly to remove any grease or other debris and tape off the area.',
        },
      ],
      image: 'https://example.com/photos/1x1/photo-step1.jpg',
    },
  ]}
  totalTime="P2D"
/>

Required properties

| Property | Info | | -------- | ---------------------------------------------------------------------------------- | | name | Name of the HowTo | | step | An array of HowToStep elements which comprise the full instructions of the how-to. |

Supported properties

| Property | Info | | --------------- | ---------------------------------------------------------------------------------------------------------------------------------------- | | estimatedCost | The estimated cost of the supplies consumed when performing instructions. | | image | Image of the completed how-to. | | supply | A supply consumed when performing instructions or a direction. | | tool | An object used (but not consumed) when performing instructions or a direction. | | totalTime | The total time required to perform all instructions or directions (including time to prepare the supplies), in ISO 8601 duration format. |

Job Posting

<script>

  import { JobPostingJsonLd } from 'somerset';

</script>

<h1>Job Posting JSON-LD</h1>
<JobPostingJsonLd
  datePosted="2020-01-06T03:37:40Z"
  description="Company is looking for a software developer...."
  hiringOrganization={{
    name: 'company name',
    sameAs: 'www.company-website-url.dev',
  }}
  jobLocation={{
    streetAddress: '17 street address',
    addressLocality: 'Paris',
    addressRegion: 'Ile-de-France',
    postalCode: '75001',
    addressCountry: 'France',
  }}
  title="Job Title"
  baseSalary={{
    currency: 'EUR',
    value: 40, // Can also be a salary range, like [40, 50]
    unitText: 'HOUR',
  }}
  employmentType="FULL_TIME"
  jobLocationType="TELECOMMUTE"
  validThrough="2020-01-06"
  applicantLocationRequirements="FR"
  experienceRequirements={{
    occupational: {
      minimumMonthsOfExperience: 12,
    },
    educational: {
      credentialCategory: 'high school',
    },
    experienceInPlaceOfEducation: true,
  }}
/>

Required properties

| Property | Info | | --------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ | | datePosted | The original date that employer posted the job in ISO 8601 format | | description | The full description of the job in HTML format | | hiringOrganization | An object containing information about the company hiring with the following fields or the string 'confidential' when hiring anonymously | | hiringOrganization.name | Name of the company offering the job position | | hiringOrganization.sameAs | URL of a reference Web page | | title | The title of the job (not the title of the posting) | | validThrough | The date when the job posting will expire in ISO 8601 format |

Supported properties

| Property | Info | | --------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | applicantLocationRequirements | The geographic location(s) in which employees may be located for to be eligible for the remote job | | baseSalary | | | baseSalary.currency | The currency in which the monetary amount is expressed | | baseSalary.value | The value of the quantitative value. You can also provide an array of minimum and maximum salaries. . | | baseSalary.unitText | A string indicating the unit of measurement Base salary guideline | | employmentType | Type of employment Employement type guideline | | jobLocation | The physical location(s) of the business where the employee will report to work (such as an office or worksite), not the location where the job was posted. | | jobLocation.streetAddress | The street address. For example, 1600 Amphitheatre Pkwy | | jobLocation.addressLocality | The locality. For example, Mountain View. | | jobLocation.addressRegion | The region. For example, CA. | | jobLocation.postalCode | The postal code. For example, 94043 | | jobLocation.addressCountry | The country. For example, USA. You can also provide the two-letter ISO 3166-1 alpha-2 country code. | | jobLocationType | A description of the job location Job Location type guideline | | hiringOrganization.logo | Logos on third-party job sites Hiring Organization guideline | | experienceRequirements.occupational.minimumMonthsOfExperience | The minimum number of months of experience that are required for the job posting. Experience and Education Requirements | | experienceRequirements.educational.credentialCategory | The level of education that's required for the job posting. Use one of the following: high school, associate degree, bachelor degree, professional certificate, postgraduate degree | | experienceRequirements.experienceInPlaceOfEducation | Boolean: If set to true, this property indicates whether a job posting will accept experience in place of its formal educational qualifications. If set to true, you must include both the experienceRequirements and educationRequirements properties. |

Local Business

Local business is supported with a sub-set of properties.

<LocalBusinessJsonLd
  type="Store"
  id="http://davesdeptstore.example.com"
  name="Dave's Department Store"
  description="Dave's latest department store in San Jose, now open"
  url="http://www.example.com/store-locator/sl/San-Jose-Westgate-Store/1427"
  telephone="+14088717984"
  address={{
    streetAddress: '1600 Saratoga Ave',
    addressLocality: 'San Jose',
    addressRegion: 'CA',
    postalCode: '95129',
    addressCountry: 'US',
  }}
  geo={{
    latitude: '37.293058',
    longitude: '-121.988331',
  }}
  images={[
    'https://example.com/photos/1x1/photo.jpg',
    'https://example.com/photos/4x3/photo.jpg',
    'https://example.com/photos/16x9/photo.jpg',
  ]}
  sameAs={[
    'www.company-website-url1.dev',
    'www.company-website-url2.dev',
    'www.company-website-url3.dev',
  ]}
  openingHours={[
    {
      opens: '08:00',
      closes: '23:59',
      dayOfWeek: [
        'Monday',
        'Tuesday',
        'Wednesday',
        'Thursday',
        'Friday',
        'Saturday',
      ],
      validFrom: '2019-12-23',
      validThrough: '2020-04-02',
    },
    {
      opens: '14:00',
      closes: '20:00',
      dayOfWeek: 'Sunday',
      validFrom: '2019-12-23',
      validThrough: '2020-04-02',
    },
  ]}
  rating={{
    ratingValue: '4.5',
    ratingCount: '2',
  }}
  review={[
    {
      author: 'John Doe',
      datePublished: '2006-05-04',
      name: 'A masterpiece of literature',
      reviewBody:
        'I really enjoyed this book. It captures the essential challenge people face as they try make sense of their lives and grow to adulthood.',
      reviewRating: {
        bestRating: '5',
        worstRating: '1',
        reviewAspect: 'Ambiance',
        ratingValue: '4',
      },
    },
    {
      author: 'Bob Smith',
      datePublished: '2006-06-15',
      name: 'A good read.',
      reviewBody: "Catcher in the Rye is a fun book. It's a good book to read.",
      reviewRating: {
        ratingValue: '4',
      },
    },
  ]}
  makesOffer={[
    {
      priceSpecification: {
        type: 'UnitPriceSpecification',
        priceCurrency: 'EUR',
        price: '1000-10000',
      },
      itemOffered: {
        name: 'Motion Design Services',
        description:
          'We are the expert of animation and motion design productions.',
      },
    },
    {
      priceSpecification: {
        type: 'UnitPriceSpecification',
        priceCurrency: 'EUR',
        price: '2000-10000',
      },
      itemOffered: {
        name: 'Branding Services',
        description:
          'Real footage is a powerful tool when it comes to show what the business is about. Can be used to present your company, show your factory, promote a product packshot, or just tell any story. It can help create emotional links with your audience by showing punchy images.',
      },
    },
  ]}
  areaServed={[
    {
      geoMidpoint: {
        latitude: '41.108237',
        longitude: '-80.642982',
      },
      geoRadius: '1000',
    },
    {
      geoMidpoint: {
        latitude: '51.108237',
        longitude: '-80.642982',
      },
      geoRadius: '1000',
    },
  ]}
  action={{
    actionName: 'potentialAction',
    actionType: 'ReviewAction',
    target: 'https://www.example.com/review/this/business',
  }}
/>

Required properties

| Property | Info | | ------------------------- | -------------------------------------------------------------------------- | | @id | Globally unique ID of the specific business location in the form of a URL. | | type | LocalBusiness or any sub-type | | address | Address of the specific business location | | address.addressCountry | The 2-letter ISO 3166-1 alpha-2 country code | | address.addressLocality | City | | address.addressRegion | State or province, if applicable. | | address.postalCode | Postal or zip code. | | address.streetAddress | Street number, street name, and unit number. | | name | Business name. |

Supported properties

| Property | Info | | --------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- | | description | Description of the business location | | geo | Geographic coordinates of the business. | | geo.latitude | The latitude of the business location | | geo.longitude | The longitude of the business location | | rating | The average rating of business based on multiple ratings or reviews. | | rating.ratingValue | The rating for the content. | | rating.ratingCount | The count of total number of ratings. | | priceRange | The relative price range of the business. | | servesCuisine | The type of cuisine the restaurant serves. | | images | An image or images of the business. Required for valid markup depending on the type | | telephone | A business phone number meant to be the primary contact method for customers. | | url | The fully-qualified URL of the specific business location. | | sameAs | An array of URLs that represent this business | | openingHours | Opening hour specification of business. You can provide this as a single object, or an array of objects with the properties below. | | openingHours.opens | The opening hour of the place or service on the given day(s) of the week. | | openingHours.closes | The closing hour of the place or service on the given day(s) of the week. | | openingHours.dayOfWeek | The day of the week for which these opening hours are valid. Can be a string or array of strings. Refer to DayOfWeek | | openingHours.validFrom | The date when the item becomes valid. | | openingHours.validThrough | The date after when the item is not valid. | | review | A review of the local business. | | review.author | The author of this content or rating.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

Somerset

Table of Contents

Usage

Setup

Add SEO to Page

Handling Global SEO Data

Somerset Options

Title Template

Default Title

No Index

No Follow

robotsProps

Twitter

facebook

Canonical URL

Alternate

Additional Meta Tags

Additional Link Tags

Open Graph

Open Graph Examples

Basic

Video

Audio

Article

Book

Profile

JSON-LD

JSON-LD Security

Handling multiple instances

Article

Breadcrumb

Blog

Recipe

Sitelinks Search Box

Course

Dataset

Corporate Contact

FAQ Page

How-to

Job Posting

Local Business