Meta tag generator

Write your title and description, watch how they render in Google, Facebook and Twitter, then copy complete Open Graph and Twitter Card markup.

Meta Tag & Social Share Previewer

Type in your webpage details to see how they appear when shared on Google, Facebook, and Twitter. Grab the optimised HTML tags.

0 / 60 chars
0 / 160 chars

Live Preview Cards

https://frontendhelpers.com
FrontendHelpers — Free SEO & Web Dev Utilities
Free, lightweight frontend developer utilities. Check social card preview renderings, generate business schema metadata, and convert fonts between PX and REM.
Card Preview
FRONTENDHELPERS.COM
FrontendHelpers — Free SEO & Web Dev Utilities
Free, lightweight frontend developer utilities. Check social card preview renderings, generate business schema ...
Card Preview
frontendhelpers.com
FrontendHelpers — Free SEO & Web Dev Utilities
Free, lightweight frontend developer utilities. Check social card preview renderings, generate business schema metadata, and convert fonts between PX and REM.
Optimised Meta Tags

Why Meta Tags and Open Graph Matter for Web Traffic

Meta tags are HTML snippets that provide structured metadata about a webpage to search engine crawlers and social scrapers. They aren't visible directly on the page, but they dictate how your site appears in public directories and social feeds.

Proper Open Graph (OG) implementation helps increase your click-through rates (CTR) by replacing raw, unformatted text links with attractive visual cards. Adding a unique, high-resolution preview image and a punchy description tells the user exactly what to expect before they click. Google's Search Central recommends keeping title lengths below 60 characters and descriptions under 160 characters to prevent truncation in search listings.

What meta tags actually control

Meta tags don't appear on your page — they describe it to machines. The <title> and meta description shape your entry in search results; Open Graph tags control what Facebook, LinkedIn, Slack and WhatsApp display when someone shares your link; Twitter Card tags do the same for X.

The distinction that trips people up: meta tags don't directly improve your ranking. Google has said for years that the meta description is not a ranking factor. What it does affect is click-through rate — and a link that gets clicked more often, from a result that satisfies the searcher, absolutely does influence how you perform over time. Meta tags are a conversion problem dressed as an SEO problem.

Writing titles and descriptions that get clicked

Keep titles at roughly 50–60 characters. Google measures the rendered width in pixels rather than counting characters, so the limit is approximate, but 60 is a safe working ceiling. Lead with the distinctive words — if it truncates, you want the important part already read. Putting your brand name at the end, after a dash or pipe, is the conventional pattern for exactly this reason.

Descriptions have room for about 150–160 characters. Treat it as ad copy, not a summary: say what the visitor gets and why it's worth their click. Google frequently rewrites descriptions to match the specific query anyway, so a well-written one is a strong suggestion rather than a guarantee.

Open Graph: the tags that make links look good

Without Open Graph tags, a shared link is a bare URL with whatever text the platform can scrape. With them, it becomes a card with an image, headline and description — dramatically more clickable in a crowded feed.

The five that matter are og:title, og:description, og:image, og:url and og:type. The image does most of the work: use 1200 × 630 pixels (a 1.91:1 ratio) and keep essential text away from the edges, since platforms crop differently. Always use an absolute URL — relative paths silently fail, which is the single most common reason a share card shows no image.

Add og:site_name too. It's a small touch that puts your brand name on the card, and it costs one line.

Why your share preview looks wrong (and how to fix it)

Social platforms cache aggressively. If you share a link, then fix your tags, the old card will keep appearing — sometimes for weeks. The fix is to force a re-scrape: Facebook's Sharing Debugger and LinkedIn's Post Inspector both re-fetch on demand, and X refreshes its cache when you run a URL through its card validator.

The other frequent culprit is JavaScript. Meta tags injected client-side are often missed entirely, because most scrapers read the raw HTML without executing scripts. Meta tags belong in the server-rendered <head>, always.

Frequently asked questions

How long should a meta description be?

Around 150–160 characters. Google truncates longer descriptions in search results, and frequently rewrites them to match the specific query, so treat yours as a strong suggestion rather than a guarantee.

What size should an Open Graph image be?

Use 1200 × 630 pixels, a 1.91:1 ratio. Keep important text away from the edges because platforms crop differently, and always reference the image with an absolute URL — relative paths are the most common reason a share card shows no image.

Do meta tags improve my Google ranking?

The title tag carries some ranking weight; the meta description does not. Their real value is click-through rate — a compelling title and description win more clicks from the same position, which improves performance over time.

Why is my share preview showing the old image?

Social platforms cache link previews aggressively. Force a refresh with Facebook’s Sharing Debugger, LinkedIn’s Post Inspector or X’s card validator. Also check the tags are in the server-rendered HTML — scrapers usually do not run JavaScript.