Web & APIs · 5 min read
Meta Tags and Open Graph: Better Search and Share Previews
When someone finds your page on Google or pastes its link into Slack, a handful of tags in your <head> decide what they see. Most meta tags from the early web are now ignored, but the few that remain matter a great deal.
Try it yourself with the related tool.
Generate meta tags →Advertisement
The tags search engines use
The <title> is the clickable headline in search results — keep it unique per page and under about 60 characters. The meta name="description" is often used as the snippet beneath it; aim for 120–160 characters that actually describe the page. The meta keywords tag has been ignored by Google for over a decade.
Add link rel="canonical" to tell search engines the preferred URL when the same content is reachable at several addresses, and meta name="robots" only when you need to block indexing.
Open Graph for link previews
Open Graph tags were created by Facebook and are now read by LinkedIn, Slack, Discord, WhatsApp, and most chat apps. The essentials are og:title, og:description, og:image, og:url, and og:type. Without them, platforms guess — often pulling the wrong image or a cookie banner as the description.
Twitter / X cards
X reads Open Graph tags as a fallback but needs twitter:card to choose a layout. Set it to summary_large_image for a wide preview image. The other twitter: tags are only needed when you want different text than your Open Graph tags.
Getting the image right
Use a 1200 × 630 pixel image (a 1.91:1 ratio), keep important text away from the edges, and serve it from an absolute HTTPS URL. Previews are cached aggressively, so after changing tags, use each platform's debugger or share inspector to force a refresh.