Open Graph metadata builder
Enter a page title, description, URL and image to get correctly written Open Graph and Twitter card tags, ready to paste into <head>, with an illustrative share-card preview. In other words, it is an Open Graph generator for product pages, articles and landing pages.
Loading the tool…
Processing and privacy: The tags are built inside your browser and your data is not sent to any server. The one optional exception: if you turn on “Load the image in the preview”, your browser requests that image directly from its server.
How to use it
- Type the title and description as you want them to appear when the link is shared.
- Paste the full page URL and image URL, each starting with https://.
- Write alt text for the image, and add its width and height in pixels if you know them.
- Choose the content type, the locale (such as ar_SA or ar_AE) and the Twitter card type.
- Check the warnings, then copy or download the tags and paste them into the <head> of your page.
Example
The title Oud & Bakhoor "Gifts" is written as <meta property="og:title" content="Oud & Bakhoor "Gifts"">. The characters &, ", < and > become HTML entities so the tag cannot break.
The URL https://example.com/عطور/دهن-العود is written in og:url in its encoded form, starting with https://example.com/%D8%B9%D8%B7%D9%88%D8%B1/, which every platform understands.
Limits and caveats
- The preview is an illustration in a neutral design. Each platform (WhatsApp, X, Facebook, LinkedIn, Telegram and others) renders the card its own way and may crop the image or text differently.
- Platforms cache link previews, so your change may not appear straight after you edit the tags. Some platforms offer an official tool to fetch the page again.
- The tool does not open your page URL and does not check that the image exists, or its dimensions or file size. If you turn on image loading in the preview, your browser requests the image directly from its server, which sees your IP address as with any visit. If loading fails, a message says so instead of a fake image.
- The Open Graph protocol requires four properties: og:title, og:type, og:image and og:url. The tool warns about missing ones but does not stop you from copying.
- A relative image URL (such as /images/a.jpg) is written as typed with a warning, because most platforms cannot fetch it. The page URL must be absolute.
- The listed types are a subset of common Open Graph types, and type-specific properties such as article:published_time are not generated. Each text is limited to 2,000 characters.
Questions about this tool
What size should the og:image be?
The protocol does not set a size. A wide image close to 1.91:1, such as 1200×630 px, is common for the large card, and a square image for the small summary card. That is common practice, not a requirement, and the tool does not inspect your image dimensions.
Why does the preview on WhatsApp or X not change after I edit the tags?
Platforms cache link data when the link is first shared. Wait for the cache to expire, use the platform’s official inspection tool where one exists to request a fresh fetch, or share the link with a different parameter to test.
Do I need Twitter tags if Open Graph tags are present?
X cards use twitter:card to decide the card layout, and can read the title, description and image from Open Graph tags when the matching Twitter tags are missing. The tool writes the full set so the behavior is explicit; choose “None” to leave them out.
What are Open Graph tags and why do I need them?
Open Graph tags are <meta> lines in a page’s <head> that tell chat apps and social platforms which title, description and image to show when your link is shared. Without them each platform picks something on its own, which can mean a card with no image or an unhelpful title. The four key properties are og:title, og:type, og:image and og:url.
How do I add Open Graph tags to my website?
Fill in the fields here, copy the tags and paste them inside the <head> of your page, before </head>. The title Oud & Bakhoor is written as <meta property="og:title" content="Oud & Bakhoor">. In a content management system the tags usually go in the theme settings or an SEO plugin; then share the link to test the card.