---
title: "Control how shared links look · Agent Wranglers"
url: https://agentwranglers.se/playbook/website/html-basics/open-graph
updated: 2026-10-20
licence: "All rights reserved"
---

# Control how shared links look

By Erik Bergstedt, Agent Wranglers. Updated 2026-10-20.

- Level: Recommended
- Chapter: [HTML basics](https://agentwranglers.se/playbook/website/html-basics)
- Rule: 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.
- How: 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`.
- Check: Paste a link into a chat app or a social card checker. The preview shows the right title and image.

Example:

```html
<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">
```

**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`.

- Previous: [Support light and dark from the start](https://agentwranglers.se/playbook/website/html-basics/color-scheme)
- Next: [Point readers to your feed](https://agentwranglers.se/playbook/website/html-basics/feed-discovery)
- [HTML basics](https://agentwranglers.se/playbook/website/html-basics)