You send a useful article to a client, but the message displays a generic studio image and an unclear title. Before opening the page, the reader already has to guess what the link contains. Start the fix with a simple editorial question rather than rewriting every field at random: which page are we presenting, and what should readers understand before clicking?
Separate three contexts first
The HTML <title> element names the document in the browser tab. MDN reference. A page description can be supplied through meta name="description". MDN meta reference.
Google generates search-result titles automatically from several sources. Google documentation. Search snippets mainly draw on page content, sometimes the meta description, and vary with the query. Snippet documentation.
Open Graph requires og:title, og:type, og:image, and og:url. Optional og:image:width and og:image:height specify dimensions; og:image:alt describes the image, not its caption. Open Graph specification.
Give each context a separate row in your working document: “tab,” “search,” and “sharing.” Record the desired text alongside the observed result. This keeps the team from confusing an editorial decision with the behavior of a particular application.
Write a small brief for the link
Imagine an article about preparing photographs for a portfolio. Instead of “Useful information,” try “How to select 12 photographs for your portfolio.” A working description could be: “Selection criteria, image order, and a check before publication.” This is an invented wording example, not a promised result: the number 12 belongs there only if the article actually works with that selection.
Check the brief without an image. Is the topic understandable? Then remove the description: is the title still specific? Ask a colleague to describe in one sentence what they expect after clicking. If the answer does not match the article, revise the wording rather than adding promotional adjectives.
The homepage and an article need different covers
A recognizable brand composition can suit the homepage. For an individual article, prepare an image that explains its subject: a selection of photographs, a process detail, or a simple topical illustration. Shared colors and a small brand mark can connect the series, but should not replace its substance.
Try wide and square crops in your editor as a stress test, not a universal platform specification. Keep the important subject near the center and leave room around the edges. View a small version on your phone. If text is readable only when enlarged, remove it or shorten it substantially.
Checklist before sharing
- Record the address. Test the final public URL in the intended language, not a draft or the homepage.
- Compare the content. Title, description, and cover should represent the same article. Remove fields accidentally inherited from another post.
- Open the image separately. Make sure its URL leads to the intended file without requiring account sign-in.
- Check the page, not just the form. A saved editor field does not prove the intended data appeared in the published HTML.
- Inspect the actual card. In the target application, check the image, crop, text, and destination address. If you have not tested it, label it accordingly.
- Repeat for language versions. Go beyond translating the title: check the description, images containing text, and destination page.
What “ready” means
Keep a short record: address, language, time, application, result, and next step. Separate “fields saved,” “HTML checked,” and “card observed.” If an older version appears after a change, do not promise an immediate update or invent a cache duration. Save an example and investigate the specific service’s available refresh method. The objective is simple: readers understand the link, and the team knows exactly what has been confirmed.