Where do I put these tags?

Paste them inside the of your HTML page. Most social platforms read them the next time the URL is shared or re-scraped.

Why does my preview image not show?

Use an absolute URL (starting with https://) for the image, make it publicly reachable, and aim for 1200×630 pixels for the large-image card. The tool checks the loaded image and warns if it’s below that size.

How long should the title and description be?

Keep the title to about 60 characters and the description to about 155 — past those, most platforms truncate the text in the link preview. The counters turn red and a warning appears when you go over.

Which Twitter/X card type should I use?

“Large image” (summary_large_image) shows a big banner above the text and suits most posts; “Summary” shows a small square thumbnail beside the text. Pick it from the Twitter card selector.

Open Graph Meta Tag Generator

Generate Open Graph and Twitter Card meta tags and see a live preview of how your link will look when shared on X, Facebook, LinkedIn, Discord, and iMessage. Fill in the fields, copy the tags, and paste them into your page head.

How to use Open Graph & Social Card Generator

Enter your title, description, URL, and image.
Check the live link-preview card and the character counts.
Copy the generated meta tags into your page’s <head>.

Frequently asked questions

Where do I put these tags?: Paste them inside the <head> of your HTML page. Most social platforms read them the next time the URL is shared or re-scraped.
Why does my preview image not show?: Use an absolute URL (starting with https://) for the image, make it publicly reachable, and aim for 1200×630 pixels for the large-image card. The tool checks the loaded image and warns if it’s below that size.
How long should the title and description be?: Keep the title to about 60 characters and the description to about 155 — past those, most platforms truncate the text in the link preview. The counters turn red and a warning appears when you go over.
Which Twitter/X card type should I use?: “Large image” (summary_large_image) shows a big banner above the text and suits most posts; “Summary” shows a small square thumbnail beside the text. Pick it from the Twitter card selector.

More Programmer & Developer Tools

JSON Validator — Validate, parse, and prettify JSON — load it from a URL or curl command, or convert a Python dict (single quotes, True/False/None) to JSON. Identifies syntax errors with precise line number reporting.
Code Beautifier — Automatically format your JavaScript, CSS, and HTML with customizable indentation and style rules.
Minifier — Reduce bundle sizes by removing whitespace, comments, and optimizing code structure for production.
SQL Formatter & Beautifier — Pretty-print and indent SQL queries across dialects (PostgreSQL, MySQL, T-SQL, BigQuery, and more) with configurable keyword casing.
XML Formatter — Beautify and validate XML with configurable indentation, or minify it to the smallest valid output — entirely in your browser.
JSON Diff — Compare two JSON objects (or Python dicts) structurally to spot added, removed, and changed keys — or switch to line and word mode for plain text and code.
RegEx Tester — Build and test regular expressions in real-time with syntax highlighting and match group visualization.
Base64 Converter — Quickly encode and decode strings or files to Base64 format for safe data transmission.