diff --git a/.changeset/grumpy-windows-melt.md b/.changeset/grumpy-windows-melt.md new file mode 100644 index 0000000..fc3bed9 --- /dev/null +++ b/.changeset/grumpy-windows-melt.md @@ -0,0 +1,5 @@ +--- +'svelte-meta-tags': patch +--- + +fix: Fix incorrect type definitions and openGraph rendering diff --git a/.changeset/lazy-hats-flow.md b/.changeset/lazy-hats-flow.md new file mode 100644 index 0000000..6853a6c --- /dev/null +++ b/.changeset/lazy-hats-flow.md @@ -0,0 +1,5 @@ +--- +'svelte-meta-tags': patch +--- + +fix: openGraph.site_name has been renamed to openGraph.siteName diff --git a/README.md b/README.md index 03f8972..3fb98fd 100644 --- a/README.md +++ b/README.md @@ -106,7 +106,7 @@ pnpm add -D svelte-meta-tags { url: 'https://www.example.ie/og-image-03.jpg' }, { url: 'https://www.example.ie/og-image-04.jpg' } ], - site_name: 'SiteName' + siteName: 'SiteName' }} twitter={{ handle: '@handle', @@ -154,7 +154,7 @@ pnpm add -D svelte-meta-tags | `openGraph.videos` | array | An array of videos (object) | | `openGraph.audio` | array | An array of audio(object) | | `openGraph.locale` | string | The locale in which the open graph tags are highlighted | -| `openGraph.site_name` | string | If your item is part of a larger website, the name that should be displayed for the entire site | +| `openGraph.siteName` | string | If your item is part of a larger website, the name that should be displayed for the entire site | | `openGraph.profile.firstName` | string | Person's first name | | `openGraph.profile.lastName` | string | Person's last name | | `openGraph.profile.username` | string | Person's username | @@ -463,7 +463,7 @@ Full info on [http://ogp.me/](http://ogp.me/#type_video) releaseDate: '2022-12-21T22:04:11Z', tags: ['Tag A', 'Tag B', 'Tag C'] }, - site_name: 'SiteName' + siteName: 'SiteName' }} /> ``` @@ -943,11 +943,11 @@ interface OpenGraph { type?: string; title?: string; description?: string; - images?: ReadonlyArray; - videos?: ReadonlyArray; - audio?: ReadonlyArray; + images?: ReadonlyArray; + videos?: ReadonlyArray; + audio?: ReadonlyArray; locale?: string; - site_name?: string; + siteName?: string; profile?: OpenGraphProfile; book?: OpenGraphBook; article?: OpenGraphArticle; @@ -982,16 +982,38 @@ interface LinkTag { The following are referenced by the public types documented above, but cannot be imported directly -### OpenGraphMedia +### OpenGraphImage ```ts -interface OpenGraphMedia { +interface OpenGraphImage { url: string; + secureUrl?: string; + type?: string; width?: number; height?: number; alt?: string; - type?: string; +} +``` + +### OpenGraphVideos + +```ts +interface OpenGraphVideos { + url: string; secureUrl?: string; + type?: string; + width?: number; + height?: number; +} +``` + +### OpenGraphAudio + +```ts +interface OpenGraphAudio { + url: string; + secureUrl?: string; + type?: string; } ``` diff --git a/packages/svelte-meta-tags/src/lib/MetaTags.svelte b/packages/svelte-meta-tags/src/lib/MetaTags.svelte index f2e2021..a0ab098 100644 --- a/packages/svelte-meta-tags/src/lib/MetaTags.svelte +++ b/packages/svelte-meta-tags/src/lib/MetaTags.svelte @@ -230,15 +230,18 @@ {#if image.height} {/if} + {#if image.secureUrl} + + {/if} + {#if image.type} + + {/if} {/each} {/if} {#if openGraph.videos && openGraph.videos.length} {#each openGraph.videos as video} - {#if video.alt} - - {/if} {#if video.width} {/if} @@ -254,12 +257,24 @@ {/each} {/if} + {#if openGraph.audio && openGraph.audio.length} + {#each openGraph.audio as audio} + + {#if audio.secureUrl} + + {/if} + {#if audio.type} + + {/if} + {/each} + {/if} + {#if openGraph.locale} {/if} - {#if openGraph.site_name} - + {#if openGraph.siteName} + {/if} {/if} diff --git a/packages/svelte-meta-tags/src/lib/types.d.ts b/packages/svelte-meta-tags/src/lib/types.d.ts index 05cfd28..1bf59d6 100644 --- a/packages/svelte-meta-tags/src/lib/types.d.ts +++ b/packages/svelte-meta-tags/src/lib/types.d.ts @@ -40,24 +40,38 @@ export interface OpenGraph { type?: string; title?: string; description?: string; - images?: ReadonlyArray; - videos?: ReadonlyArray; - audio?: ReadonlyArray; + images?: ReadonlyArray; + videos?: ReadonlyArray; + audio?: ReadonlyArray; locale?: string; - site_name?: string; + siteName?: string; profile?: OpenGraphProfile; book?: OpenGraphBook; article?: OpenGraphArticle; video?: OpenGraphVideo; } -interface OpenGraphMedia { +interface OpenGraphImage { url: string; + secureUrl?: string; + type?: string; width?: number; height?: number; alt?: string; - type?: string; +} + +interface OpenGraphVideos { + url: string; secureUrl?: string; + type?: string; + width?: number; + height?: number; +} + +interface OpenGraphAudio { + url: string; + secureUrl?: string; + type?: string; } interface OpenGraphProfile { diff --git a/tests/v3/src/routes/+page.svelte b/tests/v3/src/routes/+page.svelte index 4d4c230..754639c 100644 --- a/tests/v3/src/routes/+page.svelte +++ b/tests/v3/src/routes/+page.svelte @@ -16,12 +16,30 @@ images: [ { url: 'https://www.example.ie/og-image.jpg', + alt: 'Og Image Alt', width: 800, height: 600, - alt: 'Og Image Alt' + secureUrl: 'https://www.example.ie/og-image.jpg', + type: 'image/jpeg' } ], - site_name: 'SiteName' + videos: [ + { + url: 'https://www.example.ie/og-video.mp4', + width: 800, + height: 600, + secureUrl: 'https://www.example.ie/og-video.mp4', + type: 'video/mp4' + } + ], + audio: [ + { + url: 'https://www.example.ie/og-audio.mp3', + secureUrl: 'https://www.example.ie/og-audio.mp3', + type: 'audio/mp3' + } + ], + siteName: 'SiteName' }} twitter={{ handle: '@handle', diff --git a/tests/v3/src/routes/another/+page.svelte b/tests/v3/src/routes/another/+page.svelte index 1a60d78..579e23a 100644 --- a/tests/v3/src/routes/another/+page.svelte +++ b/tests/v3/src/routes/another/+page.svelte @@ -35,7 +35,7 @@ alt: 'Og Image Alt Another Second' } ], - site_name: 'SiteName Another' + siteName: 'SiteName Another' }} additionalMetaTags={[ { diff --git a/tests/v3/src/routes/article/+page.svelte b/tests/v3/src/routes/article/+page.svelte index 953b1f9..619bad0 100644 --- a/tests/v3/src/routes/article/+page.svelte +++ b/tests/v3/src/routes/article/+page.svelte @@ -47,7 +47,7 @@ alt: 'Og Image Alt Article Title D' } ], - site_name: 'SiteName' + siteName: 'SiteName' }} twitter={{ handle: '@handle', diff --git a/tests/v3/src/routes/book/+page.svelte b/tests/v3/src/routes/book/+page.svelte index e43dc12..6b1b25b 100644 --- a/tests/v3/src/routes/book/+page.svelte +++ b/tests/v3/src/routes/book/+page.svelte @@ -45,7 +45,7 @@ alt: 'Og Image Alt Book Title D' } ], - site_name: 'SiteName' + siteName: 'SiteName' }} twitter={{ handle: '@handle', diff --git a/tests/v3/src/routes/profile/+page.svelte b/tests/v3/src/routes/profile/+page.svelte index 494c9b7..d67dbf2 100644 --- a/tests/v3/src/routes/profile/+page.svelte +++ b/tests/v3/src/routes/profile/+page.svelte @@ -42,7 +42,7 @@ alt: 'Og Image Alt firstlast123 D' } ], - site_name: 'SiteName' + siteName: 'SiteName' }} twitter={{ handle: '@handle', diff --git a/tests/v3/src/routes/video/+page.svelte b/tests/v3/src/routes/video/+page.svelte index 0e1626f..cf2d537 100644 --- a/tests/v3/src/routes/video/+page.svelte +++ b/tests/v3/src/routes/video/+page.svelte @@ -59,7 +59,7 @@ alt: 'Og Image Alt Video Title D' } ], - site_name: 'SiteName' + siteName: 'SiteName' }} twitter={{ handle: '@handle', diff --git a/tests/v3/tests/normal.test.ts b/tests/v3/tests/normal.test.ts index 3f49cd8..2ae5416 100644 --- a/tests/v3/tests/normal.test.ts +++ b/tests/v3/tests/normal.test.ts @@ -27,6 +27,36 @@ test('Normal SEO loads correctly', async ({ page, baseURL }) => { const ogImageHeight = page.locator('head meta[property="og:image:height"]'); await expect(ogImageHeight).toHaveCount(1); await expect(ogImageHeight).toHaveAttribute('content', '600'); + const ogImageType = page.locator('head meta[property="og:image:type"]'); + await expect(ogImageType).toHaveCount(1); + await expect(ogImageType).toHaveAttribute('content', 'image/jpeg'); + const ogImageSecureUrl = page.locator('head meta[property="og:image:secure_url"]'); + await expect(ogImageSecureUrl).toHaveCount(1); + await expect(ogImageSecureUrl).toHaveAttribute('content', 'https://www.example.ie/og-image.jpg'); + const ogVideo = page.locator('head meta[property="og:video"]'); + await expect(ogVideo).toHaveCount(1); + await expect(ogVideo).toHaveAttribute('content', 'https://www.example.ie/og-video.mp4'); + const ogVideoWidth = page.locator('head meta[property="og:video:width"]'); + await expect(ogVideoWidth).toHaveCount(1); + await expect(ogVideoWidth).toHaveAttribute('content', '800'); + const ogVideoHeight = page.locator('head meta[property="og:video:height"]'); + await expect(ogVideoHeight).toHaveCount(1); + await expect(ogVideoHeight).toHaveAttribute('content', '600'); + const ogVideoSecureUrl = page.locator('head meta[property="og:video:secure_url"]'); + await expect(ogVideoSecureUrl).toHaveCount(1); + await expect(ogVideoSecureUrl).toHaveAttribute('content', 'https://www.example.ie/og-video.mp4'); + const ogVideoType = page.locator('head meta[property="og:video:type"]'); + await expect(ogVideoType).toHaveCount(1); + await expect(ogVideoType).toHaveAttribute('content', 'video/mp4'); + const ogAudio = page.locator('head meta[property="og:audio"]'); + await expect(ogAudio).toHaveCount(1); + await expect(ogAudio).toHaveAttribute('content', 'https://www.example.ie/og-audio.mp3'); + const ogAudioSecureUrl = page.locator('head meta[property="og:audio:secure_url"]'); + await expect(ogAudioSecureUrl).toHaveCount(1); + await expect(ogAudioSecureUrl).toHaveAttribute('content', 'https://www.example.ie/og-audio.mp3'); + const ogAudioType = page.locator('head meta[property="og:audio:type"]'); + await expect(ogAudioType).toHaveCount(1); + await expect(ogAudioType).toHaveAttribute('content', 'audio/mp3'); await expect(page.locator('head meta[property="og:site_name"]')).toHaveAttribute('content', 'SiteName'); await expect(page.locator('head meta[property="fb:app_id"]')).toHaveAttribute('content', '1234567890'); await expect(page.locator('head meta[name="twitter:card"]')).toHaveAttribute('content', 'summary_large_image'); diff --git a/tests/v4/src/routes/+page.svelte b/tests/v4/src/routes/+page.svelte index 4d4c230..754639c 100644 --- a/tests/v4/src/routes/+page.svelte +++ b/tests/v4/src/routes/+page.svelte @@ -16,12 +16,30 @@ images: [ { url: 'https://www.example.ie/og-image.jpg', + alt: 'Og Image Alt', width: 800, height: 600, - alt: 'Og Image Alt' + secureUrl: 'https://www.example.ie/og-image.jpg', + type: 'image/jpeg' } ], - site_name: 'SiteName' + videos: [ + { + url: 'https://www.example.ie/og-video.mp4', + width: 800, + height: 600, + secureUrl: 'https://www.example.ie/og-video.mp4', + type: 'video/mp4' + } + ], + audio: [ + { + url: 'https://www.example.ie/og-audio.mp3', + secureUrl: 'https://www.example.ie/og-audio.mp3', + type: 'audio/mp3' + } + ], + siteName: 'SiteName' }} twitter={{ handle: '@handle', diff --git a/tests/v4/src/routes/another/+page.svelte b/tests/v4/src/routes/another/+page.svelte index 1a60d78..579e23a 100644 --- a/tests/v4/src/routes/another/+page.svelte +++ b/tests/v4/src/routes/another/+page.svelte @@ -35,7 +35,7 @@ alt: 'Og Image Alt Another Second' } ], - site_name: 'SiteName Another' + siteName: 'SiteName Another' }} additionalMetaTags={[ { diff --git a/tests/v4/src/routes/article/+page.svelte b/tests/v4/src/routes/article/+page.svelte index 953b1f9..619bad0 100644 --- a/tests/v4/src/routes/article/+page.svelte +++ b/tests/v4/src/routes/article/+page.svelte @@ -47,7 +47,7 @@ alt: 'Og Image Alt Article Title D' } ], - site_name: 'SiteName' + siteName: 'SiteName' }} twitter={{ handle: '@handle', diff --git a/tests/v4/src/routes/book/+page.svelte b/tests/v4/src/routes/book/+page.svelte index e43dc12..6b1b25b 100644 --- a/tests/v4/src/routes/book/+page.svelte +++ b/tests/v4/src/routes/book/+page.svelte @@ -45,7 +45,7 @@ alt: 'Og Image Alt Book Title D' } ], - site_name: 'SiteName' + siteName: 'SiteName' }} twitter={{ handle: '@handle', diff --git a/tests/v4/src/routes/profile/+page.svelte b/tests/v4/src/routes/profile/+page.svelte index 494c9b7..d67dbf2 100644 --- a/tests/v4/src/routes/profile/+page.svelte +++ b/tests/v4/src/routes/profile/+page.svelte @@ -42,7 +42,7 @@ alt: 'Og Image Alt firstlast123 D' } ], - site_name: 'SiteName' + siteName: 'SiteName' }} twitter={{ handle: '@handle', diff --git a/tests/v4/src/routes/video/+page.svelte b/tests/v4/src/routes/video/+page.svelte index 0e1626f..cf2d537 100644 --- a/tests/v4/src/routes/video/+page.svelte +++ b/tests/v4/src/routes/video/+page.svelte @@ -59,7 +59,7 @@ alt: 'Og Image Alt Video Title D' } ], - site_name: 'SiteName' + siteName: 'SiteName' }} twitter={{ handle: '@handle', diff --git a/tests/v4/tests/normal.test.ts b/tests/v4/tests/normal.test.ts index 3f49cd8..2ae5416 100644 --- a/tests/v4/tests/normal.test.ts +++ b/tests/v4/tests/normal.test.ts @@ -27,6 +27,36 @@ test('Normal SEO loads correctly', async ({ page, baseURL }) => { const ogImageHeight = page.locator('head meta[property="og:image:height"]'); await expect(ogImageHeight).toHaveCount(1); await expect(ogImageHeight).toHaveAttribute('content', '600'); + const ogImageType = page.locator('head meta[property="og:image:type"]'); + await expect(ogImageType).toHaveCount(1); + await expect(ogImageType).toHaveAttribute('content', 'image/jpeg'); + const ogImageSecureUrl = page.locator('head meta[property="og:image:secure_url"]'); + await expect(ogImageSecureUrl).toHaveCount(1); + await expect(ogImageSecureUrl).toHaveAttribute('content', 'https://www.example.ie/og-image.jpg'); + const ogVideo = page.locator('head meta[property="og:video"]'); + await expect(ogVideo).toHaveCount(1); + await expect(ogVideo).toHaveAttribute('content', 'https://www.example.ie/og-video.mp4'); + const ogVideoWidth = page.locator('head meta[property="og:video:width"]'); + await expect(ogVideoWidth).toHaveCount(1); + await expect(ogVideoWidth).toHaveAttribute('content', '800'); + const ogVideoHeight = page.locator('head meta[property="og:video:height"]'); + await expect(ogVideoHeight).toHaveCount(1); + await expect(ogVideoHeight).toHaveAttribute('content', '600'); + const ogVideoSecureUrl = page.locator('head meta[property="og:video:secure_url"]'); + await expect(ogVideoSecureUrl).toHaveCount(1); + await expect(ogVideoSecureUrl).toHaveAttribute('content', 'https://www.example.ie/og-video.mp4'); + const ogVideoType = page.locator('head meta[property="og:video:type"]'); + await expect(ogVideoType).toHaveCount(1); + await expect(ogVideoType).toHaveAttribute('content', 'video/mp4'); + const ogAudio = page.locator('head meta[property="og:audio"]'); + await expect(ogAudio).toHaveCount(1); + await expect(ogAudio).toHaveAttribute('content', 'https://www.example.ie/og-audio.mp3'); + const ogAudioSecureUrl = page.locator('head meta[property="og:audio:secure_url"]'); + await expect(ogAudioSecureUrl).toHaveCount(1); + await expect(ogAudioSecureUrl).toHaveAttribute('content', 'https://www.example.ie/og-audio.mp3'); + const ogAudioType = page.locator('head meta[property="og:audio:type"]'); + await expect(ogAudioType).toHaveCount(1); + await expect(ogAudioType).toHaveAttribute('content', 'audio/mp3'); await expect(page.locator('head meta[property="og:site_name"]')).toHaveAttribute('content', 'SiteName'); await expect(page.locator('head meta[property="fb:app_id"]')).toHaveAttribute('content', '1234567890'); await expect(page.locator('head meta[name="twitter:card"]')).toHaveAttribute('content', 'summary_large_image');