@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
2
Maintainers
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/.
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={{
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'
}}