svelte-meta-tags 3.0.0 → 3.0.2
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.
- package/dist/MetaTags.svelte +20 -5
- package/dist/README.md +1168 -0
- package/dist/types.d.ts +19 -5
- package/package.json +2 -2
package/dist/MetaTags.svelte
CHANGED
|
@@ -221,15 +221,18 @@ $:
|
|
|
221
221
|
{#if image.height}
|
|
222
222
|
<meta property="og:image:height" content={image.height.toString()} />
|
|
223
223
|
{/if}
|
|
224
|
+
{#if image.secureUrl}
|
|
225
|
+
<meta property="og:image:secure_url" content={image.secureUrl.toString()} />
|
|
226
|
+
{/if}
|
|
227
|
+
{#if image.type}
|
|
228
|
+
<meta property="og:image:type" content={image.type.toString()} />
|
|
229
|
+
{/if}
|
|
224
230
|
{/each}
|
|
225
231
|
{/if}
|
|
226
232
|
|
|
227
233
|
{#if openGraph.videos && openGraph.videos.length}
|
|
228
234
|
{#each openGraph.videos as video}
|
|
229
235
|
<meta property="og:video" content={video.url} />
|
|
230
|
-
{#if video.alt}
|
|
231
|
-
<meta property="og:video:alt" content={video.alt} />
|
|
232
|
-
{/if}
|
|
233
236
|
{#if video.width}
|
|
234
237
|
<meta property="og:video:width" content={video.width.toString()} />
|
|
235
238
|
{/if}
|
|
@@ -245,12 +248,24 @@ $:
|
|
|
245
248
|
{/each}
|
|
246
249
|
{/if}
|
|
247
250
|
|
|
251
|
+
{#if openGraph.audio && openGraph.audio.length}
|
|
252
|
+
{#each openGraph.audio as audio}
|
|
253
|
+
<meta property="og:audio" content={audio.url} />
|
|
254
|
+
{#if audio.secureUrl}
|
|
255
|
+
<meta property="og:audio:secure_url" content={audio.secureUrl.toString()} />
|
|
256
|
+
{/if}
|
|
257
|
+
{#if audio.type}
|
|
258
|
+
<meta property="og:audio:type" content={audio.type.toString()} />
|
|
259
|
+
{/if}
|
|
260
|
+
{/each}
|
|
261
|
+
{/if}
|
|
262
|
+
|
|
248
263
|
{#if openGraph.locale}
|
|
249
264
|
<meta property="og:locale" content={openGraph.locale} />
|
|
250
265
|
{/if}
|
|
251
266
|
|
|
252
|
-
{#if openGraph.
|
|
253
|
-
<meta property="og:site_name" content={openGraph.
|
|
267
|
+
{#if openGraph.siteName}
|
|
268
|
+
<meta property="og:site_name" content={openGraph.siteName} />
|
|
254
269
|
{/if}
|
|
255
270
|
{/if}
|
|
256
271
|
|
package/dist/README.md
ADDED
|
@@ -0,0 +1,1168 @@
|
|
|
1
|
+
<img src="https://raw.githubusercontent.com/oekazuma/svelte-meta-tags/main/.github/logo.svg" alt="svelte-meta-tags" width="512" />
|
|
2
|
+
|
|
3
|
+
[](https://github.com/oekazuma/svelte-meta-tags/actions/workflows/ci.yml)
|
|
4
|
+
[](https://www.npmjs.com/package/svelte-meta-tags)
|
|
5
|
+
[](https://www.npmjs.com/package/svelte-meta-tags)
|
|
6
|
+
[](https://opensource.org/licenses/MIT)
|
|
7
|
+
|
|
8
|
+
Svelte Meta Tags provides components designed to help you manage SEO for Svelte projects.
|
|
9
|
+
|
|
10
|
+
[Demo](https://svelte.dev/repl/ffd783c9b8e54d97b6b7cac6eadace42)
|
|
11
|
+
|
|
12
|
+
**Note: If you are migrating from v2.x to v3.x, [Please Read Migration Guide](https://github.com/oekazuma/svelte-meta-tags/issues/786)**
|
|
13
|
+
|
|
14
|
+
**Table of Contents**
|
|
15
|
+
|
|
16
|
+
- [Installing](#-installing)
|
|
17
|
+
- [Usage](#-usage)
|
|
18
|
+
- [MetaTags Properties](#metatags-properties)
|
|
19
|
+
- [Title Template](#title-template)
|
|
20
|
+
- [Twitter](#twitter)
|
|
21
|
+
- [Facebook](#facebook)
|
|
22
|
+
- [additionalRobotsProps](#additionalRobotsProps)
|
|
23
|
+
- [Alternate](#alternate)
|
|
24
|
+
- [Additional Meta Tags](#additional-meta-tags)
|
|
25
|
+
- [Additional Link Tags](#additional-link-tags)
|
|
26
|
+
- [Open Graph](#open-graph)
|
|
27
|
+
- [Open Graph Examples](#open-graph-examples)
|
|
28
|
+
- [Basic](#basic)
|
|
29
|
+
- [Video](#video)
|
|
30
|
+
- [Article](#article)
|
|
31
|
+
- [Book](#book)
|
|
32
|
+
- [Profile](#profile)
|
|
33
|
+
- [JSON-LD](#json-ld)
|
|
34
|
+
- [Using schema-dts](#using-schema-dts)
|
|
35
|
+
- [JSON-LD Properties](#json-ld-properties)
|
|
36
|
+
- [JSON-LD Examples](#json-ld-examples)
|
|
37
|
+
- [Article](#article)
|
|
38
|
+
- [Breadcrumb](#breadcrumb)
|
|
39
|
+
- [Product](#product)
|
|
40
|
+
- [Course](#course)
|
|
41
|
+
- [DataSet](#dataset)
|
|
42
|
+
- [FAQ](#faq)
|
|
43
|
+
- [JSON-LD Multiple Examples](#json-ld-multiple-examples)
|
|
44
|
+
- [Types](#types)
|
|
45
|
+
- [Additional types](#additional-types)
|
|
46
|
+
|
|
47
|
+
### 📦 Installing
|
|
48
|
+
|
|
49
|
+
```shell
|
|
50
|
+
npm install -D svelte-meta-tags
|
|
51
|
+
```
|
|
52
|
+
|
|
53
|
+
or
|
|
54
|
+
|
|
55
|
+
```shell
|
|
56
|
+
yarn add -D svelte-meta-tags
|
|
57
|
+
```
|
|
58
|
+
|
|
59
|
+
or
|
|
60
|
+
|
|
61
|
+
```shell
|
|
62
|
+
pnpm add -D svelte-meta-tags
|
|
63
|
+
```
|
|
64
|
+
|
|
65
|
+
### 🚀 Usage
|
|
66
|
+
|
|
67
|
+
**Example with just title and description:**
|
|
68
|
+
|
|
69
|
+
```svelte
|
|
70
|
+
<script>
|
|
71
|
+
import { MetaTags } from 'svelte-meta-tags';
|
|
72
|
+
</script>
|
|
73
|
+
|
|
74
|
+
<MetaTags title="Example Title" description="Example Description." />
|
|
75
|
+
```
|
|
76
|
+
|
|
77
|
+
**Typical page example:**
|
|
78
|
+
|
|
79
|
+
```svelte
|
|
80
|
+
<script>
|
|
81
|
+
import { MetaTags } from 'svelte-meta-tags';
|
|
82
|
+
</script>
|
|
83
|
+
|
|
84
|
+
<MetaTags
|
|
85
|
+
title="Using More of Config"
|
|
86
|
+
titleTemplate="%s | Svelte Meta Tags"
|
|
87
|
+
description="This example uses more of the available config options."
|
|
88
|
+
canonical="https://www.canonical.ie/"
|
|
89
|
+
openGraph={{
|
|
90
|
+
url: 'https://www.url.ie/a',
|
|
91
|
+
title: 'Open Graph Title',
|
|
92
|
+
description: 'Open Graph Description',
|
|
93
|
+
images: [
|
|
94
|
+
{
|
|
95
|
+
url: 'https://www.example.ie/og-image-01.jpg',
|
|
96
|
+
width: 800,
|
|
97
|
+
height: 600,
|
|
98
|
+
alt: 'Og Image Alt'
|
|
99
|
+
},
|
|
100
|
+
{
|
|
101
|
+
url: 'https://www.example.ie/og-image-02.jpg',
|
|
102
|
+
width: 900,
|
|
103
|
+
height: 800,
|
|
104
|
+
alt: 'Og Image Alt Second'
|
|
105
|
+
},
|
|
106
|
+
{ url: 'https://www.example.ie/og-image-03.jpg' },
|
|
107
|
+
{ url: 'https://www.example.ie/og-image-04.jpg' }
|
|
108
|
+
],
|
|
109
|
+
siteName: 'SiteName'
|
|
110
|
+
}}
|
|
111
|
+
twitter={{
|
|
112
|
+
handle: '@handle',
|
|
113
|
+
site: '@site',
|
|
114
|
+
cardType: 'summary_large_image',
|
|
115
|
+
title: 'Using More of Config',
|
|
116
|
+
description: 'This example uses more of the available config options.',
|
|
117
|
+
image: 'https://www.example.ie/twitter-image.jpg',
|
|
118
|
+
imageAlt: 'Twitter image alt'
|
|
119
|
+
}}
|
|
120
|
+
facebook={{
|
|
121
|
+
appId: '1234567890'
|
|
122
|
+
}}
|
|
123
|
+
/>
|
|
124
|
+
```
|
|
125
|
+
|
|
126
|
+
**Overwriting default values with a child page:**
|
|
127
|
+
|
|
128
|
+
`+layout.svelte`
|
|
129
|
+
|
|
130
|
+
```svelte
|
|
131
|
+
<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
|
+
|
|
135
|
+
export let data; // Exported so that child components/pages can provide data.
|
|
136
|
+
|
|
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
|
+
};
|
|
143
|
+
</script>
|
|
144
|
+
|
|
145
|
+
<MetaTags {...metaTags} />
|
|
146
|
+
|
|
147
|
+
<!-- The rest of your layout content and the slot for child content would go here. -->
|
|
148
|
+
```
|
|
149
|
+
|
|
150
|
+
`+page.ts`
|
|
151
|
+
|
|
152
|
+
```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.
|
|
160
|
+
openGraph: {
|
|
161
|
+
// OpenGraph meta tags specific to this page.
|
|
162
|
+
type: 'website',
|
|
163
|
+
url: new URL(url.pathname, url.origin).href,
|
|
164
|
+
locale: 'en_IE',
|
|
165
|
+
title: 'Open Graph Title',
|
|
166
|
+
description: 'Open Graph Description'
|
|
167
|
+
}
|
|
168
|
+
});
|
|
169
|
+
|
|
170
|
+
return {
|
|
171
|
+
metaTagsChild: metaTags // Return meta tags so they can be consumed by layout.svelte.
|
|
172
|
+
};
|
|
173
|
+
};
|
|
174
|
+
```
|
|
175
|
+
|
|
176
|
+
### MetaTags Properties
|
|
177
|
+
|
|
178
|
+
| Property | Type | Description |
|
|
179
|
+
| ---------------------------------- | ------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
180
|
+
| `title` | string | Sets the meta title of the page |
|
|
181
|
+
| `titleTemplate` | string | Allows you to set the default title template that will be added to your title [More Info](#title-template) |
|
|
182
|
+
| `robots` | string or boolean (default `index,follow`) | Sets the meta robots of the page ⚠ You can disable it completely by setting it to false, but use it with caution as there is a risk that the page will not be indexed⚠ |
|
|
183
|
+
| `additionRobotsProps` | Object | Set the additional meta information for the `X-Robots-Tag` [More Info](#additionalRobotsProps) |
|
|
184
|
+
| `description` | string | Sets the meta description of the page |
|
|
185
|
+
| `canonical` | string | Make the page canonical URL |
|
|
186
|
+
| `mobileAlternate.media` | string | Set the screen size from which the mobile site will be served |
|
|
187
|
+
| `mobileAlternate.href` | string | Set the alternate URL for the mobile page |
|
|
188
|
+
| `languageAlternates` | array | Set the language of the alternate urls. Expects array of objects with the shape: `{ hrefLang: string, href: string }` |
|
|
189
|
+
| `additionalMetaTags` | array | Allows you to add a meta tag that is not documented here [More Info](#additional-meta-tags) |
|
|
190
|
+
| `additionalLinkTags` | array | Allows you to add a link tag that is not documented here [More Info](#additional-link-tags) |
|
|
191
|
+
| `twitter.cardType` | string | The card type, which will be one of `summary`, `summary_large_image`, `app`, or `player` |
|
|
192
|
+
| `twitter.site` | string | @username for the website used in the card footer |
|
|
193
|
+
| `twitter.handle` | string | @username for the creator of the content (output as `twitter:creator`) |
|
|
194
|
+
| `twitter.title` | string | The concise title for the related content |
|
|
195
|
+
| `twitter.description` | string | The description that concisely summarizes the content in a manner suitable for presentation within a Tweet. You should not reuse the title as the description or use this field to describe the general services provided by the website |
|
|
196
|
+
| `twitter.image` | string | The URL to a unique image that represents the content of the page. You should not use a generic image such as your site logo, author photo, or other image that spans multiple pages. Images for this card support a 1:1 aspect ratio with a minimum size of 144x144 pixels or a maximum size of 4096x4096 pixels. Images must be less than 5MB in size. The image will be cropped to a square on all platforms. JPG, PNG, WEBP, and GIF formats are supported. Only the first frame of an animated GIF is used. SVG is not supported |
|
|
197
|
+
| `twitter.imageAlt` | string | The textual description of the image that conveys the essence of the image to visually impaired users. Maximum 420 characters |
|
|
198
|
+
| `facebook.appId` | string | For Facebook Insights, you will need to add a Facebook app ID to your page in order to use it |
|
|
199
|
+
| `openGraph.url` | string | The canonical URL of your object, which will be used as its permanent ID in the graph |
|
|
200
|
+
| `openGraph.type` | string | The type of your object. Depending on the type you specify, other properties may also be required [More Info](#open-graph) |
|
|
201
|
+
| `openGraph.title` | string | The open graph title, this can be different from your meta title |
|
|
202
|
+
| `openGraph.description` | string | The open graph description, which may be different from your meta description |
|
|
203
|
+
| `openGraph.images` | array | An array of images to use as previews. If multiple are provided, you can choose one when sharing [See Examples](#open-graph-examples) |
|
|
204
|
+
| `openGraph.videos` | array | An array of videos (object) |
|
|
205
|
+
| `openGraph.audio` | array | An array of audio(object) |
|
|
206
|
+
| `openGraph.locale` | string | The locale in which the open graph tags are highlighted |
|
|
207
|
+
| `openGraph.siteName` | string | If your item is part of a larger website, the name that should be displayed for the entire site |
|
|
208
|
+
| `openGraph.profile.firstName` | string | Person's first name |
|
|
209
|
+
| `openGraph.profile.lastName` | string | Person's last name |
|
|
210
|
+
| `openGraph.profile.username` | string | Person's username |
|
|
211
|
+
| `openGraph.profile.gender` | string | Person's gender |
|
|
212
|
+
| `openGraph.book.authors` | string[] | Author of the article [See Examples](#open-graph-examples) |
|
|
213
|
+
| `openGraph.book.isbn` | string | The [ISBN](https://en.wikipedia.org/wiki/International_Standard_Book_Number) |
|
|
214
|
+
| `openGraph.book.releaseDate` | datetime | The date the book was released |
|
|
215
|
+
| `openGraph.book.tags` | string[] | Tag words related to this book |
|
|
216
|
+
| `openGraph.article.publishedTime` | datetime | When the article was first published [See Examples](#open-graph-examples) |
|
|
217
|
+
| `openGraph.article.modifiedTime` | datetime | When the item was last modified |
|
|
218
|
+
| `openGraph.article.expirationTime` | datetime | When the article is out of date after |
|
|
219
|
+
| `openGraph.article.authors` | string[] | Author of the article |
|
|
220
|
+
| `openGraph.article.section` | string | A high-level section name. E.g. Technology |
|
|
221
|
+
| `openGraph.article.tags` | string[] | Tag words associated with this article |
|
|
222
|
+
|
|
223
|
+
#### Title Template
|
|
224
|
+
|
|
225
|
+
Replace `%s` with your title string.
|
|
226
|
+
|
|
227
|
+
```
|
|
228
|
+
title = 'This is my title'
|
|
229
|
+
titleTemplate = 'Svelte Meta Tags | %s'
|
|
230
|
+
// outputs: Svelte Meta Tags | This is my title
|
|
231
|
+
```
|
|
232
|
+
|
|
233
|
+
```
|
|
234
|
+
title = 'This is my title'
|
|
235
|
+
titleTemplate = '%s | Svelte Meta Tags'
|
|
236
|
+
// outputs: This is my title | Svelte Meta Tags
|
|
237
|
+
```
|
|
238
|
+
|
|
239
|
+
#### Twitter
|
|
240
|
+
|
|
241
|
+
```js
|
|
242
|
+
twitter={{
|
|
243
|
+
handle: '@handle',
|
|
244
|
+
site: '@site',
|
|
245
|
+
cardType: 'summary_large_image',
|
|
246
|
+
title: 'Twitter',
|
|
247
|
+
description: 'Twitter',
|
|
248
|
+
image: 'https://www.example.ie/twitter-image.jpg',
|
|
249
|
+
imageAlt: 'Twitter image alt'
|
|
250
|
+
}}
|
|
251
|
+
```
|
|
252
|
+
|
|
253
|
+
See out the Twitter [documentation](https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/summary) for more information.
|
|
254
|
+
|
|
255
|
+
#### Facebook
|
|
256
|
+
|
|
257
|
+
```js
|
|
258
|
+
facebook={{
|
|
259
|
+
appId: '1234567890',
|
|
260
|
+
}}
|
|
261
|
+
```
|
|
262
|
+
|
|
263
|
+
Add this to your SEO config to include the fb:app_id meta if you need to enable Facebook Insights for your site. Information on this can be found in Facebook's [documentation](https://developers.facebook.com/docs/sharing/webmasters/).
|
|
264
|
+
|
|
265
|
+
#### additionalRobotsProps
|
|
266
|
+
|
|
267
|
+
In addition to `index, follow` the `robots` meta tag accepts more properties to archive a more accurate crawling and serve better snippets for SEO bots that crawl your page.
|
|
268
|
+
|
|
269
|
+
Example:
|
|
270
|
+
|
|
271
|
+
```svelte
|
|
272
|
+
<script>
|
|
273
|
+
import { MetaTags } from 'svelte-meta-tags';
|
|
274
|
+
</script>
|
|
275
|
+
|
|
276
|
+
<MetaTags
|
|
277
|
+
additionalRobotsProps={{
|
|
278
|
+
noarchive: true,
|
|
279
|
+
nosnippet: true,
|
|
280
|
+
maxSnippet: -1,
|
|
281
|
+
maxImagePreview: 'none',
|
|
282
|
+
maxVideoPreview: -1,
|
|
283
|
+
notranslate: true,
|
|
284
|
+
noimageindex: true,
|
|
285
|
+
unavailableAfter: '25 Jun 2010 15:00:00 PST'
|
|
286
|
+
}}
|
|
287
|
+
/>
|
|
288
|
+
```
|
|
289
|
+
|
|
290
|
+
**Available properties**
|
|
291
|
+
|
|
292
|
+
| Property | Type | Description |
|
|
293
|
+
| ------------------ | ------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
294
|
+
| `noarchive` | boolean | Do not display a [cached link](https://support.google.com/websearch/answer/1687222) in search results |
|
|
295
|
+
| `nosnippet` | boolean | Do not show a text snippet or video preview in the search results for this page |
|
|
296
|
+
| `maxSnippet` | number | Use a maximum of [number] characters as the text snippet for this search result [Read more](https://developers.google.com/search/reference/robots_meta_tag?hl=en-GB#directives) |
|
|
297
|
+
| `maxImagePreview` | 'none','standard','large' | Set the maximum size of an image preview for this page in a search result |
|
|
298
|
+
| `maxVideoPreview` | number | Use a maximum of [number] seconds as a video snippet for videos on this page in search results [Read more](https://developers.google.com/search/reference/robots_meta_tag?hl=en-GB#directives) |
|
|
299
|
+
| `notranslate` | boolean | Do not offer translation of this page in search results |
|
|
300
|
+
| `noimageindex` | boolean | Do not index images on this page |
|
|
301
|
+
| `unavailableAfter` | string | Do not show this page in search results after the specified date/time. The date/time must be in a widely accepted format, including but not limited to RFC 822, RFC 850, and ISO 8601 |
|
|
302
|
+
|
|
303
|
+
For more information on the `X-Robots-Tag` visit [Google Search Central - Control Crawling and Indexing](https://developers.google.com/search/reference/robots_meta_tag?hl=en-GB#directives)
|
|
304
|
+
|
|
305
|
+
#### Alternate
|
|
306
|
+
|
|
307
|
+
This link relationship is used to indicate a relationship between a desktop and mobile website to search engines.
|
|
308
|
+
|
|
309
|
+
Example:
|
|
310
|
+
|
|
311
|
+
```js
|
|
312
|
+
mobileAlternate={{
|
|
313
|
+
media: 'only screen and (max-width: 640px)',
|
|
314
|
+
href: 'https://m.canonical.ie'
|
|
315
|
+
}}
|
|
316
|
+
```
|
|
317
|
+
|
|
318
|
+
```js
|
|
319
|
+
languageAlternates={[
|
|
320
|
+
{
|
|
321
|
+
hrefLang: 'de-AT',
|
|
322
|
+
href: 'https://www.canonical.ie/de'
|
|
323
|
+
}
|
|
324
|
+
]}
|
|
325
|
+
```
|
|
326
|
+
|
|
327
|
+
#### Additional Meta Tags
|
|
328
|
+
|
|
329
|
+
This allows you to add any other meta tags that are not required by the `config`.
|
|
330
|
+
|
|
331
|
+
`content` is required. Then either `name`, `property` or `httpEquiv`. (only one of each)
|
|
332
|
+
|
|
333
|
+
Example:
|
|
334
|
+
|
|
335
|
+
```js
|
|
336
|
+
additionalMetaTags={[
|
|
337
|
+
{
|
|
338
|
+
property: 'dc:creator',
|
|
339
|
+
content: 'Jane Doe'
|
|
340
|
+
},
|
|
341
|
+
{
|
|
342
|
+
name: 'application-name',
|
|
343
|
+
content: 'Svelte-Meta-Tags'
|
|
344
|
+
},
|
|
345
|
+
{
|
|
346
|
+
httpEquiv: 'x-ua-compatible',
|
|
347
|
+
content: 'IE=edge; chrome=1'
|
|
348
|
+
}
|
|
349
|
+
]}
|
|
350
|
+
```
|
|
351
|
+
|
|
352
|
+
Invalid Examples:
|
|
353
|
+
|
|
354
|
+
These are invalid because they contain more than one of `name`, `property`, and `httpEquiv` in the same entry.
|
|
355
|
+
|
|
356
|
+
```js
|
|
357
|
+
additionalMetaTags={[
|
|
358
|
+
{
|
|
359
|
+
property: 'dc:creator',
|
|
360
|
+
name: 'dc:creator',
|
|
361
|
+
content: 'Jane Doe'
|
|
362
|
+
},
|
|
363
|
+
{
|
|
364
|
+
property: 'application-name',
|
|
365
|
+
httpEquiv: 'application-name',
|
|
366
|
+
content: 'Svelte-Meta-Tags'
|
|
367
|
+
}
|
|
368
|
+
]}
|
|
369
|
+
```
|
|
370
|
+
|
|
371
|
+
One thing to note on this is that it currently only supports unique tags.
|
|
372
|
+
This means it will only render one tag per unique `name` / `property` / `httpEquiv`. The last one defined will be rendered.
|
|
373
|
+
|
|
374
|
+
Example:
|
|
375
|
+
|
|
376
|
+
If you pass:
|
|
377
|
+
|
|
378
|
+
```js
|
|
379
|
+
additionalMetaTags={[
|
|
380
|
+
{
|
|
381
|
+
property: 'dc:creator',
|
|
382
|
+
content: 'John Doe'
|
|
383
|
+
},
|
|
384
|
+
{
|
|
385
|
+
property: 'dc:creator',
|
|
386
|
+
content: 'Jane Doe'
|
|
387
|
+
}
|
|
388
|
+
]}
|
|
389
|
+
```
|
|
390
|
+
|
|
391
|
+
it will result in this being rendered:
|
|
392
|
+
|
|
393
|
+
```html
|
|
394
|
+
<meta property="dc:creator" content="Jane Doe" />,
|
|
395
|
+
```
|
|
396
|
+
|
|
397
|
+
#### Additional Link Tags
|
|
398
|
+
|
|
399
|
+
This allows you to add any other link tags that are not covered in the `config`.
|
|
400
|
+
|
|
401
|
+
`rel` and `href` is required.
|
|
402
|
+
|
|
403
|
+
Example:
|
|
404
|
+
|
|
405
|
+
```js
|
|
406
|
+
additionalLinkTags={[
|
|
407
|
+
{
|
|
408
|
+
rel: 'icon',
|
|
409
|
+
href: 'https://www.test.ie/favicon.ico'
|
|
410
|
+
},
|
|
411
|
+
{
|
|
412
|
+
rel: 'apple-touch-icon',
|
|
413
|
+
href: 'https://www.test.ie/touch-icon-ipad.jpg',
|
|
414
|
+
sizes: '76x76'
|
|
415
|
+
},
|
|
416
|
+
{
|
|
417
|
+
rel: 'manifest',
|
|
418
|
+
href: 'https://www.test.ie/manifest.json'
|
|
419
|
+
}
|
|
420
|
+
]}
|
|
421
|
+
```
|
|
422
|
+
|
|
423
|
+
it will result in this being rendered:
|
|
424
|
+
|
|
425
|
+
```html
|
|
426
|
+
<link rel="icon" href="https://www.test.ie/favicon.ico" />
|
|
427
|
+
<link rel="apple-touch-icon" href="https://www.test.ie/touch-icon-ipad.jpg" sizes="76x76" />
|
|
428
|
+
<link rel="manifest" href="https://www.test.ie/manifest.json" />
|
|
429
|
+
```
|
|
430
|
+
|
|
431
|
+
## Open Graph
|
|
432
|
+
|
|
433
|
+
The full specification can be found at <http://ogp.me/>.
|
|
434
|
+
|
|
435
|
+
Svelte Meta Tags currently supports:
|
|
436
|
+
|
|
437
|
+
- [Basic](#basic)
|
|
438
|
+
- [Video](#video)
|
|
439
|
+
- [Article](#article)
|
|
440
|
+
- [Book](#book)
|
|
441
|
+
- [Profile](#profile)
|
|
442
|
+
|
|
443
|
+
### Open Graph Examples
|
|
444
|
+
|
|
445
|
+
#### Basic
|
|
446
|
+
|
|
447
|
+
```svelte
|
|
448
|
+
<script>
|
|
449
|
+
import { MetaTags } from 'svelte-meta-tags';
|
|
450
|
+
</script>
|
|
451
|
+
|
|
452
|
+
<MetaTags
|
|
453
|
+
openGraph={{
|
|
454
|
+
type: 'website',
|
|
455
|
+
url: 'https://www.example.com/page',
|
|
456
|
+
title: 'Open Graph Title',
|
|
457
|
+
description: 'Open Graph Description',
|
|
458
|
+
images: [
|
|
459
|
+
{
|
|
460
|
+
url: 'https://www.example.ie/og-image.jpg',
|
|
461
|
+
width: 800,
|
|
462
|
+
height: 600,
|
|
463
|
+
alt: 'Og Image Alt'
|
|
464
|
+
},
|
|
465
|
+
{
|
|
466
|
+
url: 'https://www.example.ie/og-image-2.jpg',
|
|
467
|
+
width: 800,
|
|
468
|
+
height: 600,
|
|
469
|
+
alt: 'Og Image Alt 2'
|
|
470
|
+
}
|
|
471
|
+
]
|
|
472
|
+
}}
|
|
473
|
+
/>
|
|
474
|
+
```
|
|
475
|
+
|
|
476
|
+
#### Video
|
|
477
|
+
|
|
478
|
+
Full info on [http://ogp.me/](http://ogp.me/#type_video)
|
|
479
|
+
|
|
480
|
+
```svelte
|
|
481
|
+
<script>
|
|
482
|
+
import { MetaTags } from 'svelte-meta-tags';
|
|
483
|
+
</script>
|
|
484
|
+
|
|
485
|
+
<MetaTags
|
|
486
|
+
title="Video Page Title"
|
|
487
|
+
description="Description of video page"
|
|
488
|
+
openGraph={{
|
|
489
|
+
title: 'Open Graph Video Title',
|
|
490
|
+
description: 'Description of open graph video',
|
|
491
|
+
url: 'https://www.example.com/videos/video-title',
|
|
492
|
+
type: 'video.movie',
|
|
493
|
+
video: {
|
|
494
|
+
actors: [
|
|
495
|
+
{
|
|
496
|
+
profile: 'https://www.example.com/actors/@firstnameA-lastnameA',
|
|
497
|
+
role: 'Protagonist'
|
|
498
|
+
},
|
|
499
|
+
{
|
|
500
|
+
profile: 'https://www.example.com/actors/@firstnameB-lastnameB',
|
|
501
|
+
role: 'Antagonist'
|
|
502
|
+
}
|
|
503
|
+
],
|
|
504
|
+
directors: [
|
|
505
|
+
'https://www.example.com/directors/@firstnameA-lastnameA',
|
|
506
|
+
'https://www.example.com/directors/@firstnameB-lastnameB'
|
|
507
|
+
],
|
|
508
|
+
writers: [
|
|
509
|
+
'https://www.example.com/writers/@firstnameA-lastnameA',
|
|
510
|
+
'https://www.example.com/writers/@firstnameB-lastnameB'
|
|
511
|
+
],
|
|
512
|
+
duration: 680000,
|
|
513
|
+
releaseDate: '2022-12-21T22:04:11Z',
|
|
514
|
+
tags: ['Tag A', 'Tag B', 'Tag C']
|
|
515
|
+
},
|
|
516
|
+
siteName: 'SiteName'
|
|
517
|
+
}}
|
|
518
|
+
/>
|
|
519
|
+
```
|
|
520
|
+
|
|
521
|
+
#### Article
|
|
522
|
+
|
|
523
|
+
```svelte
|
|
524
|
+
<script>
|
|
525
|
+
import { MetaTags } from 'svelte-meta-tags';
|
|
526
|
+
</script>
|
|
527
|
+
|
|
528
|
+
<MetaTags
|
|
529
|
+
openGraph={{
|
|
530
|
+
title: 'Open Graph Article Title',
|
|
531
|
+
description: 'Description of open graph article',
|
|
532
|
+
url: 'https://www.example.com/articles/article-title',
|
|
533
|
+
type: 'article',
|
|
534
|
+
article: {
|
|
535
|
+
publishedTime: '2017-06-21T23:04:13Z',
|
|
536
|
+
modifiedTime: '2018-01-21T18:04:43Z',
|
|
537
|
+
expirationTime: '2022-12-21T22:04:11Z',
|
|
538
|
+
section: 'Section II',
|
|
539
|
+
authors: [
|
|
540
|
+
'https://www.example.com/authors/@firstnameA-lastnameA',
|
|
541
|
+
'https://www.example.com/authors/@firstnameB-lastnameB'
|
|
542
|
+
],
|
|
543
|
+
tags: ['Tag A', 'Tag B', 'Tag C']
|
|
544
|
+
},
|
|
545
|
+
images: [
|
|
546
|
+
{
|
|
547
|
+
url: 'https://www.test.ie/images/cover.jpg',
|
|
548
|
+
width: 850,
|
|
549
|
+
height: 650,
|
|
550
|
+
alt: 'Photo of text'
|
|
551
|
+
}
|
|
552
|
+
]
|
|
553
|
+
}}
|
|
554
|
+
/>
|
|
555
|
+
```
|
|
556
|
+
|
|
557
|
+
#### Book
|
|
558
|
+
|
|
559
|
+
```svelte
|
|
560
|
+
<script>
|
|
561
|
+
import { MetaTags } from 'svelte-meta-tags';
|
|
562
|
+
</script>
|
|
563
|
+
|
|
564
|
+
<MetaTags
|
|
565
|
+
openGraph={{
|
|
566
|
+
title: 'Open Graph Book Title',
|
|
567
|
+
description: 'Description of open graph book',
|
|
568
|
+
url: 'https://www.example.com/books/book-title',
|
|
569
|
+
type: 'book',
|
|
570
|
+
book: {
|
|
571
|
+
releaseDate: '2018-09-17T11:08:13Z',
|
|
572
|
+
isbn: '978-3-16-148410-0',
|
|
573
|
+
authors: [
|
|
574
|
+
'https://www.example.com/authors/@firstnameA-lastnameA',
|
|
575
|
+
'https://www.example.com/authors/@firstnameB-lastnameB'
|
|
576
|
+
],
|
|
577
|
+
tags: ['Tag A', 'Tag B', 'Tag C']
|
|
578
|
+
},
|
|
579
|
+
images: [
|
|
580
|
+
{
|
|
581
|
+
url: 'https://www.test.ie/images/book.jpg',
|
|
582
|
+
width: 850,
|
|
583
|
+
height: 650,
|
|
584
|
+
alt: 'Cover of the book'
|
|
585
|
+
}
|
|
586
|
+
]
|
|
587
|
+
}}
|
|
588
|
+
/>
|
|
589
|
+
```
|
|
590
|
+
|
|
591
|
+
#### Profile
|
|
592
|
+
|
|
593
|
+
```svelte
|
|
594
|
+
<script>
|
|
595
|
+
import { MetaTags } from 'svelte-meta-tags';
|
|
596
|
+
</script>
|
|
597
|
+
|
|
598
|
+
<MetaTags
|
|
599
|
+
openGraph={{
|
|
600
|
+
title: 'Open Graph Profile Title',
|
|
601
|
+
description: 'Description of open graph profile',
|
|
602
|
+
url: 'https://www.example.com/@firstlast123',
|
|
603
|
+
type: 'profile',
|
|
604
|
+
profile: {
|
|
605
|
+
firstName: 'First',
|
|
606
|
+
lastName: 'Last',
|
|
607
|
+
username: 'firstlast123',
|
|
608
|
+
gender: 'female'
|
|
609
|
+
},
|
|
610
|
+
images: [
|
|
611
|
+
{
|
|
612
|
+
url: 'https://www.test.ie/images/profile.jpg',
|
|
613
|
+
width: 850,
|
|
614
|
+
height: 650,
|
|
615
|
+
alt: 'Profile Photo'
|
|
616
|
+
}
|
|
617
|
+
]
|
|
618
|
+
}}
|
|
619
|
+
/>
|
|
620
|
+
```
|
|
621
|
+
|
|
622
|
+
## JSON-LD
|
|
623
|
+
|
|
624
|
+
JSON-LD allows for more customized and richer display, such as in search results.
|
|
625
|
+
|
|
626
|
+
To discover all the different content types that JSON-LD offers, go to: https://developers.google.com/search/docs/guides/search-gallery
|
|
627
|
+
|
|
628
|
+
Tips: If you want to handle multiple JSON-LDs on one page, pass an array to the `schema`.
|
|
629
|
+
|
|
630
|
+
### Using `schema-dts`
|
|
631
|
+
|
|
632
|
+
This plugin uses [schema-dts](https://github.com/google/schema-dts), so it provides other types than the examples below.
|
|
633
|
+
|
|
634
|
+
### JSON-LD Properties
|
|
635
|
+
|
|
636
|
+
| Property | Type | Description |
|
|
637
|
+
| -------- | --------------------- | -------------------------------------------------------------------------------------------------------- |
|
|
638
|
+
| `output` | string (default head) | Specifies whether to output json-ld in `<head>` or `<body>`. Possible values are either `head` or `body` |
|
|
639
|
+
| `schema` | Object | Data in `ld+json` format [See Examples](#json-ld-examples) |
|
|
640
|
+
|
|
641
|
+
### JSON-LD Examples
|
|
642
|
+
|
|
643
|
+
#### Article
|
|
644
|
+
|
|
645
|
+
```svelte
|
|
646
|
+
<script>
|
|
647
|
+
import { JsonLd } from 'svelte-meta-tags';
|
|
648
|
+
</script>
|
|
649
|
+
|
|
650
|
+
<JsonLd
|
|
651
|
+
schema={{
|
|
652
|
+
'@type': 'Article',
|
|
653
|
+
mainEntityOfPage: {
|
|
654
|
+
'@type': 'WebPage',
|
|
655
|
+
'@id': 'https://example.com/article'
|
|
656
|
+
},
|
|
657
|
+
headline: 'Article headline',
|
|
658
|
+
image: [
|
|
659
|
+
'https://example.com/photos/1x1/photo.jpg',
|
|
660
|
+
'https://example.com/photos/4x3/photo.jpg',
|
|
661
|
+
'https://example.com/photos/16x9/photo.jpg'
|
|
662
|
+
],
|
|
663
|
+
datePublished: '2015-02-05T08:00:00+08:00',
|
|
664
|
+
dateModified: '2015-02-05T09:20:00+08:00',
|
|
665
|
+
author: {
|
|
666
|
+
'@type': 'Person',
|
|
667
|
+
name: 'John Doe'
|
|
668
|
+
},
|
|
669
|
+
publisher: {
|
|
670
|
+
'@type': 'Organization',
|
|
671
|
+
name: 'Google',
|
|
672
|
+
logo: {
|
|
673
|
+
'@type': 'ImageObject',
|
|
674
|
+
url: 'https://example.com/logo.jpg'
|
|
675
|
+
}
|
|
676
|
+
}
|
|
677
|
+
}}
|
|
678
|
+
/>
|
|
679
|
+
```
|
|
680
|
+
|
|
681
|
+
#### Breadcrumb
|
|
682
|
+
|
|
683
|
+
```svelte
|
|
684
|
+
<script>
|
|
685
|
+
import { JsonLd } from 'svelte-meta-tags';
|
|
686
|
+
</script>
|
|
687
|
+
|
|
688
|
+
<JsonLd
|
|
689
|
+
schema={{
|
|
690
|
+
'@type': 'BreadcrumbList',
|
|
691
|
+
itemListElement: [
|
|
692
|
+
{
|
|
693
|
+
'@type': 'ListItem',
|
|
694
|
+
position: 1,
|
|
695
|
+
name: 'Books',
|
|
696
|
+
item: 'https://example.com/books'
|
|
697
|
+
},
|
|
698
|
+
{
|
|
699
|
+
'@type': 'ListItem',
|
|
700
|
+
position: 2,
|
|
701
|
+
name: 'Science Fiction',
|
|
702
|
+
item: 'https://example.com/books/sciencefiction'
|
|
703
|
+
},
|
|
704
|
+
{
|
|
705
|
+
'@type': 'ListItem',
|
|
706
|
+
position: 3,
|
|
707
|
+
name: 'Award Winners'
|
|
708
|
+
}
|
|
709
|
+
]
|
|
710
|
+
}}
|
|
711
|
+
/>
|
|
712
|
+
```
|
|
713
|
+
|
|
714
|
+
#### Product
|
|
715
|
+
|
|
716
|
+
```svelte
|
|
717
|
+
<script>
|
|
718
|
+
import { JsonLd } from 'svelte-meta-tags';
|
|
719
|
+
</script>
|
|
720
|
+
|
|
721
|
+
<JsonLd
|
|
722
|
+
schema={{
|
|
723
|
+
'@type': 'Product',
|
|
724
|
+
name: 'Executive Anvil',
|
|
725
|
+
image: [
|
|
726
|
+
'https://example.com/photos/1x1/photo.jpg',
|
|
727
|
+
'https://example.com/photos/4x3/photo.jpg',
|
|
728
|
+
'https://example.com/photos/16x9/photo.jpg'
|
|
729
|
+
],
|
|
730
|
+
description:
|
|
731
|
+
"Sleeker than ACME's Classic Anvil, the Executive Anvil is perfect for the business traveler looking for something to drop from a height.",
|
|
732
|
+
sku: '0446310786',
|
|
733
|
+
mpn: '925872',
|
|
734
|
+
brand: {
|
|
735
|
+
'@type': 'Brand',
|
|
736
|
+
name: 'ACME'
|
|
737
|
+
},
|
|
738
|
+
review: {
|
|
739
|
+
'@type': 'Review',
|
|
740
|
+
reviewRating: {
|
|
741
|
+
'@type': 'Rating',
|
|
742
|
+
ratingValue: '4',
|
|
743
|
+
bestRating: '5'
|
|
744
|
+
},
|
|
745
|
+
author: {
|
|
746
|
+
'@type': 'Person',
|
|
747
|
+
name: 'Fred Benson'
|
|
748
|
+
}
|
|
749
|
+
},
|
|
750
|
+
aggregateRating: {
|
|
751
|
+
'@type': 'AggregateRating',
|
|
752
|
+
ratingValue: '4.4',
|
|
753
|
+
reviewCount: '89'
|
|
754
|
+
},
|
|
755
|
+
offers: {
|
|
756
|
+
'@type': 'Offer',
|
|
757
|
+
url: 'https://example.com/anvil',
|
|
758
|
+
priceCurrency: 'USD',
|
|
759
|
+
price: '119.99',
|
|
760
|
+
priceValidUntil: '2020-11-20',
|
|
761
|
+
itemCondition: 'https://schema.org/UsedCondition',
|
|
762
|
+
availability: 'https://schema.org/InStock'
|
|
763
|
+
}
|
|
764
|
+
}}
|
|
765
|
+
/>
|
|
766
|
+
```
|
|
767
|
+
|
|
768
|
+
#### Course
|
|
769
|
+
|
|
770
|
+
```svelte
|
|
771
|
+
<script>
|
|
772
|
+
import { JsonLd } from 'svelte-meta-tags';
|
|
773
|
+
</script>
|
|
774
|
+
|
|
775
|
+
<JsonLd
|
|
776
|
+
schema={{
|
|
777
|
+
'@type': 'Course',
|
|
778
|
+
name: 'Introduction to Computer Science and Programming',
|
|
779
|
+
description: 'Introductory CS course laying out the basics.',
|
|
780
|
+
provider: {
|
|
781
|
+
'@type': 'Organization',
|
|
782
|
+
name: 'University of Technology - Eureka',
|
|
783
|
+
sameAs: 'http://www.ut-eureka.edu'
|
|
784
|
+
}
|
|
785
|
+
}}
|
|
786
|
+
/>
|
|
787
|
+
```
|
|
788
|
+
|
|
789
|
+
#### DataSet
|
|
790
|
+
|
|
791
|
+
```svelte
|
|
792
|
+
<script>
|
|
793
|
+
import { JsonLd } from 'svelte-meta-tags';
|
|
794
|
+
</script>
|
|
795
|
+
|
|
796
|
+
<JsonLd
|
|
797
|
+
schema={{
|
|
798
|
+
'@type': 'Dataset',
|
|
799
|
+
name: 'name of the dataset',
|
|
800
|
+
description: 'The description needs to be at least 50 characters long',
|
|
801
|
+
license: 'https//www.example.com'
|
|
802
|
+
}}
|
|
803
|
+
/>
|
|
804
|
+
```
|
|
805
|
+
|
|
806
|
+
#### FAQ
|
|
807
|
+
|
|
808
|
+
```svelte
|
|
809
|
+
<script>
|
|
810
|
+
import { JsonLd } from 'svelte-meta-tags';
|
|
811
|
+
</script>
|
|
812
|
+
|
|
813
|
+
<JsonLd
|
|
814
|
+
schema={{
|
|
815
|
+
'@type': 'FAQPage',
|
|
816
|
+
mainEntity: [
|
|
817
|
+
{
|
|
818
|
+
'@type': 'Question',
|
|
819
|
+
name: 'How long is the delivery time?',
|
|
820
|
+
acceptedAnswer: {
|
|
821
|
+
'@type': 'Answer',
|
|
822
|
+
text: '3-5 business days.'
|
|
823
|
+
}
|
|
824
|
+
},
|
|
825
|
+
{
|
|
826
|
+
'@type': 'Question',
|
|
827
|
+
name: 'Where can I find information about product recalls?',
|
|
828
|
+
acceptedAnswer: {
|
|
829
|
+
'@type': 'Answer',
|
|
830
|
+
text: 'Read more on under information.'
|
|
831
|
+
}
|
|
832
|
+
}
|
|
833
|
+
]
|
|
834
|
+
}}
|
|
835
|
+
/>
|
|
836
|
+
```
|
|
837
|
+
|
|
838
|
+
### JSON-LD Multiple Examples
|
|
839
|
+
|
|
840
|
+
```svelte
|
|
841
|
+
<script>
|
|
842
|
+
import { JsonLd } from 'svelte-meta-tags';
|
|
843
|
+
</script>
|
|
844
|
+
|
|
845
|
+
<JsonLd
|
|
846
|
+
schema={[
|
|
847
|
+
{
|
|
848
|
+
'@type': 'BreadcrumbList',
|
|
849
|
+
itemListElement: [
|
|
850
|
+
{
|
|
851
|
+
'@type': 'ListItem',
|
|
852
|
+
position: 1,
|
|
853
|
+
name: 'Books',
|
|
854
|
+
item: 'https://example.com/books'
|
|
855
|
+
},
|
|
856
|
+
{
|
|
857
|
+
'@type': 'ListItem',
|
|
858
|
+
position: 2,
|
|
859
|
+
name: 'Science Fiction',
|
|
860
|
+
item: 'https://example.com/books/sciencefiction'
|
|
861
|
+
},
|
|
862
|
+
{
|
|
863
|
+
'@type': 'ListItem',
|
|
864
|
+
position: 3,
|
|
865
|
+
name: 'Award Winners'
|
|
866
|
+
}
|
|
867
|
+
]
|
|
868
|
+
},
|
|
869
|
+
{
|
|
870
|
+
'@type': 'NewsArticle',
|
|
871
|
+
mainEntityOfPage: {
|
|
872
|
+
'@type': 'WebPage',
|
|
873
|
+
'@id': 'https://google.com/article'
|
|
874
|
+
},
|
|
875
|
+
headline: 'Article headline',
|
|
876
|
+
image: [
|
|
877
|
+
'https://example.com/photos/1x1/photo.jpg',
|
|
878
|
+
'https://example.com/photos/4x3/photo.jpg',
|
|
879
|
+
'https://example.com/photos/16x9/photo.jpg'
|
|
880
|
+
],
|
|
881
|
+
datePublished: '2015-02-05T08:00:00+08:00',
|
|
882
|
+
dateModified: '2015-02-05T09:20:00+08:00',
|
|
883
|
+
author: {
|
|
884
|
+
'@type': 'Person',
|
|
885
|
+
name: 'John Doe'
|
|
886
|
+
},
|
|
887
|
+
publisher: {
|
|
888
|
+
'@type': 'Organization',
|
|
889
|
+
name: 'Google',
|
|
890
|
+
logo: {
|
|
891
|
+
'@type': 'ImageObject',
|
|
892
|
+
url: 'https://google.com/logo.jpg'
|
|
893
|
+
}
|
|
894
|
+
}
|
|
895
|
+
}
|
|
896
|
+
]}
|
|
897
|
+
/>
|
|
898
|
+
```
|
|
899
|
+
|
|
900
|
+
## Types
|
|
901
|
+
|
|
902
|
+
The following types can be imported from `svelte-meta-tags`
|
|
903
|
+
|
|
904
|
+
### MetaTagsProps
|
|
905
|
+
|
|
906
|
+
```ts
|
|
907
|
+
interface MetaTagsProps {
|
|
908
|
+
title?: string;
|
|
909
|
+
titleTemplate?: string;
|
|
910
|
+
robots?: string | boolean;
|
|
911
|
+
additionalRobotsProps?: AdditionalRobotsProps;
|
|
912
|
+
description?: string;
|
|
913
|
+
canonical?: string;
|
|
914
|
+
mobileAlternate?: MobileAlternate;
|
|
915
|
+
languageAlternates?: ReadonlyArray<LanguageAlternate>;
|
|
916
|
+
twitter?: Twitter;
|
|
917
|
+
facebook?: Facebook;
|
|
918
|
+
openGraph?: OpenGraph;
|
|
919
|
+
additionalMetaTags?: ReadonlyArray<MetaTag>;
|
|
920
|
+
additionalLinkTags?: ReadonlyArray<LinkTag>;
|
|
921
|
+
}
|
|
922
|
+
```
|
|
923
|
+
|
|
924
|
+
### JsonLdProps
|
|
925
|
+
|
|
926
|
+
```ts
|
|
927
|
+
interface JsonLdProps {
|
|
928
|
+
output?: 'head' | 'body';
|
|
929
|
+
schema?: Thing | WithContext<Thing> | Thing[] | WithContext<Thing>[];
|
|
930
|
+
}
|
|
931
|
+
```
|
|
932
|
+
|
|
933
|
+
### AdditionalRobotsProps
|
|
934
|
+
|
|
935
|
+
```ts
|
|
936
|
+
interface AdditionalRobotsProps {
|
|
937
|
+
nosnippet?: boolean;
|
|
938
|
+
maxSnippet?: number;
|
|
939
|
+
maxImagePreview?: 'none' | 'standard' | 'large';
|
|
940
|
+
maxVideoPreview?: number;
|
|
941
|
+
noarchive?: boolean;
|
|
942
|
+
unavailableAfter?: string;
|
|
943
|
+
noimageindex?: boolean;
|
|
944
|
+
notranslate?: boolean;
|
|
945
|
+
}
|
|
946
|
+
```
|
|
947
|
+
|
|
948
|
+
### MobileAlternate
|
|
949
|
+
|
|
950
|
+
```ts
|
|
951
|
+
interface MobileAlternate {
|
|
952
|
+
media: string;
|
|
953
|
+
href: string;
|
|
954
|
+
}
|
|
955
|
+
```
|
|
956
|
+
|
|
957
|
+
### LanguageAlternate
|
|
958
|
+
|
|
959
|
+
```ts
|
|
960
|
+
interface LanguageAlternate {
|
|
961
|
+
hrefLang: string;
|
|
962
|
+
href: string;
|
|
963
|
+
}
|
|
964
|
+
```
|
|
965
|
+
|
|
966
|
+
### Twitter
|
|
967
|
+
|
|
968
|
+
```ts
|
|
969
|
+
interface Twitter {
|
|
970
|
+
cardType?: 'summary' | 'summary_large_image' | 'app' | 'player';
|
|
971
|
+
site?: string;
|
|
972
|
+
handle?: string;
|
|
973
|
+
title?: string;
|
|
974
|
+
description?: string;
|
|
975
|
+
image?: string;
|
|
976
|
+
imageAlt?: string;
|
|
977
|
+
}
|
|
978
|
+
```
|
|
979
|
+
|
|
980
|
+
### Facebook
|
|
981
|
+
|
|
982
|
+
```ts
|
|
983
|
+
interface Facebook {
|
|
984
|
+
appId?: string;
|
|
985
|
+
}
|
|
986
|
+
```
|
|
987
|
+
|
|
988
|
+
### OpenGraph
|
|
989
|
+
|
|
990
|
+
```ts
|
|
991
|
+
interface OpenGraph {
|
|
992
|
+
url?: string;
|
|
993
|
+
type?: string;
|
|
994
|
+
title?: string;
|
|
995
|
+
description?: string;
|
|
996
|
+
images?: ReadonlyArray<OpenGraphImage>;
|
|
997
|
+
videos?: ReadonlyArray<OpenGraphVideos>;
|
|
998
|
+
audio?: ReadonlyArray<OpenGraphAudio>;
|
|
999
|
+
locale?: string;
|
|
1000
|
+
siteName?: string;
|
|
1001
|
+
profile?: OpenGraphProfile;
|
|
1002
|
+
book?: OpenGraphBook;
|
|
1003
|
+
article?: OpenGraphArticle;
|
|
1004
|
+
video?: OpenGraphVideo;
|
|
1005
|
+
}
|
|
1006
|
+
```
|
|
1007
|
+
|
|
1008
|
+
### MetaTag
|
|
1009
|
+
|
|
1010
|
+
```ts
|
|
1011
|
+
type MetaTag = HTML5MetaTag | RDFaMetaTag | HTTPEquivMetaTag;
|
|
1012
|
+
```
|
|
1013
|
+
|
|
1014
|
+
### LinkTag
|
|
1015
|
+
|
|
1016
|
+
```ts
|
|
1017
|
+
interface LinkTag {
|
|
1018
|
+
rel: string;
|
|
1019
|
+
href: string;
|
|
1020
|
+
hrefLang?: string;
|
|
1021
|
+
media?: string;
|
|
1022
|
+
sizes?: string;
|
|
1023
|
+
type?: string;
|
|
1024
|
+
color?: string;
|
|
1025
|
+
as?: string;
|
|
1026
|
+
crossOrigin?: string;
|
|
1027
|
+
referrerPolicy?: string;
|
|
1028
|
+
}
|
|
1029
|
+
```
|
|
1030
|
+
|
|
1031
|
+
## Additional types
|
|
1032
|
+
|
|
1033
|
+
The following are referenced by the public types documented above, but cannot be imported directly
|
|
1034
|
+
|
|
1035
|
+
### OpenGraphImage
|
|
1036
|
+
|
|
1037
|
+
```ts
|
|
1038
|
+
interface OpenGraphImage {
|
|
1039
|
+
url: string;
|
|
1040
|
+
secureUrl?: string;
|
|
1041
|
+
type?: string;
|
|
1042
|
+
width?: number;
|
|
1043
|
+
height?: number;
|
|
1044
|
+
alt?: string;
|
|
1045
|
+
}
|
|
1046
|
+
```
|
|
1047
|
+
|
|
1048
|
+
### OpenGraphVideos
|
|
1049
|
+
|
|
1050
|
+
```ts
|
|
1051
|
+
interface OpenGraphVideos {
|
|
1052
|
+
url: string;
|
|
1053
|
+
secureUrl?: string;
|
|
1054
|
+
type?: string;
|
|
1055
|
+
width?: number;
|
|
1056
|
+
height?: number;
|
|
1057
|
+
}
|
|
1058
|
+
```
|
|
1059
|
+
|
|
1060
|
+
### OpenGraphAudio
|
|
1061
|
+
|
|
1062
|
+
```ts
|
|
1063
|
+
interface OpenGraphAudio {
|
|
1064
|
+
url: string;
|
|
1065
|
+
secureUrl?: string;
|
|
1066
|
+
type?: string;
|
|
1067
|
+
}
|
|
1068
|
+
```
|
|
1069
|
+
|
|
1070
|
+
### OpenGraphProfile
|
|
1071
|
+
|
|
1072
|
+
```ts
|
|
1073
|
+
interface OpenGraphProfile {
|
|
1074
|
+
firstName?: string;
|
|
1075
|
+
lastName?: string;
|
|
1076
|
+
username?: string;
|
|
1077
|
+
gender?: string;
|
|
1078
|
+
}
|
|
1079
|
+
```
|
|
1080
|
+
|
|
1081
|
+
### OpenGraphBook
|
|
1082
|
+
|
|
1083
|
+
```ts
|
|
1084
|
+
interface OpenGraphBook {
|
|
1085
|
+
authors?: ReadonlyArray<string>;
|
|
1086
|
+
isbn?: string;
|
|
1087
|
+
releaseDate?: string;
|
|
1088
|
+
tags?: ReadonlyArray<string>;
|
|
1089
|
+
}
|
|
1090
|
+
```
|
|
1091
|
+
|
|
1092
|
+
### OpenGraphArticle
|
|
1093
|
+
|
|
1094
|
+
```ts
|
|
1095
|
+
interface OpenGraphArticle {
|
|
1096
|
+
publishedTime?: string;
|
|
1097
|
+
modifiedTime?: string;
|
|
1098
|
+
expirationTime?: string;
|
|
1099
|
+
authors?: ReadonlyArray<string>;
|
|
1100
|
+
section?: string;
|
|
1101
|
+
tags?: ReadonlyArray<string>;
|
|
1102
|
+
}
|
|
1103
|
+
```
|
|
1104
|
+
|
|
1105
|
+
### OpenGraphVideo
|
|
1106
|
+
|
|
1107
|
+
```ts
|
|
1108
|
+
interface OpenGraphVideo {
|
|
1109
|
+
actors?: ReadonlyArray<OpenGraphVideoActors>;
|
|
1110
|
+
directors?: ReadonlyArray<string>;
|
|
1111
|
+
writers?: ReadonlyArray<string>;
|
|
1112
|
+
duration?: number;
|
|
1113
|
+
releaseDate?: string;
|
|
1114
|
+
tags?: ReadonlyArray<string>;
|
|
1115
|
+
series?: string;
|
|
1116
|
+
}
|
|
1117
|
+
```
|
|
1118
|
+
|
|
1119
|
+
### OpenGraphVideoActors
|
|
1120
|
+
|
|
1121
|
+
```ts
|
|
1122
|
+
interface OpenGraphVideoActors {
|
|
1123
|
+
profile: string;
|
|
1124
|
+
role?: string;
|
|
1125
|
+
}
|
|
1126
|
+
```
|
|
1127
|
+
|
|
1128
|
+
### BaseMetaTag
|
|
1129
|
+
|
|
1130
|
+
```ts
|
|
1131
|
+
interface BaseMetaTag {
|
|
1132
|
+
content: string;
|
|
1133
|
+
}
|
|
1134
|
+
```
|
|
1135
|
+
|
|
1136
|
+
### HTML5MetaTag
|
|
1137
|
+
|
|
1138
|
+
```ts
|
|
1139
|
+
interface HTML5MetaTag extends BaseMetaTag {
|
|
1140
|
+
name: string;
|
|
1141
|
+
property?: undefined;
|
|
1142
|
+
httpEquiv?: undefined;
|
|
1143
|
+
}
|
|
1144
|
+
```
|
|
1145
|
+
|
|
1146
|
+
### RDFaMetaTag
|
|
1147
|
+
|
|
1148
|
+
```ts
|
|
1149
|
+
interface RDFaMetaTag extends BaseMetaTag {
|
|
1150
|
+
property: string;
|
|
1151
|
+
name?: undefined;
|
|
1152
|
+
httpEquiv?: undefined;
|
|
1153
|
+
}
|
|
1154
|
+
```
|
|
1155
|
+
|
|
1156
|
+
### HTTPEquivMetaTag
|
|
1157
|
+
|
|
1158
|
+
```ts
|
|
1159
|
+
interface HTTPEquivMetaTag extends BaseMetaTag {
|
|
1160
|
+
httpEquiv: 'content-security-policy' | 'content-type' | 'default-style' | 'x-ua-compatible' | 'refresh';
|
|
1161
|
+
name?: undefined;
|
|
1162
|
+
property?: undefined;
|
|
1163
|
+
}
|
|
1164
|
+
```
|
|
1165
|
+
|
|
1166
|
+
## License
|
|
1167
|
+
|
|
1168
|
+
MIT
|
package/dist/types.d.ts
CHANGED
|
@@ -40,24 +40,38 @@ export interface OpenGraph {
|
|
|
40
40
|
type?: string;
|
|
41
41
|
title?: string;
|
|
42
42
|
description?: string;
|
|
43
|
-
images?: ReadonlyArray<
|
|
44
|
-
videos?: ReadonlyArray<
|
|
45
|
-
audio?: ReadonlyArray<
|
|
43
|
+
images?: ReadonlyArray<OpenGraphImage>;
|
|
44
|
+
videos?: ReadonlyArray<OpenGraphVideos>;
|
|
45
|
+
audio?: ReadonlyArray<OpenGraphAudio>;
|
|
46
46
|
locale?: string;
|
|
47
|
-
|
|
47
|
+
siteName?: string;
|
|
48
48
|
profile?: OpenGraphProfile;
|
|
49
49
|
book?: OpenGraphBook;
|
|
50
50
|
article?: OpenGraphArticle;
|
|
51
51
|
video?: OpenGraphVideo;
|
|
52
52
|
}
|
|
53
53
|
|
|
54
|
-
interface
|
|
54
|
+
interface OpenGraphImage {
|
|
55
55
|
url: string;
|
|
56
|
+
secureUrl?: string;
|
|
57
|
+
type?: string;
|
|
56
58
|
width?: number;
|
|
57
59
|
height?: number;
|
|
58
60
|
alt?: string;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
interface OpenGraphVideos {
|
|
64
|
+
url: string;
|
|
65
|
+
secureUrl?: string;
|
|
59
66
|
type?: string;
|
|
67
|
+
width?: number;
|
|
68
|
+
height?: number;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
interface OpenGraphAudio {
|
|
72
|
+
url: string;
|
|
60
73
|
secureUrl?: string;
|
|
74
|
+
type?: string;
|
|
61
75
|
}
|
|
62
76
|
|
|
63
77
|
interface OpenGraphProfile {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "svelte-meta-tags",
|
|
3
|
-
"version": "3.0.
|
|
3
|
+
"version": "3.0.2",
|
|
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",
|
|
@@ -24,7 +24,7 @@
|
|
|
24
24
|
"@sveltejs/adapter-auto": "^2.1.0",
|
|
25
25
|
"@sveltejs/kit": "^1.22.6",
|
|
26
26
|
"@sveltejs/package": "^2.2.1",
|
|
27
|
-
"publint": "^0.2.
|
|
27
|
+
"publint": "^0.2.2",
|
|
28
28
|
"svelte": "^4.2.0",
|
|
29
29
|
"svelte-check": "^3.5.0",
|
|
30
30
|
"tslib": "^2.6.2",
|