Meta Tag and Open Graph Generator
Write SEO title, description, Open Graph and X card tags with live previews
Runs entirely in your browser. Nothing you type or upload is sent to us or stored.
Results are for general guidance. Please check anything important before relying on it. Terms of use
How to Use
- Type the page title and description. The counters turn green between 30 and 60 characters for the title and 70 and 160 for the description.
- Add the canonical URL, site name and the full address of your share image. Any address that isn't a proper https:// link is flagged in red and left out of the output.
- Pick the Open Graph type, the X card style, robots, theme colour and language. Leave the viewport switch on for any normal web page.
- Switch between the Google, WhatsApp and X tabs to see roughly how the link will look when it is searched or shared.
- Press Copy HTML (or Download) and paste the block inside the
<head>of your page.
What meta tags and Open Graph tags do
A meta tag generator writes the small block of HTML that sits in the <head> of a web page. Visitors never see it, but Google, WhatsApp, Facebook, LinkedIn and X read it to decide what to show for your link. The <title> and meta description shape your search result. The Open Graph tags (og:title, og:description, og:image) shape the preview card when someone pastes your link into a chat or a post.
If you leave them out, apps guess. WhatsApp might show a bare link, and Google may pull a random sentence from your page. A few minutes on these tags is one of the cheapest ways to get more clicks.
How long should the title and description be?
Google cuts titles by pixel width, not by a fixed character count. On desktop the limit works out to roughly 50 to 60 characters, and descriptions are usually trimmed at about 150 to 160. That is where the 60 and 160 guidance comes from. It's a rule of thumb, not an official limit, and Google can rewrite either one when it thinks another line on your page fits the search better.
| Tag | Good target | Tip |
|---|---|---|
| Title | 30 to 60 characters | Main keyword first, brand last |
| Meta description | 70 to 160 characters | Say what the visitor gets, with one concrete detail |
| og:image | 1200 × 630 px | Keep text large and central so it survives cropping |
| X handle | Up to 15 characters | Letters, numbers and underscores only |
A worked example
Say you run a small CA firm in Pune and you have a page on filing ITR-2. A weak title is "Services". A better one is "ITR-2 Filing for Salaried and Capital Gains | Sharma & Co" (57 characters). The description could be "We file ITR-2 for salaried people with capital gains or more than one house. Fixed fee, done in 3 working days, Pune and online." That's 128 characters, inside the range, and it answers the questions a searcher has. The tool turns those into:
<meta name="description" content="We file ITR-2 for salaried people...">
<meta property="og:title" content="ITR-2 Filing for Salaried...">
Notice that the ampersand becomes &. The generator escapes &, <, > and quote marks so a stray character in your text can't break the HTML.
The share image
The og:image must be a full address that starts with https://. A path like /images/cover.jpg works in your own HTML but not here, because the app that fetches it doesn't know your domain. Facebook recommends at least 1200 × 630 pixels, a 1.91 : 1 shape. The same image works for the large card on X (which crops it towards 2 : 1) and for WhatsApp. Add a short og:image:alt description for people using screen readers.
Canonical, robots and the rest
- Canonical URL tells search engines which address is the main one when the same page can be reached in several ways (with tracking parameters, with or without www).
- Robots: "index, follow" is what search engines do anyway. Use "noindex" only for pages that shouldn't appear in results, such as a thank-you page after a form.
- Viewport makes the page fit a phone screen. Without it, mobile browsers show a zoomed-out desktop layout.
- Theme colour tints the address bar in Chrome on Android.
- Language belongs on the
<html lang="en-IN">tag. The tool also turns it intoog:locale(en_IN) for social apps.
X reads og:title, og:description and og:image when its own twitter: versions are missing, so the output only adds twitter:card and your handle. That keeps the block short without losing anything.
After you publish
Apps cache previews. If you change the image and WhatsApp still shows the old one, the cache is the reason, not your tags. Facebook's Sharing Debugger and LinkedIn's Post Inspector let you fetch the page again. The previews on this page are approximations drawn with plain CSS: nothing is fetched from your site, and the image appears as a grey box.