ToolSahla, Tools Sahla

The image and title shown when you share a link

You sent a customer your product link on WhatsApp, and it showed up with no image, or a tiny logo unrelated to the product, or your site's generic title. The card that appears with a link is written in special tags inside the page, and you can control it.

Published · 2 min read

What are Open Graph tags?

Lines in your page's head that tell WhatsApp, Facebook, Telegram and others what to show when the link is shared: the title, description, image and canonical link. The protocol requires four of them: og:title, og:type, og:image and og:url.

Worked example

The title Oud & Bakhoor "Gifts" is written like this, because & and " become HTML entities so the tag cannot break:

And an Arabic link is written in og:url in its encoded form, which every platform understands.

<meta property="og:title" content="Oud &amp; Bakhoor &quot;Gifts&quot;">

How to do it

  1. Open the Open Graph metadata builder and type the page title, description, URL and image link.
  2. Choose the page type and the Twitter card type.
  3. Check the warnings, such as a missing required property or a relative image link.
  4. Copy the tags and put them inside your page's head.

Changed the tags and nothing happened?

Platforms cache link previews for a while, so your change may not show straight away. Some platforms offer an official tool to fetch the page again. And use a full image link starting with https, because most platforms cannot fetch a relative link like /images/a.jpg.

What to know

  • The preview is an illustration, and each platform shows the card its own way and may crop the image or text.
  • The tool does not open your page or check that the image exists, or its dimensions or size.
  • If you turn on image loading in the preview, your browser requests the image from its server directly, like any visit.

For how the page appears in search results, check the title and description with the Search snippet preview. Once the card is ready, send your link with a ready message using the WhatsApp link generator.

Common questions

What image size should I use?

There is no single size for every platform, and each crops its own way. Keep the product in the center of the image so it is not cut off.

Do I need Twitter tags too?

The tool writes them alongside the Open Graph tags, and many platforms fall back to Open Graph tags when Twitter tags are missing.

Is my data sent to a server?

No, the tags are built inside your browser.