Open Graph meta tags: a practical starting point

Give a shared link its own presentation

A page title in a browser tab is not a complete sharing experience. Open Graph metadata describes the title, image, URL and type that a service can use when someone shares your page. It belongs in the HTML head, alongside your regular title and description.

Treat social metadata as part of the page you publish. A product page should describe that product; an article should describe that article. Repeating a generic home-page title on every route makes links harder to recognize.

Start with the four core properties

The Open Graph protocol defines og:title, og:type, og:image and og:url as its four basic required properties. Add a concise og:description to give readers more context. Use an absolute, publicly reachable image URL and a stable page URL.

<title>A useful guide | Example</title>
<meta name="description" content="A short description of this guide." />
<link rel="canonical" href="https://example.com/guide" />
<meta property="og:title" content="A useful guide" />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://example.com/guide" />
<meta property="og:description" content="A short description of this guide." />
<meta property="og:image" content="https://example.com/images/guide.jpg" />
<meta property="og:image:alt" content="The guide illustrated with a simple diagram" />

Make the image useful before anyone clicks

Choose an image that remains understandable when cropped or shown at a small size. Keep essential words away from the edges and check that foreground and background remain distinct. A decorative image that explains nothing can make a link harder to identify.

Declare image width, height and type when you know the actual values. Do not copy dimensions from an example if they do not match your image. If you declare multiple images, keep the preferred one first and place its structured properties immediately after it.

Inspect the response, then test the destination

Check the published URL rather than only your local source file. Redirects, templates, CDNs and framework rendering can change the response that a crawler receives. A tag added only after browser JavaScript runs may not appear in a simple HTML fetch.

Ogserve’s free checker shows the metadata returned by one fetch and illustrates five sharing layouts. Use those previews to catch missing text or awkward crops, then confirm the link in the destination app. Cached data, permissions and platform-specific behavior can change the final result.