Loading...
Generate SEO, Open Graph, and Twitter Card meta tags for any page
Meta tags are HTML elements in the <head> section that provide metadata about a webpage to search engines and social platforms. Key meta tags include title (page title in search results), description (snippet text), Open Graph tags (Facebook/LinkedIn sharing), and Twitter Card tags (Twitter/X previews).
Google Search Preview
My Awesome Page Title
https://example.com/my-page
A compelling description of my page that will appear in search results and social previews.
<!-- Basic Meta Tags --> <title>My Awesome Page Title</title> <meta name="description" content="A compelling description of my page that will appear in search results and social previews." /> <link rel="canonical" href="https://example.com/my-page" /> <!-- Open Graph / Facebook --> <meta property="og:type" content="website" /> <meta property="og:url" content="https://example.com/my-page" /> <meta property="og:title" content="My Awesome Page Title" /> <meta property="og:description" content="A compelling description of my page that will appear in search results and social previews." /> <meta property="og:image" content="https://example.com/og-image.png" /> <meta property="og:site_name" content="My Website" /> <!-- Twitter --> <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:url" content="https://example.com/my-page" /> <meta name="twitter:title" content="My Awesome Page Title" /> <meta name="twitter:description" content="A compelling description of my page that will appear in search results and social previews." /> <meta name="twitter:image" content="https://example.com/og-image.png" /> <meta name="twitter:site" content="@mysite" />
| Tag | Recommended | Max |
|---|---|---|
| Title | 50–60 chars | 60 |
| Description | 120–160 chars | 160 |
| OG Image | 1200 × 630 px | 8 MB |
| Twitter Image | 1200 × 628 px | 5 MB |
Formula
<title>{title}</title> + <meta name='description'> + og:* + twitter:*title = Page title shown in browser tab and search results (50–60 chars)
description = Summary snippet for search results (120–160 chars)
og:image = Preview image for social sharing (1200×630px recommended)
twitter:card = Card type: summary, summary_large_image, app, or player
Worked Example
Complete meta tag set for a blog post
Did you know? Pages with properly configured Open Graph tags receive 50% more engagement on Facebook compared to pages without them. The og:image tag alone accounts for the largest impact on click-through rates from social shares (source: Buffer Social Media Study).
Sources
Convert text to ASCII codes and back. Supports decimal, hex, binary, and octal formats.
Convert width/height to aspect ratios, scale dimensions, and generate responsive embed CSS for any layout.
Calculate required internet bandwidth based on devices and activities in your household.
Encode and decode Base64 strings. Convert text for data URIs, APIs, and safe data transmission.
Create CSS border-radius with visual controls for each corner. Generate circles, pills, and custom shapes.
Create CSS box shadows with multiple layers, live preview, and copy-ready code.