Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/artiebits/svelte-seo
Optimize your website for search engines and social media with meta tags, Open Graph, and JSON-LD.
https://github.com/artiebits/svelte-seo
json-ld meta-tags open-graph open-graph-tags sapper search-engines seo ssr svelte svelte-kit
Last synced: 6 days ago
JSON representation
Optimize your website for search engines and social media with meta tags, Open Graph, and JSON-LD.
- Host: GitHub
- URL: https://github.com/artiebits/svelte-seo
- Owner: artiebits
- License: mit
- Created: 2020-08-03T17:49:06.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2024-09-26T20:37:41.000Z (about 1 month ago)
- Last Synced: 2024-10-13T18:08:54.861Z (23 days ago)
- Topics: json-ld, meta-tags, open-graph, open-graph-tags, sapper, search-engines, seo, ssr, svelte, svelte-kit
- Language: JavaScript
- Homepage: https://artiebits.com
- Size: 404 KB
- Stars: 442
- Watchers: 6
- Forks: 24
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# Svelte SEO
Optimize your Svelte app for search engines and social media with meta tags, Open Graph, and JSON-LD.
Svelte SEO is a powerful and easy-to-use package designed to optimize your Svelte app for search engines and social media. By adding essential meta tags, Open Graph, Twitter Card tags, and JSON-LD to your pages, Svelte SEO improves your website's visibility and ranking in search results.
**Sponsor Svelte SEO**
If you rely on Svelte SEO and find it useful, please consider supporting it. Maintaining an open source project takes time and your support would be greatly appreciated.
- [Installation](#installation)
- [Usage](#usage)
- [Basic Usage](#basic-usage)
- [Advanced Usage](#advanced-usage)
- [Svelte SEO Properties](#svelte-seo-properties)
- [Open Graph](#open-graph)
- [Twitter](#twitter)
- [Facebook](#facebook)
- [JSON-LD](#json-ld)
- [Setting Default SEO Properties](#setting-default-seo-properties)
- [Acknowledgements](#acknowledgements)
- [License](#license)
## Installation
- npm
`npm install -D svelte-seo`
- or yarn
`yarn add -D svelte-seo`
- or pnpm
`pnpm add -D svelte-seo`
## Usage
### Basic Usage
To add basic meta tags like "title" and "description" you can import the package and use it like this:
```svelte
import SvelteSeo from "svelte-seo";
```
### Advanced Usage
You can provide additional properties to SvelteSeo component. Here is an example:
```svelte
import SvelteSeo from "svelte-seo";
```
## Svelte SEO 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`](./src/lib/types.d.ts) | Properties about videos related to the web page. |
| openGraph.music | [`OpenGraphMusic`](./src/lib/types.d.ts) | OpenGraph for music files. |
| openGraph.movie | [`OpenGraphMovie`](./src/lib/types.d.ts) | OpenGraph for a movie. |
| openGraph.article | [`OpenGraphArticle`](./src/lib/types.d.ts) | OpenGraph for an article. |
| openGraph.book | [`OpenGraphBook`](./src/lib/types.d.ts) | OpenGraph for a book. |
| openGraph.profile | [`OpenGraphProfile`](./src/lib/types.d.ts) | 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.
```svelte
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
```svelte
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:
```svelte
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",
}}
```
## Setting Default SEO Properties
You can set default SEO properties that will appear on every page without needing to add them individually. Common meta tags like `theme-color`, `manifest`, and `base` can be present on every page. If you configure the Svelte SEO in your `+layout.svelte`, these properties will stay fixed for every page. They can be changed on a per-page basis if necessary. For more information on using layouts and routing with SvelteKit, please refer to the official documentation at https://kit.svelte.dev/docs/routing#layout.
## Acknowledgements
This is inspired by [Next SEO](https://github.com/garmeeh/next-seo) by [@garmeeh](https://github.com/garmeeh).
## License
MIT