Prepare sharing previews for web pages

Choose essential information

Write a title identifying the page and a short description of its real content. A service page, article and event do not need the same message. Avoid promises absent from the destination.

Check language variants: an English link should not automatically display a French title. The translation review guide includes content surrounding the page.

• Destination-specific title.
• Faithful concise description.
• Preview language consistent.

Prepare an appropriate image

Choose a landscape image that remains understandable after cropping. Do not put essential information in tiny embedded text. A page-specific main photo prevents different links from always displaying the same scene.

Check weight, absolute URL, public loading and rights. The image-search guide also covers page context and alternative text.

• Subject clear after crop.
• Public lightweight image.
• Rights and relevance checked.

Set real metadata

Connect canonical URL, title, description and sharing image to the published page. Open Graph properties describe what platforms can use, but each service retains its own presentation rules.

The sharing image is not automatically the main image for every content item. Inspect the resulting HTML and avoid temporary or relative URLs that fail outside your site.

The Open Graph protocol defines four basic properties: og:title, og:type, og:image and og:url. Check their values on the exact page being shared rather than only the homepage. og:url identifies the represented page, while og:image points to the image illustrating that object. The image must match the content described; og:image:alt is distinct from a caption or the alternative for another image displayed on the page.

Also check the language and variants actually served. Open Graph writes a locale as fr_FR, while HTML language tagging follows different conventions. When multiple images are declared, the protocol prefers the first in a conflict without imposing a platform’s final rendering. Retain the observed HTML, URL and check date to distinguish incorrect data from an older cached preview.

• Tags present in final HTML.
• URLs match the page.
• No temporary image.

Scroll the table horizontally to read every column. With a keyboard, focus the table area and use the arrow keys.

• Open Graph Protocol : Metadata

  Consulted on 22 October 2026; basic properties, image description, locales and declared image order.

Test and update

Share a URL of each page type in a compatible preview tool or test environment. Check title, image, language and crop. Some platforms may cache an older preview after a change.

Recheck previews after changing domain, main image or offer. The meaningful test is the actually published page, not only the template producing tags.

• Several page types checked.
• Cache considered after change.
• Production check repeated.

Offer native sharing with a usable alternative when the API is unavailable or refused.

Synthetic case: a button shares a public detail page. Check API availability, supported data and activation through a person’s action. Test cancellation and a copy-link alternative. Never share a private token-bearing URL. Opening the panel does not prove that a recipient received the content.

• Cancellation produces no false success and the public link remains copyable without the sharing API.

• MDN Web Share API

  API opening system sharing with content and a destination selected by the person.

Compare preview and page

Proposed case: sharing a page shows an old title and generic image. A stored preview can differ from currently served metadata.

Compare published code, exact URL and observed preview. Keep date, platform and requested image; distinguish wrong data and external cache before changing several pages.

• Check the exact URL
• Compare served title and image
• Record platform and date

• Choose a relevant repair

  Fix 404 pages and broken links usefully