Difficulty: Intermediate
Open Graph (OG) is a protocol created by Facebook (now Meta) in 2010 that allows web pages to control how they appear when shared on social media platforms. When someone shares a link on Facebook, LinkedIn, Slack, Discord, or iMessage, the platform fetches the page and reads its Open Graph meta tags to generate a rich preview card with a title, description, and image. Without OG tags, platforms will attempt to extract information from the page, often producing unattractive or irrelevant previews.
The four essential Open Graph properties are og:title, og:description, og:image, and og:type. The og:title should be concise and engaging - it can differ from the HTML <title> tag, which is optimized for search engines. The og:description provides a brief summary (usually 2-3 sentences) that appears below the title in the preview card. The og:image specifies the URL of the image to display - this is the single most impactful OG tag because visual previews dramatically increase engagement. The og:type categorizes the content (website, article, product, video, etc.) and tells platforms how to structure the preview.
Image specifications matter significantly for social media previews. The recommended size for og:image is 1200x630 pixels with a 1.91:1 aspect ratio, as this works well across Facebook, LinkedIn, and most other platforms. The image URL must be absolute (not relative) and accessible publicly - platforms fetch it from their servers, so images behind authentication or on localhost will not work. Including og:image:width and og:image:height helps platforms render the preview faster without needing to download the image first.
Twitter uses its own meta tag system called Twitter Cards, which operates alongside Open Graph. The primary Twitter-specific tag is twitter:card, which controls the card layout: summary (small square image), summary_large_image (wide image), player (embedded media), or app (mobile app install). Twitter falls back to Open Graph tags for title, description, and image if its own tags are not present, but the twitter:card type tag must be explicitly set. The twitter:site and twitter:creator tags attribute the content to specific Twitter accounts.
Beyond social media, Open Graph metadata is used by messaging apps (WhatsApp, Telegram, iMessage), project management tools (Jira, Notion), and even search engines for knowledge panels. This makes OG tags a high-impact investment - a few lines of HTML can dramatically improve how your content appears wherever links are shared. Use tools like Facebook's Sharing Debugger, Twitter's Card Validator, and LinkedIn's Post Inspector to test and debug your social previews.
<head>
<!-- Basic Open Graph tags -->
<meta property="og:title" content="Complete Guide to CSS Grid Layout" />
<meta property="og:description" content="Master CSS Grid with practical examples. Learn grid containers, template areas, auto-placement, and responsive patterns used by top websites." />
<meta property="og:image" content="https://example.com/images/css-grid-guide-og.jpg" />
<meta property="og:url" content="https://example.com/blog/css-grid-guide" />
<meta property="og:type" content="article" />
<meta property="og:site_name" content="Dev Blog" />
<meta property="og:locale" content="en_US" />
<!-- Image dimensions help platforms render previews faster -->
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="CSS Grid layout diagram showing a 12-column grid with named areas" />
</head>og:title and og:description can differ from the HTML title and meta description since they serve different purposes (social sharing vs search results). og:url should point to the canonical URL. Always include image dimensions and alt text for accessibility.
<head>
<!-- Twitter Card type (required for Twitter previews) -->
<meta name="twitter:card" content="summary_large_image" />
<!-- Twitter-specific overrides (optional, falls back to OG) -->
<meta name="twitter:title" content="CSS Grid: The Complete Guide" />
<meta name="twitter:description" content="Everything you need to know about CSS Grid in one tutorial." />
<meta name="twitter:image" content="https://example.com/images/css-grid-twitter.jpg" />
<meta name="twitter:image:alt" content="CSS Grid layout examples" />
<!-- Attribution -->
<meta name="twitter:site" content="@DevBlog" />
<meta name="twitter:creator" content="@janedeveloper" />
<!-- Open Graph fallbacks (Twitter reads these if its own tags are missing) -->
<meta property="og:title" content="Complete Guide to CSS Grid Layout" />
<meta property="og:description" content="Master CSS Grid with practical examples and responsive patterns." />
<meta property="og:image" content="https://example.com/images/css-grid-guide-og.jpg" />
</head>Twitter Cards require the twitter:card tag to specify the layout type. Twitter falls back to OG tags for title, description, and image. summary_large_image provides the most visual impact with a wide preview image above the title and description.
<!-- Article (blog post, news) -->
<meta property="og:type" content="article" />
<meta property="article:published_time" content="2026-03-01T08:00:00Z" />
<meta property="article:modified_time" content="2026-03-10T14:30:00Z" />
<meta property="article:author" content="https://example.com/authors/jane" />
<meta property="article:section" content="Web Development" />
<meta property="article:tag" content="CSS" />
<meta property="article:tag" content="Grid Layout" />
<!-- Product page -->
<meta property="og:type" content="product" />
<meta property="product:price:amount" content="49.99" />
<meta property="product:price:currency" content="USD" />
<meta property="product:availability" content="in stock" />
<!-- Video content -->
<meta property="og:type" content="video.other" />
<meta property="og:video" content="https://example.com/videos/tutorial.mp4" />
<meta property="og:video:width" content="1280" />
<meta property="og:video:height" content="720" />
<meta property="og:video:type" content="video/mp4" />Different og:type values unlock additional metadata fields. The article type supports published_time, author, and tags. Product pages can include price and availability. Video pages can embed playable media directly in social previews.
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- SEO -->
<title>10 CSS Grid Tricks Every Developer Should Know | Dev Blog</title>
<meta name="description" content="Discover 10 powerful CSS Grid techniques including subgrid, auto-fill vs auto-fit, named lines, and responsive patterns without media queries." />
<!-- Open Graph -->
<meta property="og:type" content="article" />
<meta property="og:title" content="10 CSS Grid Tricks You Need to Know" />
<meta property="og:description" content="Level up your layout skills with these 10 CSS Grid techniques used by professional frontend developers." />
<meta property="og:image" content="https://devblog.com/og/css-grid-tricks.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="10 CSS Grid tricks illustrated with code snippets" />
<meta property="og:url" content="https://devblog.com/css-grid-tricks" />
<meta property="og:site_name" content="Dev Blog" />
<meta property="article:published_time" content="2026-03-01T10:00:00Z" />
<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@DevBlog" />
<meta name="twitter:creator" content="@cssmaster" />
<!-- Canonical URL -->
<link rel="canonical" href="https://devblog.com/css-grid-tricks" />
</head>A complete social sharing setup includes SEO meta tags (title, description), Open Graph tags for Facebook and LinkedIn, Twitter Card tags, and a canonical URL. Note how og:title differs from the HTML title - it is shorter and more engaging for social feeds.
og:title, og:description, og:image, Twitter Cards, Social Sharing