Meta Tags & Open Graph

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

html

<!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

html

<!-- ❌ 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

html

<!-- 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

html

<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:

html

<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: noindex accidentally — 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.