{"id":24894937,"url":"https://github.com/thedahoom/sveltekit-seo","last_synced_at":"2025-04-12T19:47:50.129Z","repository":{"id":231772193,"uuid":"782682921","full_name":"TheDahoom/Sveltekit-seo","owner":"TheDahoom","description":"Sveltekit SEO component to save your time","archived":false,"fork":false,"pushed_at":"2025-01-11T18:40:01.000Z","size":112,"stargazers_count":134,"open_issues_count":0,"forks_count":5,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-04-04T05:45:52.403Z","etag":null,"topics":["component","dependency-free","jsonld","lightweight","no-dependencies","seo","seo-optimization","svelte","sveltekit"],"latest_commit_sha":null,"homepage":"https://skseo.dev","language":"Svelte","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/TheDahoom.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-04-05T19:53:26.000Z","updated_at":"2025-03-13T14:36:40.000Z","dependencies_parsed_at":null,"dependency_job_id":"ae818564-d8f4-44c5-8f70-1fed746ff8a3","html_url":"https://github.com/TheDahoom/Sveltekit-seo","commit_stats":null,"previous_names":["thedahoom/sveltekit-seo"],"tags_count":31,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TheDahoom%2FSveltekit-seo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TheDahoom%2FSveltekit-seo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TheDahoom%2FSveltekit-seo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TheDahoom%2FSveltekit-seo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/TheDahoom","download_url":"https://codeload.github.com/TheDahoom/Sveltekit-seo/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248625497,"owners_count":21135513,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["component","dependency-free","jsonld","lightweight","no-dependencies","seo","seo-optimization","svelte","sveltekit"],"created_at":"2025-02-01T19:15:09.207Z","updated_at":"2025-04-12T19:47:50.106Z","avatar_url":"https://github.com/TheDahoom.png","language":"Svelte","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://github.com/TheDahoom/Sveltekit-seo/assets/105564371/bed144c2-6289-459c-8132-c40a6521a656\" alt=\"sk-seo logo\" /\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\nA dead simple, no dependencies, svelte component that automates a lot of the annoying SEO parts for you.\nAlso optionally includes functionality for social media preview support\n\u003c/p\u003e\n\n\u003cdiv align=\"center\"\u003e\n\n  [![Minzip size](https://img.shields.io/bundlephobia/minzip/sk-seo?style=for-the-badge)](https://img.shields.io/bundlephobia/minzip/sk-seo)\n  [![Installs](https://img.shields.io/npm/d18m/sk-seo?style=for-the-badge)](https://img.shields.io/npm/d18m/sk-seo)\n  [![GitHub Repo stars](https://img.shields.io/github/stars/TheDahoom/sveltekit-seo?style=for-the-badge\u0026label=STAR)](https://github.com/TheDahoom/Sveltekit-seo)\n  [![GitHub Forks](https://img.shields.io/github/forks/TheDahoom/sveltekit-seo?style=for-the-badge\u0026logo=github\u0026label=fork)](https://github.com/TheDahoom/Sveltekit-seo/fork)\n\n\u003c/div\u003e\n\n\n## Installation\n```bash \nnpm i -D sk-seo\n```\nIf you're using @adapter-static, make sure to follow \u003ca href=\"#prerendering\"\u003ethis\u003c/a\u003e\n## Usage\nAdd the component to your layout file (eg: `+layout.svelte`).\n```svelte\n\u003c!-- +layout.svelte --\u003e\n\u003cscript\u003e\n  import Seo from 'sk-seo';\n\u003c/script\u003e\n\n\u003cSeo /\u003e\n```\n\nAdd a `+layout.js` file alongside your `+layout.svelte` with a load function and return data with the \nSEO/Meta that you need:\n\u003e [!TIP]\n\u003e For type support follow this [guide](https://github.com/TheDahoom/Sveltekit-seo/wiki/v0.5--types)\n```js\n// +layout.js\nexport const load = async ({ url }) =\u003e {\n    // OPTIONAL: You can use url.origin to get the base URL, \n    // or even url.href to get the full URL.\n    // (For example, to get URLs of images in your /static folder), like this:\n    // imageURL: `${url.origin}/image.jpg`\n    return {\n        title: 'Dahoom - Official',\n        description: 'The official website of Dahoom',\n        keywords: 'dahoom, official, website'\n        // ... and more\n    }\n}\n```\n\n\u003e [!TIP]\n\u003e You can override your `+layout.js` meta from any `+page.js`.\n\nMake sure to add a `+page.js` with a load function to all your pages with the SEO/Meta that you need:\n```js\n// contacts/+page.js\nexport const load = async ({ url }) =\u003e {\n    // Title, description and keywords set here will replace the title set in +layout.js while visiting /contacts\n    return {\n        title: 'Contacts', \n        description: 'Where to contact Dahoom AlShaya, whether for business needs or general inquiries',\n        keywords: 'Contact, business, inquiries',\n    }\n}\n```\n\n\u003e [!TIP]\n\u003e This also works with `+layout.server.js` and `+page.server.js`.\n\n## Component method (Not recommended, duplicates meta tags)\nPut a `\u003cSeo /\u003e` tag in each page you want to have SEO for.\n\u003e [!WARNING]\n\u003e This's fine as long as you're making a single-page website (such as, just a homepage). But if you're making a \n\u003e multi-page website, you should use the previous method!\n```svelte\n\u003c!-- contacts/+page.svelte --\u003e\n\u003cscript\u003e\n  import Seo from 'sk-seo';\n\u003c/script\u003e\n\n\u003cSeo \n  title=\"Contact\"\n  description=\"Where to contact Dahoom AlShaya, whether for business needs or general inquiries\"\n  keywords=\"Contact, business, inquiries\"\n/\u003e\n```\n\n\u003e [!CAUTION]\n\u003e Using `\u003cSeo /\u003e` on each page will duplicate meta tags. This's why we recommend using the first method \n\u003e (`load` functions and `\u003cSeo /\u003e` only in your `+layout.svelte`).\n\n### Conflicting stores/load return values\n\nYou could even combine stores (with any name that you want, just make sure to use the same name that you return from \nyour `+layout.js/+page.js` load function) and manual input if you really have to:\n```svelte\n\u003c!-- +layout.svelte --\u003e\n\u003cscript\u003e\n  import Seo from 'sk-seo';\n  import { page } from '$app/stores';\n\u003c/script\u003e\n\n\u003cSeo \n  title={$page.data.customTitle ?? ''} \u003c!-- CUSTOM NAME: title now points to $page.data.customTitle store --\u003e\n  description=\"Where to contact Dahoom AlShaya, whether for business needs or general inquiries\"\n  keywords=\"Contact, business, inquiries\"\n/\u003e\n```\n\n## Standard Parameters\n| Parameter     | Description             | Type | Default             |\n| ------------- | ----------------------- | ------- | ----------------------- |\n| `title`| The title of the page | string | ~ |\n| `description`| The description of the page | string | ~ |\n| `keywords`| The keywords to be used for search engine optimization or search | string | ~ |\n| `index`| Whether or not crawlers should crawl this page | boolean | true |\n\n# Advanced\nAll these choices are optional\n| Parameter     | Description             | Type | Default             |\n| ------------- | ----------------------- | ------- | ----------------------- |\n| `siteName`| The name of the site | string | ~ |\n| `canonical`| Current URL of the page. For resolving duplicate pages with SEO | string | ~ |\n| `twitter`| Indicates whether Twitter meta tags should be generated | boolean | true |\n| `openGraph`| Indicates whether og / OpenGraph meta tags should be generated | boolean | true |\n| `schemaOrg`| Indicates whether jsonLd/SchemaOrg meta script should be generated | boolean | false |\n| `schemaType`| The type of jsonld schema (Person, Organisation, Create) @default Person,Organisation | string/Array | ['Person', 'Organisation'] |\n| `jsonld`| Appends contents to jsonld script (used by search engines for names, contact information, [etc](https://json-ld.org)) | object `{}` | ~ |\n| `imageURL`| The URL of the image to be used for preview (twitter, discord image preview when your url is shared) | string | ~ |\n| `logo`| The logo image URL for SchemaOrg | string | ~ |\n| `author`| Represents the author of the page | string | ~ |\n| `socials`| An array of social media links for SchemaOrg | Array | ~ |\n| `name`| The name to be used for SchemaOrg | string | ~ |\n| `type`| The type of the page (website, article, [etc](https://schema.org/docs/full.html)) | string | website |\n\n## How it works\nThe component uses `\u003csvelte:head\u003e` 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:\n```svelte\n\u003cmeta property=\"og:url\" content=\"{$page.url}\"\u003e\n```\nSince 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\n\n## Extendable\nIf you want to use an unusual meta tag or use your own custom one (eg: google site verification). It's easy as:\n```svelte\n\u003cSeo title=\"abc\" description=\"def\"\u003e\n  \u003cmeta name=\"google-site-verification\" content=\"abcd123\"\u003e\n\u003c/Seo\u003e\n```\n\n## Why\nA 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.\n\nI 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.\n\n## Prerendering\nIf 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`.\n```js\n// svelte.config.js\nconst config = {\n  kit: {\n    prerender: {\n      origin: 'https://mossberg.dev' // Replace with your URL.\n    }\n  }\n}\n```\n\n## Duplicated Meta?\nIf you're behind `Cloudflare` and find yourself with duplicated meta tags, then you should disable auto-minify!\n\n`Speed -\u003e Optimization -\u003e Content Optimization -\u003e Auto Minify -\u003e UNCHECK HTML`\n\n\u003e [!WARNING] \n\u003e Still having duplicated meta? Make sure that you're not using `\u003cSeo /\u003e` in each page.\n\n## Credits\n- 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!\n- Thanks to [ArchangelGCA](https://github.com/ArchangelGCA) for the multiple quality of life imporvements and fixes!\n- 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\n  \n## License\n[MIT License](https://github.com/TheDahoom/Sveltekit-seo/blob/main/LICENSE)\n\n## As seen on\n[Svelte Blog](https://svelte.dev/blog/whats-new-in-svelte-may-2024)\n[The Guardian](https://youtu.be/iik25wqIuFo)\n[New York Times](https://youtu.be/iik25wqIuFo)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthedahoom%2Fsveltekit-seo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthedahoom%2Fsveltekit-seo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthedahoom%2Fsveltekit-seo/lists"}