Article share cards: give people a reason to open the page

A screenshot of an article page often contains too much: navigation, buttons, the opening paragraph, and browser chrome. Reduced inside a chat window, every element tries to speak and none has room to finish. A share card is an invitation to the article. Its title identifies the subject, its subtitle explains what opening it offers, and its signature or domain establishes the source. The rest belongs in the article.

Narrow the promise before arranging the page

For an icon tutorial, a title such as “From SVG to favicon” can be paired with “Understand coordinates, pixels, and formats; check three actual destinations.” This is more specific and easier to deliver than “The ultimate guide to transforming your brand.” Do not fill the layout with unverified readership figures, awards, or testimonials. If the material is an exercise, describe it as an exercise.

Choose one visual lead. Give the title the strongest size and position, let the subtitle add information, and keep the source readable without competing. Chinese and English do not have to align line by line; two naturally composed cards may work better. When both languages share a canvas, remove repeated information before deciding how much bilingual copy is necessary. Do not solve every problem by shrinking the type.

A size is a choice of canvas, not a platform guarantee

This workshop offers a 1200-by-630 landscape canvas, a 1080-pixel square, and a 1080-by-1440 portrait canvas. These are useful creation and export presets, not a promise that every application will show them uncropped. Keep essential words near the centre and place expendable decoration at the edges. Preview the downloaded file in its actual destination, checking thumbnail cropping, rounded corners, and overlays.

Landscape works well with a small amount of information. Portrait allows more space, but that is not an invitation to squeeze in the full article. If the longest title exceeds the canvas, rewrite it or choose a different proportion first. Treat smaller text as a last step so the result remains readable on a phone.

An image file and a web preview are different

A downloaded PNG can be shared manually. A preview generated from a page link also depends on the page's metadata and the receiving platform's fetching and caching. Open Graph defines basic properties including title, type, image, and URL; it does not require every service to use one universal image size. Generating a card also does not publish a social post for you. The Open Graph protocol

Exercise: apply the Article cover template and make a Chinese card and an English card for the same article. Ask someone who has not read it to identify its subject and audience from the card alone. If their answer differs from the article, revise the copy first. When placing the image on a web page, provide alternative text appropriate to its context. If the same linked title is already alongside it, avoid making assistive technology repeat the entire message. W3C image alt-text decision tree