svelte-meta-tags 3.0.4 → 3.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/README.md +53 -22
  2. package/dist/JsonLd.svelte.d.ts +1 -1
  3. package/dist/MetaTags.svelte +8 -1
  4. package/dist/MetaTags.svelte.d.ts +2 -1
  5. package/dist/types.d.ts +1 -0
  6. package/package.json +10 -9
package/README.md CHANGED
@@ -125,50 +125,80 @@ pnpm add -D svelte-meta-tags
125
125
 
126
126
  **Overwriting default values with a child page:**
127
127
 
128
+ [Example](https://github.com/oekazuma/svelte-meta-tags/tree/main/example)
129
+
128
130
  `+layout.svelte`
129
131
 
130
132
  ```svelte
131
133
  <script>
132
- import { MetaTags } from 'svelte-meta-tags'; // Import the MetaTags component.
133
- import { page } from '$app/stores'; // Import the page store to access route-specific data.
134
+ import { MetaTags } from 'svelte-meta-tags';
135
+ import { page } from '$app/stores';
136
+ import extend from 'just-extend'; // Please provide functions that allow deep merging of objects, such as lodash.merge, deepmerge, just-extend.
134
137
 
135
- export let data; // Exported so that child components/pages can provide data.
138
+ export let data;
136
139
 
137
- // Create a reactive statement to compute meta tags.
138
- $: metaTags = {
139
- titleTemplate: '%s | Svelte Meta Tags', // Default title template.
140
- description: 'Default Description for the Website', // Default description.
141
- ...$page.data.metaTagsChild // Override with child page meta tags if they exist.
142
- };
140
+ $: metaTags = extend(true, {}, data.baseMetaTags, $page.data.pageMetaTags);
143
141
  </script>
144
142
 
145
143
  <MetaTags {...metaTags} />
146
144
 
147
- <!-- The rest of your layout content and the slot for child content would go here. -->
145
+ <slot />
148
146
  ```
149
147
 
150
- `+page.ts`
148
+ `+layout.ts`
151
149
 
152
150
  ```ts
153
- import type { MetaTagsProps } from 'svelte-meta-tags'; // Import type for meta tags properties.
154
-
155
- export const load = async ({ url }) => {
156
- // Define meta tags for this specific child page.
157
- const metaTags: MetaTagsProps = Object.freeze({
158
- title: 'page title', // Page-specific title.
159
- description: 'Description for Child Page', // This description will override the default.
151
+ import type { MetaTagsProps } from 'svelte-meta-tags';
152
+
153
+ export const load = ({ url }) => {
154
+ const baseMetaTags = Object.freeze({
155
+ title: 'Default',
156
+ titleTemplate: '%s | Svelte Meta Tags',
157
+ description: 'Svelte Meta Tags is a Svelte component for managing meta tags and SEO in your Svelte applications.',
158
+ canonical: new URL(url.pathname, url.origin).href,
160
159
  openGraph: {
161
- // OpenGraph meta tags specific to this page.
162
160
  type: 'website',
163
161
  url: new URL(url.pathname, url.origin).href,
164
162
  locale: 'en_IE',
165
163
  title: 'Open Graph Title',
166
- description: 'Open Graph Description'
164
+ description: 'Open Graph Description',
165
+ siteName: 'SiteName',
166
+ images: [
167
+ {
168
+ url: 'https://www.example.ie/og-image.jpg',
169
+ alt: 'Og Image Alt',
170
+ width: 800,
171
+ height: 600,
172
+ secureUrl: 'https://www.example.ie/og-image.jpg',
173
+ type: 'image/jpeg'
174
+ }
175
+ ]
176
+ }
177
+ }) satisfies MetaTagsProps;
178
+
179
+ return {
180
+ baseMetaTags
181
+ };
182
+ };
183
+ ```
184
+
185
+ `+page.ts`
186
+
187
+ ```ts
188
+ import type { MetaTagsProps } from 'svelte-meta-tags';
189
+
190
+ export const load = () => {
191
+ const pageMetaTags = Object.freeze({
192
+ title: 'TOP',
193
+ description: 'Description TOP',
194
+ openGraph: {
195
+ title: 'Open Graph Title TOP',
196
+ description: 'Open Graph Description TOP'
167
197
  }
168
- });
198
+ }) satisfies MetaTagsProps;
169
199
 
170
200
  return {
171
- metaTagsChild: metaTags // Return meta tags so they can be consumed by layout.svelte.
201
+ pageMetaTags
172
202
  };
173
203
  };
174
204
  ```
@@ -183,6 +213,7 @@ export const load = async ({ url }) => {
183
213
  | `additionRobotsProps` | Object | Set the additional meta information for the `X-Robots-Tag` [More Info](#additionalRobotsProps) |
184
214
  | `description` | string | Sets the meta description of the page |
185
215
  | `canonical` | string | Make the page canonical URL |
216
+ | `keywords` | array | Sets the meta keywords of the page |
186
217
  | `mobileAlternate.media` | string | Set the screen size from which the mobile site will be served |
187
218
  | `mobileAlternate.href` | string | Set the alternate URL for the mobile page |
188
219
  | `languageAlternates` | array | Set the language of the alternate urls. Expects array of objects with the shape: `{ hrefLang: string, href: string }` |
package/dist/JsonLd.svelte.d.ts CHANGED
@@ -14,5 +14,5 @@ type JsonLdProps_ = typeof __propDef.props;
14
14
  export { JsonLdProps_ as JsonLdProps };
15
15
  export type JsonLdEvents = typeof __propDef.events;
16
16
  export type JsonLdSlots = typeof __propDef.slots;
17
- export default class JsonLd extends SvelteComponentTyped<JsonLdProps, JsonLdEvents, JsonLdSlots> {
17
+ export default class JsonLd extends SvelteComponentTyped<JsonLdProps_, JsonLdEvents, JsonLdSlots> {
18
18
  }
package/dist/MetaTags.svelte CHANGED
@@ -9,6 +9,7 @@ export let twitter = void 0;
9
9
  export let facebook = void 0;
10
10
  export let openGraph = void 0;
11
11
  export let canonical = void 0;
12
+ export let keywords = void 0;
12
13
  export let additionalMetaTags = void 0;
13
14
  export let additionalLinkTags = void 0;
14
15
  $:
@@ -34,7 +35,9 @@ $:
34
35
  </script>
35
36
 
36
37
  <svelte:head>
37
- <title>{updatedTitle}</title>
38
+ {#if updatedTitle}
39
+ <title>{updatedTitle}</title>
40
+ {/if}
38
41
 
39
42
  {#if robots !== false}
40
43
  <meta name="robots" content="{robots}{robotsParams}" />
@@ -48,6 +51,10 @@ $:
48
51
  <link rel="canonical" href={canonical} />
49
52
  {/if}
50
53
 
54
+ {#if keywords?.length}
55
+ <meta name="keywords" content={keywords.join(', ')} />
56
+ {/if}
57
+
51
58
  {#if mobileAlternate}
52
59
  <link rel="alternate" media={mobileAlternate.media} href={mobileAlternate.href} />
53
60
  {/if}
package/dist/MetaTags.svelte.d.ts CHANGED
@@ -13,6 +13,7 @@ declare const __propDef: {
13
13
  facebook?: MetaTagsProps['facebook'];
14
14
  openGraph?: MetaTagsProps['openGraph'];
15
15
  canonical?: MetaTagsProps['canonical'];
16
+ keywords?: MetaTagsProps['keywords'];
16
17
  additionalMetaTags?: MetaTagsProps['additionalMetaTags'];
17
18
  additionalLinkTags?: MetaTagsProps['additionalLinkTags'];
18
19
  };
@@ -25,5 +26,5 @@ type MetaTagsProps_ = typeof __propDef.props;
25
26
  export { MetaTagsProps_ as MetaTagsProps };
26
27
  export type MetaTagsEvents = typeof __propDef.events;
27
28
  export type MetaTagsSlots = typeof __propDef.slots;
28
- export default class MetaTags extends SvelteComponentTyped<MetaTagsProps, MetaTagsEvents, MetaTagsSlots> {
29
+ export default class MetaTags extends SvelteComponentTyped<MetaTagsProps_, MetaTagsEvents, MetaTagsSlots> {
29
30
  }
package/dist/types.d.ts CHANGED
@@ -163,6 +163,7 @@ export interface MetaTagsProps {
163
163
  openGraph?: OpenGraph;
164
164
  additionalMetaTags?: ReadonlyArray<MetaTag>;
165
165
  additionalLinkTags?: ReadonlyArray<LinkTag>;
166
+ keywords?: ReadonlyArray<string>;
166
167
  }
167
168
 
168
169
  export interface JsonLdProps {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "svelte-meta-tags",
3
- "version": "3.0.4",
3
+ "version": "3.1.1",
4
4
  "description": "Svelte Meta Tags provides components designed to help you manage SEO for Svelte projects",
5
5
  "license": "MIT",
6
6
  "type": "module",
@@ -21,15 +21,16 @@
21
21
  "schema-dts": "^1.1.2"
22
22
  },
23
23
  "devDependencies": {
24
- "@sveltejs/adapter-auto": "^2.1.0",
25
- "@sveltejs/kit": "^1.25.0",
26
- "@sveltejs/package": "^2.2.2",
27
- "publint": "^0.2.2",
28
- "svelte": "^4.2.0",
29
- "svelte-check": "^3.5.2",
24
+ "@sveltejs/adapter-auto": "^3.1.1",
25
+ "@sveltejs/kit": "^2.5.2",
26
+ "@sveltejs/package": "^2.2.7",
27
+ "@sveltejs/vite-plugin-svelte": "^3.0.2",
28
+ "publint": "^0.2.7",
29
+ "svelte": "^4.2.12",
30
+ "svelte-check": "^3.6.6",
30
31
  "tslib": "^2.6.2",
31
- "typescript": "^5.2.2",
32
- "vite": "^4.4.9"
32
+ "typescript": "^5.3.3",
33
+ "vite": "^5.1.4"
33
34
  },
34
35
  "peerDependencies": {
35
36
  "svelte": "^3.55.0 || ^4.0.0"