Meta tags tell search engines and social networks how to display your page. Enter a title, description, URL and preview image, and this tool writes the matching SEO, Open Graph and Twitter Card tags as clean HTML you can paste into your page’s <head>. Values are escaped for you, and nothing is uploaded.
0 — aim for 50–60 characters
0 — aim for 150–160 characters
How it works
The tool produces three groups of tags. The SEO group is the <title>, the meta description and a canonical link. The Open Graph group (og:*) controls how the page looks when shared on Facebook, LinkedIn, WhatsApp and most chat apps. The Twitter group (twitter:*) does the same for posts on X/Twitter.
Only the fields you fill in produce tags, so a page without a preview image simply omits the image tags. Every value is HTML-escaped — quotes, ampersands and angle brackets are converted to entities — so a title like Tom & “Jerry” cannot break the attribute or inject markup.
Open Graph and Twitter overlap on purpose: the image, title and description are repeated across both because each platform reads its own namespace. Set the og:type (website or article) and the Twitter card style, then copy the whole block into the <head> of your HTML, ideally near the top.
Practical examples
A blog article
Title “How to brew filter coffee”, a one-line description, the article URL, a 1200×630 image and og:type “article”. Paste the output into the post template and shares on social show a proper card with the image.
A product landing page
Set og:type “website”, add the product photo as the image and pick the large-image Twitter card. Links posted to chat apps then unfurl with the photo instead of a bare URL.
Fixing a bare link preview
If your links currently share with no picture or the wrong title, generate the og:title, og:description and og:image tags here, add them, and re-test with the platform’s sharing debugger to refresh the cache.
Frequently asked questions
What are meta tags for?
They give machines a summary of your page: search engines use the title and description in results, and social networks use Open Graph and Twitter tags to build the preview card shown when your link is shared.
What is the difference between meta description and Open Graph description?
The meta description targets search engines and appears in results listings. The og:description is for social shares and appears in the link preview card. They are often the same text, and this tool fills both from one field.
What image size should I use for Open Graph?
A common, safe choice is 1200×630 pixels (roughly 1.91:1). Use an absolute URL, keep the file under about 5 MB, and make sure it is publicly reachable — social crawlers cannot see images behind a login.
How long should the title and description be?
Aim for a title around 50–60 characters and a description around 150–160 so they are not truncated in search results. The tool shows a live character count to help you stay within range.
Do I need both Open Graph and Twitter tags?
Open Graph alone often works, because X and many apps fall back to og:* tags. Adding explicit twitter:* tags gives you precise control over the Twitter/X card, such as choosing a large image versus a small summary.
What does the canonical tag do?
It tells search engines the preferred URL for the page, which prevents duplicate-content issues when the same content is reachable at several addresses. Point it at the clean, canonical version of the URL.
Why did you escape characters in my text?
Attribute values must not contain raw quotes or angle brackets, or they would break the tag or allow markup injection. The tool converts &, <, >, " and ’ to safe HTML entities automatically.
My preview still shows the old image — why?
Social platforms cache previews. After updating your tags, use the platform’s sharing or debugging tool (for example the Facebook Sharing Debugger) to force a re-scrape, or wait for the cache to expire.
Where exactly do these tags go?
Inside the <head> element of your HTML, before the closing </head>. Placing them high in the head helps crawlers that only read the first part of the document.
Related tools
HTML Entity Encoder and Decoder
Encode text to HTML entities or decode named, decimal and hex entities back to characters. In your browser.
Developer tools
URL Encoder and Decoder
Percent-encode text for URLs or decode it back, with component and full-URL modes. Runs in your browser.
Developer tools
UTM Builder
Add UTM tracking parameters to any link so your analytics can tell where campaign traffic comes from.
Developer tools
Slug Generator
Turn any title into a clean URL slug — with proper Serbian transliteration (đ→dj, š→s) and Cyrillic support.
Text tools
JSON Formatter
Beautify, validate or minify JSON in your browser — with clear error messages. Nothing is uploaded.
Developer tools
Base64 Encoder and Decoder
Encode text to Base64 or decode it back, UTF-8 safe and URL-safe tolerant. Runs entirely in your browser.
Developer tools