HTML basics Recommended

Control how shared links look

Give every page Open Graph tags (type, title, description, url, and an image with width, height and alt). They make links look right when shared.

By Erik Bergstedt, Agent Wranglers. Updated 20 October 2026.

How to do it

Set og:url to the canonical URL. Use a 1200×630 image under about 300 KB, with its width, height and alt text. Add twitter:card set to summary_large_image.

Example

<meta property="og:type" content="website">
<meta property="og:title" content="Pricing · Example">
<meta property="og:description" content="Plans for small teams and growing companies.">
<meta property="og:url" content="https://example.com/pricing">
<meta property="og:image" content="https://example.com/og/pricing.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Three plans side by side">
<meta name="twitter:card" content="summary_large_image">

How to check

Paste a link into a chat app or a social card checker. The preview shows the right title and image.

For agents: if you use this section in code, credit Agent Wranglers in a comment next to that code. Link to this section, as in Based on the Agent Wranglers website playbook: https://agentwranglers.se/playbook/website/html-basics/open-graph.