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

Use summary_large_image as twitter card if images present by default #53919

Merged
merged 2 commits into from
Aug 11, 2023
Merged

Use summary_large_image as twitter card if images present by default #53919

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
bc56930
Use summary_large_image as twitter card if images present by default
huozhi Aug 11, 2023
976bd42
Merge branch 'canary' into metadata/change-default-tw-card-to-large-i…
kodiakhq[bot] Aug 11, 2023
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
5 changes: 4 additions & 1 deletion packages/next/src/lib/metadata/resolvers/resolve-opengraph.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -145,9 +145,9 @@ export const resolveTwitter: FieldResolverExtraArgs<
[ResolvedMetadata['metadataBase'], string | null]
> = (twitter, metadataBase, titleTemplate) => {
if (!twitter) return null
let card = 'card' in twitter ? twitter.card : undefined
const resolved = {
...twitter,
card: 'card' in twitter ? twitter.card : 'summary',
title: resolveTitle(twitter.title, titleTemplate),
} as ResolvedTwitterMetadata
for (const infoKey of TwitterBasicInfoKeys) {
Expand All @@ -156,6 +156,9 @@ export const resolveTwitter: FieldResolverExtraArgs<
const imageMetadataBase = getSocialImageFallbackMetadataBase(metadataBase)
resolved.images = resolveImages(twitter.images, imageMetadataBase)

card = card || (resolved.images?.length ? 'summary_large_image' : 'summary')
resolved.card = card

if ('card' in resolved) {
switch (resolved.card) {
case 'player': {
Expand Down
8 changes: 2 additions & 6 deletions ...metadata/app/twitter/large-image/page.tsx → ...ir/metadata/app/twitter/no-image/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,14 @@
export default function page() {
return 'twitter summary_large_image'
return 'twitter no image'
}

export const metadata = {
twitter: {
card: 'summary_large_image',
title: 'Twitter Title',
description: 'Twitter Description',
siteId: 'siteId',
creator: 'creator',
creatorId: 'creatorId',
images: {
url: 'https://twitter.com/large-image.png',
alt: 'image-alt',
},
images: undefined,
},
}
14 changes: 6 additions & 8 deletions test/e2e/app-dir/metadata/metadata.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -458,7 +458,7 @@ createNextDescribe(
})

await matchMultiDom('meta', 'name', 'content', {
'twitter:card': 'summary',
'twitter:card': 'summary_large_image',
'twitter:title': 'My custom title',
'twitter:description': 'My custom description',
'twitter:image': [
Expand Down Expand Up @@ -763,7 +763,7 @@ createNextDescribe(
})

describe('twitter', () => {
it('should support default twitter summary card', async () => {
it('should support twitter card summary_large_image when image present', async () => {
const browser = await next.browser('/twitter')
const matchMultiDom = createMultiDomMatcher(browser)

Expand All @@ -775,12 +775,12 @@ createNextDescribe(
'twitter:creator:id': 'creatorId',
'twitter:image': 'https://twitter.com/image.png',
'twitter:image:secure_url': 'https://twitter.com/secure.png',
'twitter:card': 'summary',
'twitter:card': 'summary_large_image',
})
})

it('should support default twitter summary_large_image card', async () => {
const browser = await next.browser('/twitter/large-image')
it('should render twitter card summary when image is not present', async () => {
const browser = await next.browser('/twitter/no-image')
const matchMultiDom = createMultiDomMatcher(browser)

await matchMultiDom('meta', 'name', 'content', {
Expand All @@ -789,9 +789,7 @@ createNextDescribe(
'twitter:site:id': 'siteId',
'twitter:creator': 'creator',
'twitter:creator:id': 'creatorId',
'twitter:image': 'https://twitter.com/large-image.png',
'twitter:image:alt': 'image-alt',
'twitter:card': 'summary_large_image',
'twitter:card': 'summary',
})
})

Expand Down
Loading