COMMAND NAVIGATION

Where would you like to go?

Web Doctor

WEB DOCTOR GUIDE

Open Graph previews people can trust

Open Graph fields give social and messaging platforms a proposed preview for a URL. A strong preview establishes identity and expectation before the visit, but every platform retains control over its final rendering.

01

Build a complete core

Provide an accurate title, concise description and public image. og:url should use the preferred URL, and og:type should describe the resource rather than defaulting blindly across the site.

Twitter/X-specific fields can refine presentation, but complete Open Graph metadata is a reasonable fallback on many platforms. Their absence should not be treated like an indexing emergency.

02

Design an image for cropping

Use a stable HTTPS image with enough resolution for large previews. Keep essential text and faces away from edges because platforms crop differently, and do not make the image carry information that the title and page fail to explain.

Set an informative image alternative when supported. The image URL must be accessible to the platform’s crawler and should not require cookies or authentication.

03

Implement the essentials

Resolve relative paths carefully and keep preview metadata aligned with the page’s visible promise.

<meta property="og:title" content="Delivery and collection" />
<meta property="og:description" content="Options and costs for receiving your order." />
<meta property="og:image" content="https://example.com/social/delivery.jpg" />
<meta property="og:url" content="https://example.com/delivery/" />
<meta property="og:type" content="website" />
04

Expect caching

Sharing platforms often cache previews. A correct update may not appear immediately, so use each platform’s official debugging or refresh tool when testing a changed image or description.