The familiar scene: you publish a page, share it on LinkedIn, and the preview shows the wrong title, a blank description, and a random image pulled from somewhere on the page. Or worse, no title tag at all because you forgot the CMS doesn't generate one automatically.
Meta tags live in the <head> and are invisible on the page.
That's exactly why they get forgotten. Yet they're what separates a link someone
clicks from a link that looks like a phishing attempt.
Three layers, three sets of rules
Search engines read <title> (shown as the blue
clickable line in results, 50-70 characters) and
<meta name="description"> (the grey snippet below it, 150-160 chars).
Google can override your description with something it generates itself, but if you
leave it blank, it picks the first paragraph it finds — rarely your best writing.
Social platforms (Facebook, LinkedIn, WhatsApp, Slack) read Open
Graph tags: og:title, og:description, og:image
and og:url. Without them, the preview is assembled from whatever the
crawler finds first. The ideal OG image is 1200 × 630 px — large enough to be
readable in a feed, small enough to load quickly.
Twitter/X has its own format, Twitter Cards, with
twitter: prefixed tags. In practice, Twitter falls back to OG tags,
but the twitter:card tag lets you choose between a small thumbnail
(summary) and a full-width image (summary_large_image).
The most common mistakes
A title that's too long: Google truncates past roughly 600 pixels — not characters, because a capital "W" takes more space than a lowercase "i". A title that's too short wastes keyword real estate.
A generic description copy-pasted across every page: "Welcome to our website. Browse our products and services." The description doesn't directly affect rankings, but it's your only chance to speak to someone who's hovering over your link and hasn't decided to click yet. A generic description loses that conversion.
A missing OG image: the LinkedIn preview shows a blank square. The link looks broken.
OG tags in French but not in English, or different content per language: social crawlers don't follow language redirects. They see whatever the server returns for the URL they request.
Using the generator
I built a free meta tags generator that outputs all three layers at once: SEO, Open Graph and Twitter Card.
It shows a live preview of how your page will appear in Google (title + description + URL), on Facebook/LinkedIn (image + title + domain), and on Twitter (summary or large image). You see exactly what your visitors will see before you publish anything.
Character counters turn red when you exceed the limits. A global SEO score (out of 100) checks the basics: title length, description present, canonical URL set, OG image provided, viewport defined.
The generated code is ready to paste into your <head>, in the
recommended order (charset and viewport first, then OG tags).
A few rules worth keeping
Put your main keyword early in the title, ideally in the first three words. The description doesn't directly affect Google rankings, but it drives click-through rate, which feeds back into position over time.
The canonical tag (<link rel="canonical">) prevents duplicate
content when a page is accessible from multiple URLs: with and without
www, with and without a trailing slash, with UTM parameters.
To validate after publishing: the Facebook Sharing Debugger
(developers.facebook.com/tools/debug), the
Twitter Card Validator, and Google Rich Results Test.
The generator lets you skip the publish-test-fix-republish loop by showing
the result upfront.