Gittes-archive/svelte-meta-tags
2
0
Fork 0
mirror of https://github.com/oekazuma/svelte-meta-tags.git synced 2025-12-11 20:15:14 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix: Addresses bugs and forgotten implementations that occurred in v3 (#800)

Browse Source 
* fix: Addresses bugs and forgotten implementations that occurred in v3
This commit is contained in:
Kazuma Oe 2023-08-22 02:51:58 +09:00 committed by GitHub
parent 14e7afce78
commit edeb45b608
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
19 changed files with 192 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/grumpy-windows-melt.md Normal file
View File

@ -0,0 +1,5 @@
---
'svelte-meta-tags': patch
---
fix: Fix incorrect type definitions and openGraph rendering

5
.changeset/lazy-hats-flow.md Normal file
View File

@ -0,0 +1,5 @@
---
'svelte-meta-tags': patch
---
fix: openGraph.site_name has been renamed to openGraph.siteName

42
README.md
View File

@ -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<OpenGraphMedia>;
videos?: ReadonlyArray<OpenGraphMedia>;
audio?: ReadonlyArray<OpenGraphMedia>;
images?: ReadonlyArray<OpenGraphImage>;
videos?: ReadonlyArray<OpenGraphVideos>;
audio?: ReadonlyArray<OpenGraphAudio>;
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;
}
```

25
packages/svelte-meta-tags/src/lib/MetaTags.svelte
View File

@ -230,15 +230,18 @@
{#if image.height}
<meta property="og:image:height" content={image.height.toString()} />
{/if}
{#if image.secureUrl}
<meta property="og:image:secure_url" content={image.secureUrl.toString()} />
{/if}
{#if image.type}
<meta property="og:image:type" content={image.type.toString()} />
{/if}
{/each}
{/if}
{#if openGraph.videos && openGraph.videos.length}
{#each openGraph.videos as video}
<meta property="og:video" content={video.url} />
{#if video.alt}
<meta property="og:video:alt" content={video.alt} />
{/if}
{#if video.width}
<meta property="og:video:width" content={video.width.toString()} />
{/if}
@ -254,12 +257,24 @@
{/each}
{/if}
{#if openGraph.audio && openGraph.audio.length}
{#each openGraph.audio as audio}
<meta property="og:audio" content={audio.url} />
{#if audio.secureUrl}
<meta property="og:audio:secure_url" content={audio.secureUrl.toString()} />
{/if}
{#if audio.type}
<meta property="og:audio:type" content={audio.type.toString()} />
{/if}
{/each}
{/if}
{#if openGraph.locale}
<meta property="og:locale" content={openGraph.locale} />
{/if}
{#if openGraph.site_name}
<meta property="og:site_name" content={openGraph.site_name} />
{#if openGraph.siteName}
<meta property="og:site_name" content={openGraph.siteName} />
{/if}
{/if}

26
packages/svelte-meta-tags/src/lib/types.d.ts vendored
View File

@ -40,24 +40,38 @@ export interface OpenGraph {
type?: string;
title?: string;
description?: string;
images?: ReadonlyArray<OpenGraphMedia>;
videos?: ReadonlyArray<OpenGraphMedia>;
audio?: ReadonlyArray<OpenGraphMedia>;
images?: ReadonlyArray<OpenGraphImage>;
videos?: ReadonlyArray<OpenGraphVideos>;
audio?: ReadonlyArray<OpenGraphAudio>;
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 {

22
tests/v3/src/routes/+page.svelte
View File

@ -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',

2
tests/v3/src/routes/another/+page.svelte
View File

@ -35,7 +35,7 @@
alt: 'Og Image Alt Another Second'
}
],
site_name: 'SiteName Another'
siteName: 'SiteName Another'
}}
additionalMetaTags={[
{

2
tests/v3/src/routes/article/+page.svelte
View File

@ -47,7 +47,7 @@
alt: 'Og Image Alt Article Title D'
}
],
site_name: 'SiteName'
siteName: 'SiteName'
}}
twitter={{
handle: '@handle',

2
tests/v3/src/routes/book/+page.svelte
View File

@ -45,7 +45,7 @@
alt: 'Og Image Alt Book Title D'
}
],
site_name: 'SiteName'
siteName: 'SiteName'
}}
twitter={{
handle: '@handle',

2
tests/v3/src/routes/profile/+page.svelte
View File

@ -42,7 +42,7 @@
alt: 'Og Image Alt firstlast123 D'
}
],
site_name: 'SiteName'
siteName: 'SiteName'
}}
twitter={{
handle: '@handle',

2
tests/v3/src/routes/video/+page.svelte
View File

@ -59,7 +59,7 @@
alt: 'Og Image Alt Video Title D'
}
],
site_name: 'SiteName'
siteName: 'SiteName'
}}
twitter={{
handle: '@handle',

30
tests/v3/tests/normal.test.ts
View File

@ -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');

22
tests/v4/src/routes/+page.svelte
View File

@ -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',

2
tests/v4/src/routes/another/+page.svelte
View File

@ -35,7 +35,7 @@
alt: 'Og Image Alt Another Second'
}
],
site_name: 'SiteName Another'
siteName: 'SiteName Another'
}}
additionalMetaTags={[
{

2
tests/v4/src/routes/article/+page.svelte
View File

@ -47,7 +47,7 @@
alt: 'Og Image Alt Article Title D'
}
],
site_name: 'SiteName'
siteName: 'SiteName'
}}
twitter={{
handle: '@handle',

2
tests/v4/src/routes/book/+page.svelte
View File

@ -45,7 +45,7 @@
alt: 'Og Image Alt Book Title D'
}
],
site_name: 'SiteName'
siteName: 'SiteName'
}}
twitter={{
handle: '@handle',

2
tests/v4/src/routes/profile/+page.svelte
View File

@ -42,7 +42,7 @@
alt: 'Og Image Alt firstlast123 D'
}
],
site_name: 'SiteName'
siteName: 'SiteName'
}}
twitter={{
handle: '@handle',

2
tests/v4/src/routes/video/+page.svelte
View File

@ -59,7 +59,7 @@
alt: 'Og Image Alt Video Title D'
}
],
site_name: 'SiteName'
siteName: 'SiteName'
}}
twitter={{
handle: '@handle',

30
tests/v4/tests/normal.test.ts
View File

@ -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');