svelte-meta-tags 2.2.2 → 2.3.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.
- package/CHANGELOG.md +18 -0
- package/JsonLd.svelte.d.ts +1 -1
- package/MetaTags.svelte +12 -0
- package/README.md +80 -45
- package/package.json +20 -23
- package/types.d.ts +4 -0
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,21 @@
|
|
|
1
|
+
# [2.3.0](https://github.com/oekazuma/svelte-meta-tags/compare/v2.2.3...v2.3.0) (2022-01-28)
|
|
2
|
+
|
|
3
|
+
### Features
|
|
4
|
+
|
|
5
|
+
- add twitter title description image imageAlt ([e3270f5](https://github.com/oekazuma/svelte-meta-tags/commit/e3270f54fda56483a192d34dfc9d589c7949fc5b))
|
|
6
|
+
|
|
7
|
+
## [2.2.3](https://github.com/oekazuma/svelte-meta-tags/compare/v2.2.2...v2.2.3) (2022-01-14)
|
|
8
|
+
|
|
9
|
+
### Bug Fixes
|
|
10
|
+
|
|
11
|
+
- fix path to type definitions ([7c49639](https://github.com/oekazuma/svelte-meta-tags/commit/7c49639c1f08fe6ee6ea3e036c9982b1c1979c77))
|
|
12
|
+
|
|
13
|
+
## [2.2.2](https://github.com/oekazuma/svelte-meta-tags/compare/v2.2.1...v2.2.2) (2021-12-26)
|
|
14
|
+
|
|
15
|
+
### Bug Fixes
|
|
16
|
+
|
|
17
|
+
- revert changes so that npm and yarn can also be used for installation ([f536977](https://github.com/oekazuma/svelte-meta-tags/commit/f536977550948f675f4207b80dc5aca96cc535a0))
|
|
18
|
+
|
|
1
19
|
## [2.2.1](https://github.com/oekazuma/svelte-meta-tags/compare/v2.2.0...v2.2.1) (2021-12-21)
|
|
2
20
|
|
|
3
21
|
### Bug Fixes
|
package/JsonLd.svelte.d.ts
CHANGED
package/MetaTags.svelte
CHANGED
|
@@ -78,6 +78,18 @@
|
|
|
78
78
|
{#if twitter.handle}
|
|
79
79
|
<meta name="twitter:creator" content={twitter.handle} />
|
|
80
80
|
{/if}
|
|
81
|
+
{#if twitter.title}
|
|
82
|
+
<meta name="twitter:title" content={twitter.title} />
|
|
83
|
+
{/if}
|
|
84
|
+
{#if twitter.description}
|
|
85
|
+
<meta name="twitter:description" content={twitter.description} />
|
|
86
|
+
{/if}
|
|
87
|
+
{#if twitter.image}
|
|
88
|
+
<meta name="twitter:image" content={twitter.image} />
|
|
89
|
+
{/if}
|
|
90
|
+
{#if twitter.imageAlt}
|
|
91
|
+
<meta name="twitter:image:alt" content={twitter.imageAlt} />
|
|
92
|
+
{/if}
|
|
81
93
|
{/if}
|
|
82
94
|
|
|
83
95
|
{#if facebook}
|
package/README.md
CHANGED
|
@@ -11,6 +11,10 @@ Svelte Meta Tags is a plugin that makes managing your SEO easier in Svelte proje
|
|
|
11
11
|
|
|
12
12
|
This library is inspired by [next-seo](https://github.com/garmeeh/next-seo)
|
|
13
13
|
|
|
14
|
+
**Would you like to support this project?**
|
|
15
|
+
|
|
16
|
+
<a href="https://www.buymeacoffee.com/oekazuma" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-orange.png" alt="Buy Me A Coffee" style="height: 60px !important;width: 217px !important;" ></a>
|
|
17
|
+
|
|
14
18
|
**Table of Contents**
|
|
15
19
|
|
|
16
20
|
- [Installing](#-installing)
|
|
@@ -44,13 +48,19 @@ This library is inspired by [next-seo](https://github.com/garmeeh/next-seo)
|
|
|
44
48
|
### 📦 Installing
|
|
45
49
|
|
|
46
50
|
```shell
|
|
47
|
-
npm install svelte-meta-tags
|
|
51
|
+
npm install -D svelte-meta-tags
|
|
48
52
|
```
|
|
49
53
|
|
|
50
54
|
or
|
|
51
55
|
|
|
52
56
|
```shell
|
|
53
|
-
yarn add svelte-meta-tags
|
|
57
|
+
yarn add -D svelte-meta-tags
|
|
58
|
+
```
|
|
59
|
+
|
|
60
|
+
or
|
|
61
|
+
|
|
62
|
+
```shell
|
|
63
|
+
pnpm add -D svelte-meta-tags
|
|
54
64
|
```
|
|
55
65
|
|
|
56
66
|
### 🚀 Usage
|
|
@@ -101,7 +111,11 @@ yarn add svelte-meta-tags
|
|
|
101
111
|
twitter={{
|
|
102
112
|
handle: '@handle',
|
|
103
113
|
site: '@site',
|
|
104
|
-
cardType: 'summary_large_image'
|
|
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'
|
|
105
119
|
}}
|
|
106
120
|
facebook={{
|
|
107
121
|
appId: '1234567890'
|
|
@@ -111,49 +125,65 @@ yarn add svelte-meta-tags
|
|
|
111
125
|
|
|
112
126
|
### Properties
|
|
113
127
|
|
|
114
|
-
| Property | Type | Description
|
|
115
|
-
| ---------------------------------- | ----------------------- |
|
|
116
|
-
| `title` | string | Sets the page meta title.
|
|
117
|
-
| `noindex` | boolean (default false) | Sets whether page should be indexed or not
|
|
118
|
-
| `nofollow` | boolean (default false) | Sets whether page should be followed or not
|
|
119
|
-
| `additionRobotsProps` | Object | Set the more meta information for the `X-Robots-Tag` [More Info](#robotsprops)
|
|
120
|
-
| `description` | string | Sets the page meta description.
|
|
121
|
-
| `canonical` | string | Set the page canonical url.
|
|
122
|
-
| `mobileAlternate.media` | string | Set what screen size the mobile website should be served from
|
|
123
|
-
| `mobileAlternate.href` | string | Set the mobile page alternate url
|
|
124
|
-
| `languageAlternates` | array | Set the language of the alternate urls. Expects array of objects with the shape: `{ hrefLang: string, href: string }`
|
|
125
|
-
| `additionalMetaTags` | array | Allows you to add a meta tag that is not documented here. [More Info](#additional-meta-tags)
|
|
126
|
-
| `additionalLinkTags` | array | Allows you to add a link tag that is not documented here. [More Info](#additional-link-tags)
|
|
127
|
-
| `twitter.cardType` | string | The card type, which will be one of `summary`, `summary_large_image`, `app`, or `player`
|
|
128
|
-
| `twitter.site` | string | @username for the website used in the card footer .
|
|
129
|
-
| `twitter.handle` | string | @username for the content creator / author (outputs as `twitter:creator`)
|
|
130
|
-
| `
|
|
131
|
-
| `
|
|
132
|
-
| `
|
|
133
|
-
| `
|
|
134
|
-
| `
|
|
135
|
-
| `openGraph.
|
|
136
|
-
| `openGraph.
|
|
137
|
-
| `openGraph.
|
|
138
|
-
| `openGraph.
|
|
139
|
-
| `openGraph.
|
|
140
|
-
| `openGraph.
|
|
141
|
-
| `openGraph.
|
|
142
|
-
| `openGraph.
|
|
143
|
-
| `openGraph.
|
|
144
|
-
| `openGraph.
|
|
145
|
-
| `openGraph.
|
|
146
|
-
| `openGraph.
|
|
147
|
-
| `openGraph.
|
|
148
|
-
| `openGraph.
|
|
149
|
-
| `openGraph.
|
|
150
|
-
| `openGraph.
|
|
151
|
-
| `openGraph.article.
|
|
152
|
-
| `openGraph.article.
|
|
128
|
+
| Property | Type | Description |
|
|
129
|
+
| ---------------------------------- | ----------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
130
|
+
| `title` | string | Sets the page meta title. |
|
|
131
|
+
| `noindex` | boolean (default false) | Sets whether page should be indexed or not |
|
|
132
|
+
| `nofollow` | boolean (default false) | Sets whether page should be followed or not |
|
|
133
|
+
| `additionRobotsProps` | Object | Set the more meta information for the `X-Robots-Tag` [More Info](#robotsprops) |
|
|
134
|
+
| `description` | string | Sets the page meta description. |
|
|
135
|
+
| `canonical` | string | Set the page canonical url. |
|
|
136
|
+
| `mobileAlternate.media` | string | Set what screen size the mobile website should be served from |
|
|
137
|
+
| `mobileAlternate.href` | string | Set the mobile page alternate url |
|
|
138
|
+
| `languageAlternates` | array | Set the language of the alternate urls. Expects array of objects with the shape: `{ hrefLang: string, href: string }` |
|
|
139
|
+
| `additionalMetaTags` | array | Allows you to add a meta tag that is not documented here. [More Info](#additional-meta-tags) |
|
|
140
|
+
| `additionalLinkTags` | array | Allows you to add a link tag that is not documented here. [More Info](#additional-link-tags) |
|
|
141
|
+
| `twitter.cardType` | string | The card type, which will be one of `summary`, `summary_large_image`, `app`, or `player` |
|
|
142
|
+
| `twitter.site` | string | @username for the website used in the card footer . |
|
|
143
|
+
| `twitter.handle` | string | @username for the content creator / author (outputs as `twitter:creator`) |
|
|
144
|
+
| `twitter.title` | string | The concise title for the related content |
|
|
145
|
+
| `twitter.description` | string | The description that concisely summarizes the content as appropriate for presentation within a Tweet. You should not re-use the title as the description or use this field to describe the general services provided by the website |
|
|
146
|
+
| `twitter.image` | string | The URL to a unique image representing the content of the page. Images for this Card support an aspect ratio of 2:1 with minimum dimensions of 300x157 or maximum of 4096x4096 pixels. Images must be less than 5MB in size. JPG, PNG, WEBP and GIF formats are supported. Only the first frame of an animated GIF will be used. SVG is not supported |
|
|
147
|
+
| `twitter.imageAlt` | string | The text description of the image conveying the essential nature of an image to users who are visually impaired. Maximum 420 characters. |
|
|
148
|
+
| `facebook.appId` | string | Used for Facebook Insights, you must add a facebook app ID to your page to for it |
|
|
149
|
+
| `openGraph.url` | string | The canonical URL of your object that will be used as its permanent ID in the graph. |
|
|
150
|
+
| `openGraph.type` | string | The type of your object. Depending on the type you specify, other properties may also be required [More Info](#open-graph) |
|
|
151
|
+
| `openGraph.title` | string | The open graph title, this can be different than your meta title. |
|
|
152
|
+
| `openGraph.description` | string | The open graph description, this can be different than your meta description. |
|
|
153
|
+
| `openGraph.images` | array | An array of images to be used as a preview. If multiple supplied you can choose one when sharing. [See Examples](#open-graph-examples) |
|
|
154
|
+
| `openGraph.videos` | array | An array of videos (object) |
|
|
155
|
+
| `openGraph.locale` | string | The locale the open graph tags are marked up in. |
|
|
156
|
+
| `openGraph.site_name` | string | If your object is part of a larger web site, the name which should be displayed for the overall site. |
|
|
157
|
+
| `openGraph.profile.firstName` | string | Person's first name. |
|
|
158
|
+
| `openGraph.profile.lastName` | string | Person's last name. |
|
|
159
|
+
| `openGraph.profile.username` | string | Person's username. |
|
|
160
|
+
| `openGraph.profile.gender` | string | Person's gender. |
|
|
161
|
+
| `openGraph.book.authors` | string[] | Writers of the article. [See Examples](#open-graph-examples) |
|
|
162
|
+
| `openGraph.book.isbn` | string | The [ISBN](https://en.wikipedia.org/wiki/International_Standard_Book_Number) |
|
|
163
|
+
| `openGraph.book.releaseDate` | datetime | The date the book was released. |
|
|
164
|
+
| `openGraph.book.tags` | string[] | Tag words associated with this book. |
|
|
165
|
+
| `openGraph.article.publishedTime` | datetime | When the article was first published. [See Examples](#open-graph-examples) |
|
|
166
|
+
| `openGraph.article.modifiedTime` | datetime | When the article was last changed. |
|
|
167
|
+
| `openGraph.article.expirationTime` | datetime | When the article is out of date after. |
|
|
168
|
+
| `openGraph.article.authors` | string[] | Writers of the article. |
|
|
169
|
+
| `openGraph.article.section` | string | A high-level section name. E.g. Technology |
|
|
170
|
+
| `openGraph.article.tags` | string[] | Tag words associated with this article. |
|
|
153
171
|
|
|
154
172
|
#### Twitter
|
|
155
173
|
|
|
156
|
-
|
|
174
|
+
```js
|
|
175
|
+
twitter={{
|
|
176
|
+
handle: '@handle',
|
|
177
|
+
site: '@site',
|
|
178
|
+
cardType: 'summary_large_image',
|
|
179
|
+
title: 'Twitter',
|
|
180
|
+
description: 'Twitter',
|
|
181
|
+
image: 'https://www.example.ie/twitter-image.jpg',
|
|
182
|
+
imageAlt: 'Twitter image alt'
|
|
183
|
+
}}
|
|
184
|
+
```
|
|
185
|
+
|
|
186
|
+
Check out the Twitter [documentation](https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/summary) for more information.
|
|
157
187
|
|
|
158
188
|
#### Facebook
|
|
159
189
|
|
|
@@ -739,7 +769,8 @@ You can import and use the types `MetaTagsProps` and `JsonLdProps`.
|
|
|
739
769
|
|
|
740
770
|
```svelte
|
|
741
771
|
<script lang="ts">
|
|
742
|
-
import { MetaTags, JsonLd
|
|
772
|
+
import { MetaTags, JsonLd } from 'svelte-meta-tags';
|
|
773
|
+
import type { MetaTagsProps, JsonLdProps } from 'svelte-meta-tags';
|
|
743
774
|
|
|
744
775
|
const metatags: MetaTagsProps = {
|
|
745
776
|
title: 'Types Page Title | Svelte Meta Tags',
|
|
@@ -764,7 +795,11 @@ You can import and use the types `MetaTagsProps` and `JsonLdProps`.
|
|
|
764
795
|
twitter: {
|
|
765
796
|
handle: '@handle',
|
|
766
797
|
site: '@site',
|
|
767
|
-
cardType: 'summary_large_image'
|
|
798
|
+
cardType: 'summary_large_image',
|
|
799
|
+
title: 'Types Page Title | Svelte Meta Tags',
|
|
800
|
+
description: 'Description of Types page',
|
|
801
|
+
image: 'https://www.example.ie/twitter-image.jpg',
|
|
802
|
+
imageAlt: 'Twitter image alt'
|
|
768
803
|
},
|
|
769
804
|
facebook: {
|
|
770
805
|
appId: '1234567890'
|
package/package.json
CHANGED
|
@@ -1,13 +1,9 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "svelte-meta-tags",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.3.1",
|
|
4
4
|
"description": "Svelte Meta Tags is a plugin that makes managing your SEO easier in Svelte projects.",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"type": "module",
|
|
7
|
-
"svelte": "index.js",
|
|
8
|
-
"main": "index.js",
|
|
9
|
-
"module": "index.js",
|
|
10
|
-
"types": "index.d.ts",
|
|
11
7
|
"keywords": [
|
|
12
8
|
"svelte",
|
|
13
9
|
"svelteKit",
|
|
@@ -25,29 +21,29 @@
|
|
|
25
21
|
"schema-dts": "1.0.0"
|
|
26
22
|
},
|
|
27
23
|
"devDependencies": {
|
|
28
|
-
"@commitlint/cli": "16.
|
|
29
|
-
"@commitlint/config-conventional": "16.
|
|
24
|
+
"@commitlint/cli": "16.2.1",
|
|
25
|
+
"@commitlint/config-conventional": "16.2.1",
|
|
30
26
|
"@semantic-release/changelog": "6.0.1",
|
|
31
27
|
"@semantic-release/git": "10.0.1",
|
|
32
|
-
"@sveltejs/kit": "1.0.0-next.
|
|
33
|
-
"@typescript-eslint/eslint-plugin": "5.
|
|
34
|
-
"@typescript-eslint/parser": "5.
|
|
35
|
-
"cypress": "9.
|
|
36
|
-
"eslint": "8.
|
|
37
|
-
"eslint-config-prettier": "8.
|
|
28
|
+
"@sveltejs/kit": "1.0.0-next.284",
|
|
29
|
+
"@typescript-eslint/eslint-plugin": "5.12.1",
|
|
30
|
+
"@typescript-eslint/parser": "5.12.1",
|
|
31
|
+
"cypress": "9.5.0",
|
|
32
|
+
"eslint": "8.9.0",
|
|
33
|
+
"eslint-config-prettier": "8.4.0",
|
|
38
34
|
"eslint-plugin-cypress": "2.12.1",
|
|
39
|
-
"eslint-plugin-svelte3": "3.
|
|
35
|
+
"eslint-plugin-svelte3": "3.4.1",
|
|
40
36
|
"husky": "7.0.4",
|
|
41
|
-
"lint-staged": "12.
|
|
37
|
+
"lint-staged": "12.3.4",
|
|
42
38
|
"prettier": "2.5.1",
|
|
43
|
-
"prettier-plugin-svelte": "2.
|
|
44
|
-
"semantic-release": "
|
|
45
|
-
"svelte": "3.
|
|
46
|
-
"svelte-check": "2.
|
|
47
|
-
"svelte-preprocess": "4.10.
|
|
48
|
-
"svelte2tsx": "0.
|
|
39
|
+
"prettier-plugin-svelte": "2.6.0",
|
|
40
|
+
"semantic-release": "19.0.2",
|
|
41
|
+
"svelte": "3.46.4",
|
|
42
|
+
"svelte-check": "2.4.5",
|
|
43
|
+
"svelte-preprocess": "4.10.4",
|
|
44
|
+
"svelte2tsx": "0.5.5",
|
|
49
45
|
"tslib": "2.3.1",
|
|
50
|
-
"typescript": "4.5.
|
|
46
|
+
"typescript": "4.5.5"
|
|
51
47
|
},
|
|
52
48
|
"peerDependencies": {
|
|
53
49
|
"svelte": "^3.39.0"
|
|
@@ -94,5 +90,6 @@
|
|
|
94
90
|
"./JsonLd.svelte": "./JsonLd.svelte",
|
|
95
91
|
"./MetaTags.svelte": "./MetaTags.svelte",
|
|
96
92
|
".": "./index.js"
|
|
97
|
-
}
|
|
93
|
+
},
|
|
94
|
+
"svelte": "./index.js"
|
|
98
95
|
}
|
package/types.d.ts
CHANGED
|
@@ -24,6 +24,10 @@ export interface Twitter {
|
|
|
24
24
|
cardType?: 'summary' | 'summary_large_image' | 'app' | 'player';
|
|
25
25
|
site?: string;
|
|
26
26
|
handle?: string;
|
|
27
|
+
title?: string;
|
|
28
|
+
description?: string;
|
|
29
|
+
image?: string;
|
|
30
|
+
imageAlt?: string;
|
|
27
31
|
}
|
|
28
32
|
|
|
29
33
|
export interface Facebook {
|