TL;DR
- Meta tags control how your site appears in search results and social media shares
- The essential four: title, description, og:image, and og:title
- Twitter/X uses its own twitter:card tags but falls back to Open Graph
- OG images should be 1200×630px for optimal display across all platforms
Why Meta Tags Matter
You can build the most beautiful site in the world, but when someone shares it on Slack, Twitter, or LinkedIn, all they see is your meta tags. A missing og:image means a blank preview card. A bad title tag means lower click-through rates from Google. Meta tags are your site's first impression.
Essential Meta Tags
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- SEO essentials -->
<title>CSS Grid Best Practices — stellae.design</title>
<meta name="description" content="Learn CSS Grid layout with practical examples, responsive patterns, and common pitfalls to avoid. A developer-focused guide.">
<!-- Open Graph (Facebook, LinkedIn, Slack, Discord) -->
<meta property="og:type" content="article">
<meta property="og:title" content="CSS Grid Best Practices">
<meta property="og:description" content="Learn CSS Grid layout with practical examples and responsive patterns.">
<meta property="og:image" content="https://stellae.design/og/css-grid-best-practices.png">
<meta property="og:url" content="https://stellae.design/en/learn/css-grid-best-practices">
<meta property="og:site_name" content="stellae.design">
<!-- Twitter/X -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="CSS Grid Best Practices">
<meta name="twitter:description" content="Learn CSS Grid layout with practical examples and responsive patterns.">
<meta name="twitter:image" content="https://stellae.design/og/css-grid-best-practices.png">
<!-- Additional useful tags -->
<meta name="author" content="stellae.design">
<link rel="canonical" href="https://stellae.design/en/learn/css-grid-best-practices">
</head>
The Title Tag
The most important meta tag for SEO. It appears in:
-
Browser tabs
-
Search engine results (as the clickable headline)
-
Social shares (as fallback for og:title) Best practices for title tags:
-
50-60 characters — Google truncates longer titles
-
Front-load keywords — "CSS Grid Guide" not "A Complete Guide to Using CSS Grid"
-
Include your brand — append " — YourSite" at the end
-
Unique per page — never duplicate title tags across pages
Meta Description
Not a direct ranking factor, but it directly affects click-through rate from search results.
- 120-160 characters — longer gets truncated in search results
- Include a value proposition — why should someone click?
- Include target keywords — Google bolds matching terms
- Write for humans — it's ad copy, not a keyword dump
<!-- ❌ Bad: keyword stuffing, no value -->
<meta name="description" content="CSS Grid CSS Grid layout CSS Grid tutorial CSS Grid examples CSS Grid responsive design">
<!-- ✅ Good: concise, valuable, includes keywords naturally -->
<meta name="description" content="Master CSS Grid with real-world examples. Learn responsive layouts, named grid areas, and subgrid — plus common mistakes to avoid.">
Open Graph Tags Deep Dive
og:image
The most impactful Open Graph tag. A good preview image can 2-3x your click-through rate on social media.
- Recommended size: 1200×630px (1.91:1 ratio)
- File size: under 5MB (ideally under 1MB)
- Format: PNG for text-heavy images, JPEG for photos
- Safe zone: Keep important content within the center 80% — platforms crop differently
<!-- Specify image dimensions for faster rendering -->
<meta property="og:image" content="https://stellae.design/og/guide-cover.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="CSS Grid Best Practices guide cover">
For dynamic OG image generation, check out stellae.og — generate Open Graph images programmatically for every page.
og:type
Tells platforms what kind of content this is:
- website — for your homepage
- article — for blog posts, guides, documentation
- product — for e-commerce product pages
- profile — for user profiles
Twitter/X Card Tags
Twitter has its own meta tags but falls back to Open Graph if they're missing. You only need Twitter-specific tags for:
- twitter:card — this has no OG equivalent. Set it to summary_large_image for full-width previews
- twitter:site — your site's @handle
- twitter:creator — the author's @handle
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@stellaedesign">
<!-- Title, description, and image fall back to og: tags -->
Structured Data (JSON-LD)
Beyond meta tags, structured data helps search engines understand your content for rich results:
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Article",
"headline": "CSS Grid Best Practices",
"description": "Learn CSS Grid layout with practical examples.",
"author": {
"@type": "Organization",
"name": "stellae.design"
},
"datePublished": "2025-01-15",
"image": "https://stellae.design/og/css-grid-best-practices.png"
}
</script>
Debugging Meta Tags
Always validate your meta tags before launching:
- Facebook Sharing Debugger (developers.facebook.com/tools/debug/) — previews OG cards and clears the cache
- Twitter Card Validator (cards-dev.twitter.com/validator) — previews Twitter cards
- Google Rich Results Test — validates structured data
- LinkedIn Post Inspector — previews LinkedIn share cards Platforms cache OG data aggressively. After updating meta tags, use these tools to force a re-scrape.
Best Practices
- Do set unique title, description, og:image for every page — it's worth the effort
- Do use absolute URLs for og:image — relative paths don't work
- Do include og:image:width and og:image:height — platforms render previews faster
- Do test with Facebook Debugger and Twitter Validator before launch
- Don't use the same generic OG image for all pages — each page deserves its own
- Don't exceed 60 chars for titles or 160 chars for descriptions
- Don't forget the viewport meta tag — responsive design depends on it
Common Mistakes
- Missing
og:image— the #1 social sharing mistake. Always provide one - Wrong image dimensions — images that aren't 1.91:1 get cropped unpredictably
- HTTP instead of HTTPS for image URLs — many platforms won't load insecure images
- Duplicate title tags — every page must have a unique title for SEO
- Setting
robots: noindexaccidentally — one tag can hide your entire site from search engines - Not updating cached previews — after changing OG tags, use platform debug tools to clear the cache
Tools to Explore
- Meta Tag Generator — generate complete meta tag sets with live preview For dynamic OG images, check out stellae.og — automatically generate beautiful Open Graph images for every page on your site.