How to Write Meta Tags and Open Graph Tags That Get Clicks
Before anyone reads your page, they read a few lines of metadata: the title in a search result, the description beneath it, and the card that appears when a link is shared. Those lines are written in meta tags, and they decide whether a person clicks. They take minutes to write well and are often left to default values.
The tags that matter most
| Tag | What it controls |
|---|---|
| title | The clickable headline in search results and the browser tab |
| meta description | The summary shown under the title in search results |
| og:title, og:description | The headline and summary when the page is shared on social networks |
| og:image | The picture in the share card |
| og:url, og:site_name | The canonical address and the brand name shown with the card |
| twitter:card | Which card layout X uses, for example a large image |
Standard meta tags mainly affect search listings. Open Graph tags (the og: properties) control how the page looks on Facebook, LinkedIn, messaging apps and most other places where a link becomes a preview card.
Writing a title tag
- Aim for roughly 50–60 characters. Google truncates by pixel width, not by a strict count, so long titles risk an ellipsis.
- Put the main topic first and the brand last, for example Mortgage Calculator | Figuro.
- Make every page title unique; duplicates confuse both people and search engines.
- Write for the person, not the algorithm. A title that reads naturally earns more clicks than a list of keywords.
Writing a meta description
The description does not directly change rankings, but it changes clicks, which matters just as much. Keep it near 150–160 characters, say what the page offers in plain words, and finish with a reason to open it. Google sometimes rewrites the description it shows, usually when it thinks another passage matches the search better, so make sure the page itself answers the question clearly.
| Weak | Better |
|---|---|
| Welcome to our website. We offer many tools. | Free calculators for loans, health and everyday maths, with clear explanations and no sign-up. |
| Best PDF tool online!!! Click now | Merge, split and sign PDFs in your browser. Files are never uploaded. |
Open Graph and the share image
The share image does most of the work in a social card. Use a picture of about 1200 × 630 pixels, with the key text well inside the edges so it is not cropped on small screens. Keep the file size modest; compress it first with the image compressor. Use an absolute URL starting with https:// for og:image, because relative paths are ignored by most platforms.
Checking the result before you publish
- Enter the title and description in the Meta Tag & Open Graph Generator and watch the character counters.
- Add the page URL, site name and image URL.
- Look at the live Google, Facebook and LinkedIn previews and fix anything cut off.
- Copy the generated code and paste it into the <head> of your page.
- After publishing, re-test the link in a sharing debugger, as platforms cache old previews.
Common mistakes
- Leaving the same title and description on every page.
- Using a relative image path or a tiny logo as the share image.
- Stuffing keywords, which makes the snippet unreadable.
- Blocking the page with a noindex tag by accident while testing.
- Forgetting to update the tags after renaming a page or changing its topic.
Key terms: meta tags, title tag, meta description, Open Graph, og:image, social share card, SERP preview, Twitter card, canonical URL, snippet.
Frequently asked questions
How long should a title tag be?
Roughly 50–60 characters is safe. Google displays titles by pixel width, so very long titles risk being cut off.
How long should a meta description be?
Around 150–160 characters is a safe target, though Google sometimes rewrites the description it shows.
What is the difference between meta tags and Open Graph tags?
Meta tags such as title and description mainly affect search listings. Open Graph tags control the preview card when a link is shared on social platforms.
Do meta descriptions improve rankings?
Not directly, but a clear description can raise your click-through rate, which helps a page perform better in practice.
Is my data sent anywhere when I use the generator?
No. The preview and the code are built in your browser.
Ready to build the tags for your own page?
Try Meta Tag & Open Graph Generator →Put this guide into practice
Meta Tag & Open Graph Generator — Generate meta and OG tags with a live SERP preview.