├── .github └── workflows │ └── npm-publish.yml ├── .gitignore ├── .npmignore ├── LICENSE ├── README.md ├── SEO.svelte ├── package.json └── types ├── SEO.svelte.d.ts └── SEO.ts /.github/workflows/npm-publish.yml: -------------------------------------------------------------------------------- 1 | name: Release and publish 2 | 3 | on: 4 | push: 5 | branches: 6 | - main 7 | - next 8 | 9 | jobs: 10 | publish-npm: 11 | runs-on: ubuntu-latest 12 | steps: 13 | - uses: actions/checkout@v3 14 | with: 15 | fetch-depth: 0 16 | - uses: actions/setup-node@v3 17 | with: 18 | node-version: 20 19 | registry-url: 'https://registry.npmjs.org' 20 | - name: Check if version has been incremented 21 | id: check-version 22 | run: | 23 | PACKAGE_NAME=$(node -p "require('./package.json').name") 24 | VERSION=$(node -p "require('./package.json').version") 25 | CURRENT_VERSION=$(npm view $PACKAGE_NAME version) 26 | if [ "$VERSION" != "$CURRENT_VERSION" ]; then 27 | echo "::set-output name=version_changed::true" 28 | echo "::set-output name=new_version::$VERSION" 29 | fi 30 | - name: Create GitHub release 31 | if: steps.check-version.outputs.version_changed == 'true' 32 | uses: actions/create-release@v1 33 | env: 34 | GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} 35 | with: 36 | tag_name: v${{ steps.check-version.outputs.new_version }} 37 | release_name: v${{ steps.check-version.outputs.new_version }} 38 | draft: false 39 | prerelease: ${{ contains(steps.check-version.outputs.new_version, '-') }} 40 | - name: Publish to npm 41 | if: steps.check-version.outputs.version_changed == 'true' 42 | run: | 43 | VERSION=$(node -p "require('./package.json').version") 44 | if [[ "$VERSION" == *"-"* ]]; then 45 | npm publish --tag next 46 | else 47 | npm publish 48 | fi 49 | env: 50 | NODE_AUTH_TOKEN: ${{secrets.npm_token}} -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | .github 2 | .gitignore 3 | test -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2024 Dahoom AlShaya 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

2 | sk-seo logo 3 |

4 | 5 |

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

9 | 10 |
11 | 12 | [![Minzip size](https://img.shields.io/bundlephobia/minzip/sk-seo?style=for-the-badge)](https://img.shields.io/bundlephobia/minzip/sk-seo) 13 | [![Installs](https://img.shields.io/npm/d18m/sk-seo?style=for-the-badge)](https://img.shields.io/npm/d18m/sk-seo) 14 | [![GitHub Repo stars](https://img.shields.io/github/stars/TheDahoom/sveltekit-seo?style=for-the-badge&label=STAR)](https://github.com/TheDahoom/Sveltekit-seo) 15 | [![GitHub Forks](https://img.shields.io/github/forks/TheDahoom/sveltekit-seo?style=for-the-badge&logo=github&label=fork)](https://github.com/TheDahoom/Sveltekit-seo/fork) 16 | 17 |
18 | 19 | 20 | ## Installation 21 | ```bash 22 | npm i -D sk-seo 23 | ``` 24 | If you're using @adapter-static, make sure to follow this 25 | ## Usage 26 | Add the component to your layout file (eg: `+layout.svelte`). 27 | ```svelte 28 | 29 | 32 | 33 | 34 | ``` 35 | 36 | Add a `+layout.js` file alongside your `+layout.svelte` with a load function and return data with the 37 | SEO/Meta that you need: 38 | > [!TIP] 39 | > For type support follow this [guide](https://github.com/TheDahoom/Sveltekit-seo/wiki/v0.5--types) 40 | ```js 41 | // +layout.js 42 | export const load = async ({ url }) => { 43 | // OPTIONAL: You can use url.origin to get the base URL, 44 | // or even url.href to get the full URL. 45 | // (For example, to get URLs of images in your /static folder), like this: 46 | // imageURL: `${url.origin}/image.jpg` 47 | return { 48 | title: 'Dahoom - Official', 49 | description: 'The official website of Dahoom', 50 | keywords: 'dahoom, official, website' 51 | // ... and more 52 | } 53 | } 54 | ``` 55 | 56 | > [!TIP] 57 | > You can override your `+layout.js` meta from any `+page.js`. 58 | 59 | Make sure to add a `+page.js` with a load function to all your pages with the SEO/Meta that you need: 60 | ```js 61 | // contacts/+page.js 62 | export const load = async ({ url }) => { 63 | // Title, description and keywords set here will replace the title set in +layout.js while visiting /contacts 64 | return { 65 | title: 'Contacts', 66 | description: 'Where to contact Dahoom AlShaya, whether for business needs or general inquiries', 67 | keywords: 'Contact, business, inquiries', 68 | } 69 | } 70 | ``` 71 | 72 | > [!TIP] 73 | > This also works with `+layout.server.js` and `+page.server.js`. 74 | 75 | ## Component method (Not recommended, duplicates meta tags) 76 | Put a `` tag in each page you want to have SEO for. 77 | > [!WARNING] 78 | > This's fine as long as you're making a single-page website (such as, just a homepage). But if you're making a 79 | > multi-page website, you should use the previous method! 80 | ```svelte 81 | 82 | 85 | 86 | 91 | ``` 92 | 93 | > [!CAUTION] 94 | > Using `` on each page will duplicate meta tags. This's why we recommend using the first method 95 | > (`load` functions and `` only in your `+layout.svelte`). 96 | 97 | ### Conflicting stores/load return values 98 | 99 | You could even combine stores (with any name that you want, just make sure to use the same name that you return from 100 | your `+layout.js/+page.js` load function) and manual input if you really have to: 101 | ```svelte 102 | 103 | 107 | 108 | 110 | description="Where to contact Dahoom AlShaya, whether for business needs or general inquiries" 111 | keywords="Contact, business, inquiries" 112 | /> 113 | ``` 114 | 115 | ## Standard Parameters 116 | | Parameter | Description | Type | Default | 117 | | ------------- | ----------------------- | ------- | ----------------------- | 118 | | `title`| The title of the page | string | ~ | 119 | | `description`| The description of the page | string | ~ | 120 | | `keywords`| The keywords to be used for search engine optimization or search | string | ~ | 121 | | `index`| Whether or not crawlers should crawl this page | boolean | true | 122 | 123 | # Advanced 124 | All these choices are optional 125 | | Parameter | Description | Type | Default | 126 | | ------------- | ----------------------- | ------- | ----------------------- | 127 | | `siteName`| The name of the site | string | ~ | 128 | | `canonical`| Current URL of the page. For resolving duplicate pages with SEO | string | ~ | 129 | | `twitter`| Indicates whether Twitter meta tags should be generated | boolean | true | 130 | | `openGraph`| Indicates whether og / OpenGraph meta tags should be generated | boolean | true | 131 | | `schemaOrg`| Indicates whether jsonLd/SchemaOrg meta script should be generated | boolean | false | 132 | | `schemaType`| The type of jsonld schema (Person, Organisation, Create) @default Person,Organisation | string/Array | ['Person', 'Organisation'] | 133 | | `jsonld`| Appends contents to jsonld script (used by search engines for names, contact information, [etc](https://json-ld.org)) | object `{}` | ~ | 134 | | `imageURL`| The URL of the image to be used for preview (twitter, discord image preview when your url is shared) | string | ~ | 135 | | `logo`| The logo image URL for SchemaOrg | string | ~ | 136 | | `author`| Represents the author of the page | string | ~ | 137 | | `socials`| An array of social media links for SchemaOrg | Array | ~ | 138 | | `name`| The name to be used for SchemaOrg | string | ~ | 139 | | `type`| The type of the page (website, article, [etc](https://schema.org/docs/full.html)) | string | website | 140 | 141 | ## How it works 142 | The component uses `` to place meta tags that are filled with sveltekit $page and inputted variables, this means that a lot of the tags are automatically filled for you for each page in your website. An example of this is `og:url`, which requires the url of the current page: 143 | ```svelte 144 | 145 | ``` 146 | Since v0.5 the component also makes use of `$page.data` **stores**. These will be automatically picked up by the component and used to fill in the meta tags 147 | 148 | ## Extendable 149 | If you want to use an unusual meta tag or use your own custom one (eg: google site verification). It's easy as: 150 | ```svelte 151 | 152 | 153 | 154 | ``` 155 | 156 | ## Why 157 | 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. 158 | 159 | 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. 160 | 161 | ## Prerendering 162 | If you are using adapter-static, you need to add your base URL in `svelte.config.js`, otherwise `$page.url` will default to `http://sveltekit-prerender`. 163 | ```js 164 | // svelte.config.js 165 | const config = { 166 | kit: { 167 | prerender: { 168 | origin: 'https://mossberg.dev' // Replace with your URL. 169 | } 170 | } 171 | } 172 | ``` 173 | 174 | ## Duplicated Meta? 175 | If you're behind `Cloudflare` and find yourself with duplicated meta tags, then you should disable auto-minify! 176 | 177 | `Speed -> Optimization -> Content Optimization -> Auto Minify -> UNCHECK HTML` 178 | 179 | > [!WARNING] 180 | > Still having duplicated meta? Make sure that you're not using `` in each page. 181 | 182 | ## Credits 183 | - Thanks to [GABRYCA](https://github.com/GABRYCA) for implementing a new cool new approach, svelte 5 and the multitude of additions that came with them! 184 | - Thanks to [ArchangelGCA](https://github.com/ArchangelGCA) for the multiple quality of life imporvements and fixes! 185 | - Thanks to [RodneyLab](https://github.com/rodneylab) for his [blog](https://rodneylab.com/adding-schema-org-markup-to-sveltekit-site/) post which taught me about jsonLd and for suggesting an interesting snippet of code to render jsonLd 186 | 187 | ## License 188 | [MIT License](https://github.com/TheDahoom/Sveltekit-seo/blob/main/LICENSE) 189 | 190 | ## As seen on 191 | [Svelte Blog](https://svelte.dev/blog/whats-new-in-svelte-may-2024) 192 | [The Guardian](https://youtu.be/iik25wqIuFo) 193 | [New York Times](https://youtu.be/iik25wqIuFo) 194 | -------------------------------------------------------------------------------- /SEO.svelte: -------------------------------------------------------------------------------- 1 | 45 | 46 | {#if title !== ""} 47 | {#if imageURL} 48 | 49 | {:else} 50 | 51 | {/if} 52 | {title} 53 | 54 | {/if} 55 | {#if description !== ""} 56 | 57 | {/if} 58 | {#if keywords !== ""} 59 | 60 | {/if} 61 | {#if author !== ""} 62 | 63 | {/if} 64 | {#if openGraph} 65 | {#if siteName !== ""} 66 | 67 | {/if} 68 | {#if title !== ""} 69 | 70 | 71 | 72 | {/if} 73 | {#if description !== ""} 74 | 75 | {/if} 76 | {#if imageURL !== ""} 77 | 78 | {/if} 79 | {#if logo !== ""} 80 | 81 | {/if} 82 | {/if} 83 | {#if twitter} 84 | {#if title !== ""} 85 | 86 | 87 | 88 | 89 | {/if} 90 | {#if description !== ""} 91 | 92 | {/if} 93 | {#if imageURL !== ""} 94 | 95 | {/if} 96 | {/if} 97 | 98 | {#if schemaOrg && (socials[0] !== undefined || logo !== "" || name !== "")} 99 | {@html LdScript} 100 | {/if} 101 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "sk-seo", 3 | "version": "0.5.4", 4 | "description": "A lightweight, no depenencies, Sveltekit SEO component to save your time", 5 | "main": "SEO.svelte", 6 | "exports": { 7 | ".": { 8 | "types": "./types/SEO.svelte.d.ts", 9 | "svelte": "./SEO.svelte" 10 | } 11 | }, 12 | "keywords": [ 13 | "lightweight", 14 | "sveltekit", 15 | "svelte", 16 | "seo", 17 | "jsonld", 18 | "depencency-free", 19 | "component", 20 | "seo-optimization", 21 | "no-dependencies", 22 | "automation" 23 | ], 24 | "repository": { 25 | "type": "git", 26 | "url": "git+https://github.com/TheDahoom/Sveltekit-seo.git" 27 | }, 28 | "author": "Dahoom AlShaya DahoomA@dahoom.com", 29 | "license": "MIT" 30 | } 31 | -------------------------------------------------------------------------------- /types/SEO.svelte.d.ts: -------------------------------------------------------------------------------- 1 | /** @typedef {import('./SEO').SEOProps} SeoProps */ 2 | /** @typedef {typeof __propDef.events} SeoEvents */ 3 | /** @typedef {typeof __propDef.slots} SeoSlots */ 4 | export default class Seo extends SvelteComponent; 6 | }, {}> { 7 | } 8 | export type SeoProps = import('./SEO').SEOProps; 9 | export type SeoEvents = typeof __propDef.events; 10 | export type SeoSlots = typeof __propDef.slots; 11 | //@ts-ignore 12 | import { SvelteComponent } from "svelte"; 13 | declare const __propDef: { 14 | props: SeoProps; 15 | events: { 16 | [evt: string]: CustomEvent; 17 | }; 18 | slots: {}; 19 | }; 20 | export { SeoProps as SEOProps }; 21 | -------------------------------------------------------------------------------- /types/SEO.ts: -------------------------------------------------------------------------------- 1 | export interface SEOProps { 2 | children?: any; 3 | /** The title of the page.*/ 4 | title?: string; 5 | /** The description of the website.*/ 6 | description?: string; 7 | /** (optional) The SEO keywords to be used for search engine optimization. */ 8 | keywords?: string; 9 | /** Current URL of the page. For resolving duplicate pages with SEO */ 10 | canonical?: string; 11 | /** The name of the site.*/ 12 | siteName?: string; 13 | /** Indicates whether the component should be indexed by search engines. 14 | @default true */ 15 | index?: boolean; 16 | /** Indicates whether Twitter meta tags should be generated.@default true */ 17 | twitter?: boolean; 18 | /** Indicates whether og / OpenGraph meta tags should be generated @default true*/ 19 | openGraph?: boolean; 20 | /** Indicates whether schema.org meta tags should be generated @default false */ 21 | schemaOrg?: boolean; 22 | /** The type of jsonld schema (Person, Organisation, Create) @default Person,Organisation */ 23 | schemaType?: string; 24 | /** JSON-LD schema.org data to be appended to existing jsonLd data */ 25 | jsonld?: {}; 26 | /** The URL of the image to be used for preview (twitter, discord image preview when your url is shared) */ 27 | imageURL?: string; 28 | /** The logo image URL for SchemaOrg */ 29 | logo?: string; 30 | /** Represents the author of the page */ 31 | author?: string; 32 | /** An array of social media links for SchemaOrg */ 33 | socials?: string[]; 34 | /** The name to be used for SchemaOrg */ 35 | name?: string; 36 | /** The type of the page */ 37 | type?: string; 38 | } --------------------------------------------------------------------------------