sk-seo

0.2.6 • Public • Published

sk-seo logo

A dead simple, no dependencies, svelte component that automates a lot of the annoying SEO parts for you. Also optionally includes functionality for social media preview support

minzip size installs GitHub Repo stars GitHub followers

Installation

npm i -D sk-seo

Usage

import the file

<script>
  import Seo from 'sk-seo';
</script>

Then place this code anywhere in your svelte file

<Seo 
  title="Contact"
  description="Where to contact Dahoom AlShaya, whether for business needs or general inquiries"
  keywords="Contact, business, inquiries"
/>

Standard Parameters

Parameter Description Type Default
title The title of the page string ~
description The description of the page string ~
keywords The keywords to be used for search engine optimization or search string ~
index Whether or not crawlers should crawl this page boolean true

Advanced

All these choices are optional

Parameter Description Type Default
siteName The name of the site string ~
canonical Current URL of the page. For resolving duplicate pages with SEO string ~
twitter Indicates whether Twitter meta tags should be generated boolean true
openGraph Indicates whether og / OpenGraph meta tags should be generated boolean true
schemaOrg Indicates whether jsonLd/SchemaOrg meta script should be generated boolean false
imageURL The URL of the image to be used for preview (twitter, discord image preview when your url is shared) string ~
logo The logo image URL for SchemaOrg string ~
author Represents the author of the page string ~
socials An array of social media links for SchemaOrg Array ~
name The name to be used for SchemaOrg string ~

How it works

The component uses <svelte:head> to put meta tags that are filled with sveltekit $page and inputted variables so for example:

<meta property="og:url" content="{$page.url}">

Extendable

If you want to use an unusual meta tag or use your own custom one (eg: google site verification). It's easy as:

<Seo title="abc" description="def">
  <meta name="google-site-verification" content="abcd123">
</Seo>

Why

A lot of SEO is repeated boilerplate for twitter, open graph and schemaOrg. This component's sole purpose is to do away with all the annoyances and just help you focus on your content without having to spend hours making sure all the meta tags are correctly set on each and every page.

I initially made this for my personal website and decided to open source it to so that no one has to go through the headache I did to make sure everything is functional.

keywords?!

It's optional for anyone who wants to use it. Google doesn't rely on keywords anymore but apparently bing still does put a tiny weight on it. I personally use keywords for my personal website's search function.

License

MIT License

Credits

Thanks to RodneyLab for his blog post which taught me about jsonLd and for suggesting an interesting snippet of code to render jsonLd

As seen on

Svelte Blog The Guardian New York Times

Package Sidebar

Install

npm i sk-seo

Weekly Downloads

50

Version

0.2.6

License

MIT

Unpacked Size

10.8 kB

Total Files

5

Last publish

Collaborators

  • dahoom