SEOApril 2026 ยท 7 min read

How to Create Meta Tags for SEO (With Examples)

Meta tags control how your pages appear in search results and social media feeds. A well-crafted title tag and meta description can dramatically improve click-through rates from Google, while Open Graph tags determine how your content looks when shared on Facebook, LinkedIn, and Twitter.

๐Ÿท๏ธ
Try the Meta Tag Preview
Free, no signup
โ†’
DG
Derek Giordano
Designer & Developer
In this guide
01The Title Tag02The Meta Description03Open Graph Tags (Facebook & LinkedIn)04Twitter Card Tags05Robots and Canonical Tags
โšก Key Takeaways
  • Write effective title tags, meta descriptions, Open Graph tags, and Twitter Cards.
  • The Title Tag.
  • The Meta Description.
  • Covers open graph tags (facebook & linkedin).
  • Covers twitter card tags.

The Title Tag

The title tag is the single most important on-page SEO element. It appears as the clickable headline in search results and in the browser tab. Keep it under 60 characters to avoid truncation. Place your primary keyword near the beginning. Make it compelling โ€” it's your ad headline in search results.

CSS Box Shadow Generator โ€” Free Online Tool | UDT

Format: Primary Keyword โ€” Value Proposition | Brand. Avoid keyword stuffing (repeating the same keyword multiple times) and all-caps.

The Meta Description

The meta description appears below the title in search results. Google sometimes overrides it with page content, but a well-written description increases click-through rate. Keep it between 120โ€“155 characters. Include your target keyword naturally (Google bolds matching terms). Make it actionable โ€” describe what the user gets by clicking.

๐Ÿ’ก Tip
Use 3+ color stops instead of 2 to avoid the muddy gray band that appears in the center of complementary-color gradients.

Open Graph Tags (Facebook & LinkedIn)

Open Graph tags control how your page appears when shared on Facebook, LinkedIn, and other platforms:

โš  Warning
CSS gradients used as backgrounds cannot be animated with standard transitions. Use background-size animation or @property registered custom properties instead.

The og:image should be 1200ร—630 pixels for optimal display. Without Open Graph tags, platforms guess from page content โ€” and usually guess poorly.

Twitter Card Tags

Twitter uses its own meta tags, falling back to Open Graph if they're missing:

Use summary_large_image for a prominent image card or summary for a smaller thumbnail card. The Meta Tag Preview tool shows exactly how your page will appear on Google, Facebook, and Twitter before you publish.

Robots and Canonical Tags

The robots meta tag controls crawler behavior: (default, usually not needed) or for pages that shouldn't appear in search results. The canonical tag prevents duplicate content issues by specifying the preferred URL: . Always set a canonical on every page โ€” it protects against URL parameter variations and www/non-www duplicates.

Frequently Asked Questions

What meta tags do I need for SEO?+
At minimum: a unique title tag (under 60 characters), a meta description (120โ€“155 characters), a canonical URL, and Open Graph tags (og:title, og:description, og:image) for social sharing.
How long should a meta description be?+
120โ€“155 characters. Google truncates longer descriptions. Include your target keyword naturally โ€” Google bolds matching terms in search results, which improves click-through rate.
Do meta tags affect SEO ranking?+
The title tag directly affects rankings โ€” it's a primary ranking signal. The meta description doesn't directly affect ranking but strongly influences click-through rate, which indirectly affects ranking. Open Graph tags affect social sharing, not search ranking.
Try it yourself

Use the Meta Tag Preview โ€” free, no signup required.

โšก Open Meta Tag Preview
DG
Derek Giordano
Written by the creator of Ultimate Design Tools. BA in Business Marketing.
โšก Try the free OG / Social Card Debugger โ†’