Web & Design
How to Write Meta Tags That Actually Help SEO and Social Sharing
Learn how to write meta tags for SEO, Open Graph and Twitter Cards so pages rank cleanly and unfurl into rich previews on every social platform.
Try the toolMeta Tag Generator →Why your shared links look broken
You ship a page, drop the URL into Slack or post it on X, and instead of a polished preview you get a bare link, the wrong title, or no image at all. In Google, the snippet gets cut off mid-sentence. Both problems trace back to the same place: the <head> of your page is missing the meta tags that tell crawlers and social platforms how to describe it.
Meta tags are small HTML elements that carry metadata about a page — its title, a summary, a preview image, and how it should be framed when shared. Get them right once and every share, from a search result to a LinkedIn card to an iMessage bubble, renders the way you intended.
The three families of tags
There are three overlapping standards to cover, because different platforms read different ones:
- Standard SEO tags —
<title>and<meta name="description">drive the Google result snippet. - Open Graph (the
og:prefix) — used by Facebook, LinkedIn, Slack, Discord, and WhatsApp. - Twitter Cards (the
twitter:prefix) — X's own layer, which falls back to Open Graph when a tag is missing.
You do not repeat yourself for fun: the redundancy is what guarantees a consistent preview no matter where the link lands.
A complete head block
Here is a full set for a single article. Notice that every URL is absolute and the image is sized for a large card.
<!-- Standard SEO -->
<title>How to Cold Brew Coffee at Home</title>
<meta name="description"
content="A 5-minute guide to smooth, low-acid cold brew: ratios, steep time, and storage.">
<link rel="canonical" href="https://example.com/cold-brew">
<!-- Open Graph -->
<meta property="og:type" content="article">
<meta property="og:title" content="How to Cold Brew Coffee at Home">
<meta property="og:description" content="A 5-minute guide to smooth, low-acid cold brew.">
<meta property="og:url" content="https://example.com/cold-brew">
<meta property="og:image" content="https://example.com/img/cold-brew-1200x630.jpg">
<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="How to Cold Brew Coffee at Home">
<meta name="twitter:description" content="A 5-minute guide to smooth, low-acid cold brew.">
<meta name="twitter:image" content="https://example.com/img/cold-brew-1200x630.jpg">Rather than type all of this by hand for every page, fill in the fields in the Meta Tag Generator and copy the finished block. It runs entirely in your browser, so nothing you type is uploaded.
Common pitfalls
- Relative image URLs.
og:imagemust be a fullhttps://URL. Crawlers do not resolve/img/cover.jpgagainst your domain, so they simply show nothing. - Wrong image dimensions. Aim for
1200×630pixels and settwitter:cardtosummary_large_imagefor the big preview instead of a tiny thumbnail. - Description length. Keep it around 150–160 characters and make it unique per page. Duplicated descriptions across a site dilute relevance.
- Unescaped characters. If your title contains
&,<or quotes, escape them or the tag can break. The HTML Entity Encoder handles that cleanly. - Stale caches. Platforms cache previews aggressively. Use each network's debugger (or append a cache-busting query string) after you change tags.
One more tip: keep your canonical URL and og:url in sync, and derive them from a clean, lowercase path. A Slug Generator is handy for turning a title into a tidy URL segment.
Conclusion
Meta tags are cheap insurance: a few lines in the <head> that decide whether your link looks trustworthy or broken the moment someone shares it. Cover the three families, use absolute URLs, size your image correctly, and you will get clean search snippets and rich social cards without guesswork.