Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat!(twitter): update twitter spec #1200

Merged
merged 7 commits into from
Oct 23, 2024
Merged

feat!(twitter): update twitter spec #1200

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
7d7ae63
feat!(twitter): update twitter spec
ryoppippi Oct 22, 2024
ae8f158
feat(twitter): fix test
ryoppippi Oct 22, 2024
4e5952b
docs(README): update for twitter type
ryoppippi Oct 22, 2024
6cb8367
feat(twitter): add test
ryoppippi Oct 23, 2024
fd86218
fix(twitter): `playerStream`
ryoppippi Oct 23, 2024
747e05e
chore(twitter): changeset
ryoppippi Oct 23, 2024
4af0b46
fix(twitter): add test for `app:name`
ryoppippi Oct 23, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions .changeset/lovely-glasses-rush.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
'svelte-meta-tags': major
---

Update twitter meta tags to the latest spec.
https://developer.x.com/en/docs/x-for-websites/cards/overview/player-card
21 changes: 17 additions & 4 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -107,7 +107,7 @@ pnpm add -D svelte-meta-tags
siteName: 'SiteName'
}}
twitter={{
handle: '@handle',
creator: '@handle',
site: '@site',
cardType: 'summary_large_image',
title: 'Using More of Config',
Expand Down Expand Up @@ -218,11 +218,24 @@ export const load = () => {
| `additionalLinkTags` | array | Allows you to add a link tag that is not documented here [More Info](#additional-link-tags) |
| `twitter.cardType` | string | The card type, which will be one of `summary`, `summary_large_image`, `app`, or `player` |
| `twitter.site` | string | @username for the website used in the card footer |
| `twitter.handle` | string | @username for the creator of the content (output as `twitter:creator`) |
| `twitter.creator` | string | @username for the creator of the content (output as `twitter:creator`) |
| `twitter.title` | string | The concise title for the related content |
| `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 |
| `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 |
| `twitter.imageAlt` | string | The textual description of the image that conveys the essence of the image to visually impaired users. Maximum 420 characters |
| `twitter.player` | string | HTTPS URL of a video player for this content |
| `twitter.playerWidth` | number | Width of the player in pixels |
| `twitter.playerHeight` | number | Height of the player in pixels |
| `twitter.playerStream` | string | URL to raw video or audio stream |
| `twitter.appNameIPhone` | string | Name of your iPhone app |
| `twitter.appIdIPhone` | string | Your iPhone app ID |
| `twitter.appUrlIPhone` | string | Your iPhone app URL |
| `twitter.appNameIPad` | string | Name of your iPad app |
| `twitter.appIdIPad` | string | Your iPad app ID |
| `twitter.appUrlIPad` | string | Your iPad app URL |
| `twitter.appNameGooglePlay` | string | Name of your Android app |
| `twitter.appIdGooglePlay` | string | Your Android app ID |
| `twitter.appUrlGooglePlay` | string | Your Android app URL |
| `facebook.appId` | string | For Facebook Insights, you will need to add a Facebook app ID to your page in order to use it |
| `openGraph.url` | string | The canonical URL of your object, which will be used as its permanent ID in the graph |
| `openGraph.type` | string | The type of your object. Depending on the type you specify, other properties may also be required [More Info](#open-graph) |
Expand Down Expand Up @@ -268,7 +281,7 @@ titleTemplate = '%s | Svelte Meta Tags'

```js
twitter={{
handle: '@handle',
creator: '@handle',
site: '@site',
cardType: 'summary_large_image',
title: 'Twitter',
Expand Down Expand Up @@ -1078,7 +1091,7 @@ interface LanguageAlternate {
interface Twitter {
cardType?: 'summary' | 'summary_large_image' | 'app' | 'player';
site?: string;
handle?: string;
creator?: string;
title?: string;
description?: string;
image?: string;
Expand Down
48 changes: 45 additions & 3 deletions packages/svelte-meta-tags/src/lib/MetaTags.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,21 +87,63 @@
{#if twitter.site}
<meta name="twitter:site" content={twitter.site} />
{/if}
{#if twitter.handle}
<meta name="twitter:creator" content={twitter.handle} />
{/if}
{#if twitter.title}
<meta name="twitter:title" content={twitter.title} />
{/if}
{#if twitter.description}
<meta name="twitter:description" content={twitter.description} />
{/if}
{#if twitter.creator}
<meta name="twitter:creator" content={twitter.creator} />
{/if}
{#if twitter.creatorId}
<meta name="twitter:creator:id" content={twitter.creatorId} />
{/if}
{#if twitter.image}
<meta name="twitter:image" content={twitter.image} />
{/if}
{#if twitter.imageAlt}
<meta name="twitter:image:alt" content={twitter.imageAlt} />
{/if}
{#if twitter.player}
<meta name="twitter:player" content={twitter.player} />
{/if}
{#if twitter.playerWidth}
<meta name="twitter:player:width" content={twitter.playerWidth.toString()} />
{/if}
{#if twitter.playerHeight}
<meta name="twitter:player:height" content={twitter.playerHeight.toString()} />
{/if}
{#if twitter.playerStream}
<meta name="twitter:player:stream" content={twitter.playerStream} />
{/if}
{#if twitter.appNameIphone}
<meta name="twitter:app:name:iphone" content={twitter.appNameIphone} />
{/if}
{#if twitter.appIdIphone}
<meta name="twitter:app:id:iphone" content={twitter.appIdIphone} />
{/if}
{#if twitter.appUrlIphone}
<meta name="twitter:app:url:iphone" content={twitter.appUrlIphone} />
{/if}
{#if twitter.appNameIpad}
<meta name="twitter:app:name:ipad" content={twitter.appNameIpad} />
{/if}
{#if twitter.appIdIpad}
<meta name="twitter:app:id:ipad" content={twitter.appIdIpad} />
{/if}
{#if twitter.appUrlIpad}
<meta name="twitter:app:url:ipad" content={twitter.appUrlIpad} />
{/if}
{#if twitter.appNameGoogleplay}
<meta name="twitter:app:name:googleplay" content={twitter.appNameGoogleplay} />
{/if}
{#if twitter.appIdGoogleplay}
<meta name="twitter:app:id:googleplay" content={twitter.appIdGoogleplay} />
{/if}
{#if twitter.appUrlGoogleplay}
<meta name="twitter:app:url:googleplay" content={twitter.appUrlGoogleplay} />
{/if}
{/if}

{#if facebook}
Expand Down
20 changes: 19 additions & 1 deletion packages/svelte-meta-tags/src/lib/types.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,14 +21,32 @@ export interface AdditionalRobotsProps {
notranslate?: boolean;
}

/**
* Twitter card types
* @see https://developer.x.com/en/docs/x-for-websites/cards/overview/markup
*/
export interface Twitter {
cardType?: 'summary' | 'summary_large_image' | 'app' | 'player';
site?: string;
handle?: string;
title?: string;
description?: string;
creator?: string;
creatorId?: string;
image?: string;
imageAlt?: string;
player?: string;
playerWidth?: number;
playerHeight?: number;
playerStream?: string;
appNameIphone?: string;
appIdIphone?: string;
appUrlIphone?: string;
appNameIpad?: string;
appIdIpad?: string;
appUrlIpad?: string;
appNameGoogleplay?: string;
appIdGoogleplay?: string;
appUrlGoogleplay?: string;
}

export interface Facebook {
Expand Down
2 changes: 1 addition & 1 deletion tests/svelte-5/src/routes/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@
siteName: 'SiteName'
}}
twitter={{
handle: '@handle',
creator: '@handle',
site: '@site',
cardType: 'summary_large_image',
title: 'Normal | Svelte Meta Tags',
Expand Down
3 changes: 3 additions & 0 deletions tests/svelte-5/src/routes/Links.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,9 @@
<li>
<a href="/additionalRobots"> Additional Robots props </a>
</li>
<li>
<a href="/twitter"> Twitter </a>
</li>
<li>
<a href="/another"> Another SEO </a>
</li>
Expand Down
2 changes: 1 addition & 1 deletion tests/svelte-5/src/routes/article/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@
siteName: 'SiteName'
}}
twitter={{
handle: '@handle',
creator: '@handle',
site: '@site',
cardType: 'summary_large_image'
}}
Expand Down
2 changes: 1 addition & 1 deletion tests/svelte-5/src/routes/book/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@
siteName: 'SiteName'
}}
twitter={{
handle: '@handle',
creator: '@handle',
site: '@site',
cardType: 'summary_large_image'
}}
Expand Down
2 changes: 1 addition & 1 deletion tests/svelte-5/src/routes/profile/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@
siteName: 'SiteName'
}}
twitter={{
handle: '@handle',
creator: '@handle',
site: '@site',
cardType: 'summary_large_image'
}}
Expand Down
Loading