You paste your URL into Slack and the preview shows a generic site icon with no title or description. You post it to LinkedIn and it shows the wrong image. Meanwhile, a competitor's link unfurls beautifully with a branded image, clean title, and compelling description. The difference isn't content — it's a dozen meta tag lines that most developers skip.
Here's the complete set of meta tags every page needs in 2026.
The Core Set (25 Lines)
Paste this into your <head> and fill in the placeholders:
<!-- Primary meta tags -->
<title>Your Page Title - Under 60 Characters</title>
<meta name="title" content="Your Page Title - Under 60 Characters">
<meta name="description" content="A compelling description under 160 chars. Include your primary keyword and a call to action. No signup required.">
<meta name="robots" content="index, follow">
<link rel="canonical" href="https://yourdomain.com/your-page/">
<!-- Open Graph (Facebook, LinkedIn, Slack, Discord, iMessage) -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://yourdomain.com/your-page/">
<meta property="og:title" content="Your Page Title - Under 60 Characters">
<meta property="og:description" content="A compelling description under 160 chars.">
<meta property="og:image" content="https://yourdomain.com/images/og-image.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Description of the image content">
<meta property="og:site_name" content="Your Site Name">
<meta property="og:locale" content="en_US">
<!-- Twitter/X Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:url" content="https://yourdomain.com/your-page/">
<meta name="twitter:title" content="Your Page Title - Under 60 Characters">
<meta name="twitter:description" content="A compelling description under 160 chars.">
<meta name="twitter:image" content="https://yourdomain.com/images/og-image.jpg">
<meta name="twitter:image:alt" content="Description of the image content">
<meta name="twitter:site" content="@YourTwitterHandle">
That's it. These 25 lines give you correct rendering on Google, social platforms, messaging apps, and Slack.
Character Limits That Actually Matter
Title tag: 60 characters max. Google truncates titles around 580px display width, which corresponds to ~60 characters in a standard font. Longer titles aren't penalized for ranking — but they are truncated in SERPs, cutting off your call to action. Count characters, not pixels.
Meta description: 160 characters max. Google truncates descriptions around 920px display width, approximately 155-160 characters. This doesn't affect ranking directly, but a truncated description reduces click-through rate. If your description is 180 characters, rewrite it — don't just hope Google picks a good snippet.
OG title: 60-70 characters. Social platforms are more lenient than Google but truncate around the same point. Keep it consistent with your title tag.
OG description: 200 characters max. Open Graph descriptions are displayed in social previews, not search results. You have slightly more room, but 160 characters is still the practical limit before truncation on most platforms.
OG Image Specs
Recommended: 1200×630px (1.91:1 ratio). This displays correctly on Facebook, LinkedIn, Twitter, Slack, and iMessage.
Minimum: 600×315px. Smaller images display without preview on some platforms.
File format: JPEG for photos (smaller file size), PNG for graphics with text or transparency.
Text in OG images: Keep important text away from the bottom 15% of the image — some platforms crop the bottom. Also avoid text in the far left/right 5% margins.
A missing or incorrectly-sized OG image is the most common reason social previews look broken. When your link shows as a small thumbnail instead of a full preview, it's usually because og:image is missing or the image is under 600px wide.
How Google Renders Meta Tags in 2026
Google uses your <title> tag as the primary source for search result headlines — but rewrites it when the tag doesn't match the page content or is too short/long. If Google is rewriting your title in search results, the fix is usually: make the title more descriptive and align it with your H1.
Google ignores the <meta name="keywords"> tag completely. It hasn't been a ranking signal since 2009.
Google reads but doesn't always display your meta description. For roughly 35% of search results, Google generates its own description from page content. This happens most often when: your description doesn't match what the user searched for, or your description is a verbatim copy of the first paragraph with no additional value.
The canonical tag matters. If your page is accessible at multiple URLs (with/without trailing slash, www vs non-www, HTTP vs HTTPS), Google may split link equity across those variants. The rel="canonical" tag tells Google which version is authoritative. Set it to the exact URL you want indexed.
Common Mistakes
Duplicate titles and descriptions across pages: Every page should have a unique <title> and meta description. If you're using the same description on 50 pages, Google treats all 50 as low-quality duplicates.
Missing og:image on interior pages: The homepage usually has an OG image; blog posts and tool pages often don't. Add it to every page that might get shared. A lazy approach: create one branded default OG image and use it as a fallback when no page-specific image exists.
Wrong og:type: Use article for blog posts and website for static pages. The article type enables extra OG properties like article:published_time and article:author, which affect how news aggregators and LinkedIn display your content.
Forgetting twitter:card type: Without twitter:card, Twitter/X defaults to a small square thumbnail. Add summary_large_image to get the full-width preview card. This single meta tag doubles click-through rate on Twitter shares.
Article-Specific Meta Tags
For blog posts and articles, add these OG tags to enable richer social previews and news aggregator display:
<meta property="og:type" content="article">
<meta property="article:published_time" content="2026-03-23T09:00:00Z">
<meta property="article:modified_time" content="2026-03-23T09:00:00Z">
<meta property="article:author" content="https://yourdomain.com/about/">
<meta property="article:section" content="Developer Tools">
<meta property="article:tag" content="SEO">
<meta property="article:tag" content="Web Development">
LinkedIn in particular uses article:published_time to display publication dates on shared content. Google News and Apple News read these fields to categorize and timestamp content in aggregation.
Debugging Missing Social Previews
When your social preview doesn't show up after adding meta tags, the problem is almost always one of three things:
Cached old preview: Facebook, LinkedIn, and Twitter cache previews aggressively. A page you shared before you added meta tags will show the cached (empty) preview until the cache expires. Force a refresh using each platform's debugging tool:
- Facebook: Sharing Debugger at developers.facebook.com/tools/debug
- LinkedIn: Post Inspector at linkedin.com/post-inspector
- Twitter/X: Card Validator at cards-dev.twitter.com/validator
Tags in the wrong location: All meta tags must be in the <head> section, before </head>. Tags placed after the opening <body> tag are ignored by social crawlers, which stop reading after the head section.
Server-side rendering required: Social crawlers generally don't execute JavaScript. If your meta tags are added dynamically by JavaScript (React, Vue, Angular with client-side rendering), the crawler sees the pre-hydration HTML — which has no meta tags. Use server-side rendering (Next.js, Nuxt, SvelteKit) or pre-rendering to ensure meta tags are in the initial HTML response.
Image not accessible: Your OG image URL must be publicly accessible. Images behind authentication, at localhost, or with misconfigured CORS headers won't load in social previews. Test by opening the OG image URL in an incognito browser window — if it loads, the crawler can likely access it.
Use the Meta Tag Generator to fill in the template with your page-specific values and copy the output into your <head>.
Meta Tag Generator
Generate the complete set of title, description, OG, and Twitter Card meta tags for any page.