Summary

The <meta name="twitter:card" content="summary_large_image"> embed was designed for content that includes an attached photograph or illustration: as the Twitter documentation states, it is designed to give the reader a rich photo experience. Platforms like Discord give the image priority over the text description of the link, rendering the image much larger than the text in the link embed.

In MDN's case, however, the image is just decorative. It feels silly to have half the screen taken up by an image that adds only a bit of extra information and branding. This is especially true on chat platforms, where pasting MDN links can interrupt the flow of conversation due to these huge images.

URL

https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineTo

Reproduction steps

Paste a link to https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineTo into a Discord chat.

Expected behavior

An embed appears for a documentation page, but it doesn't interrupt the conversation too much.

Actual behavior

A embed appears with a large image that takes up half the screen, interrupting the conversation substantially.

Device

Tablet (e.g. iPad)

Browser

Other (specify below)

Browser version

Other version (specify below)

Operating system

iOS

Screenshot

Anything else?

This tag does seem to have been added intentionally, in mdn/yari#3693 (comment), but without any discussion of the appropriateness of this particular embed type. According to the Twitter docs at https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/summary, a <meta name="twitter:image" content="..."> tag should work for a normal-sized image, but I haven't tested this.

Validations

• I have read the Community Participation Guidelines.
• I have verified that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• I have checked that this is a concrete bug. For Q&A open a GitHub Discussion.