npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@svelte-bin/seo

v0.0.1

Published

Enhance the search engine and social media optimization of your Svelte application effortlessly using SEO. This user-friendly and potent package streamlines the process by incorporating crucial elements such as meta tags, Open Graph, Twitter Card tags, an

Downloads

3

Readme

@svelte-bin/seo

Enhance the search engine and social media optimization of your Svelte application effortlessly using SEO. This user-friendly and potent package streamlines the process by incorporating crucial elements such as meta tags, Open Graph, Twitter Card tags, and JSON-LD into your pages. Elevate your website's visibility and search result ranking with Svelte SEO.

Installation

npm install -D @svelte-bin/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-bin/seo';
</script>

<SvelteSeo title="Simple page title" description="Simple description about a page" />

Advanced Usage

<script>
	import { SvelteSeo } from '@svelte-bin/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'
	}}
/>

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'
}}