Meta Tag Generator
Fill in your page details to generate SEO, Open Graph, and Twitter Card meta tags ready to paste into your <head>.
15 characters
How to use this tool
Fill in the title, description, page address, share image, site name and, optionally, an X (Twitter) handle. The tags update as you type, the title and description show their length, and the address and image fields warn you if they aren't full https:// addresses. Copy the result into the page's <head>, replacing any tags of the same name already there.
What the output contains
<title>, the meta description and a canonical link to the page address.- Open Graph tags, with
og:typeset towebsite. For a blog post you may preferarticle. - Twitter Card tags with
summary_large_image, the large-picture preview.
Quotes, ampersands and angle brackets in what you type are escaped, so a title such as Tom & Jerry's "Best" Deals can't break the tag it sits in. The same title and description are used for search, Open Graph and X; edit the copied tags by hand if you want different wording for social sharing.
The share image
Use an image of about 1200 × 630 pixels, the 1.91:1 shape Facebook and LinkedIn use for link previews, and keep important text away from the edges, since X crops large-image previews to 2:1. The image must be publicly reachable at the address you give; one behind a login, or on a staging site, shows as a blank preview. After publishing, paste the page address into the Facebook Sharing Debugger to see the preview and refresh a cached old one.
Frequently Asked Questions
What is the ideal length for title and description tags?
There is no fixed maximum. Google's documentation says long title links and snippets are shortened to fit the width of the screen, which depends on the letters and the device. The counts under the fields help you keep a title short enough to read at a glance; this site aims for under 60 characters for titles and under 155 for descriptions.
What's the difference between the meta description and Open Graph description?
The meta description is text a search engine may show under your title, and Google often chooses its own excerpt from the page instead. og:description is what Facebook, LinkedIn, WhatsApp and similar apps show in a link preview. This tool fills both with the same text; they can differ if you want a different pitch for sharing.
Do I need both Open Graph and Twitter Card tags?
X reads og:title, og:description and og:image when its own versions are missing, so those three could be left out. twitter:card has no Open Graph equivalent, though: it chooses the preview layout, here the large-image one, which is why the Twitter tags are included.
Related Tools
Related Blog Posts
On-Page SEO Basics: Meta Tags, Robots.txt, and Favicons
The technical basics that decide how a page appears in search and link previews: title, description and canonical tags, what robots.txt can and can't do, and the favicon sizes search engines actually use.
Read moreHow to Use QR Codes for Marketing, Docs, and Events
How much a QR code can hold, why a shorter or uppercase link gives a code that scans more easily, what error correction actually protects against, and how to size one for print.
Read moreHEX, RGB and HSL: How the Conversions Work and Where They Round
#4F46E5 converted to RGB and HSL step by step, why 89.4% of all colours change when copied as whole-number HSL, why HSL lightness is not brightness (yellow and blue at 50% differ eightfold in contrast), and the alpha that hex can't write exactly.
Read more