Loading...
Enter Open Graph meta tags and preview how your link appears on Facebook, Twitter, LinkedIn, and Slack before publishing.
Open Graph is a protocol created by Facebook that enables web pages to control how they appear when shared on social media. OG tags define the title, description, image, and URL shown in link previews.
<meta property="og:title" content="My Awesome Page" /> <meta property="og:description" content="A compelling description of your page that makes people want to click." /> <meta property="og:url" content="https://example.com/my-page" /> <meta property="og:image" content="https://via.placeholder.com/1200x630/4f46e5/ffffff?text=OG+Image" /> <meta property="og:site_name" content="My Website" /> <meta property="og:type" content="website" /> <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:title" content="My Awesome Page" /> <meta name="twitter:description" content="A compelling description of your page that makes people want to click." /> <meta name="twitter:image" content="https://via.placeholder.com/1200x630/4f46e5/ffffff?text=OG+Image" />
example.com
My Awesome Page
A compelling description of your page that makes people want to click.
My Awesome Page
A compelling description of your page that makes people want to click.
🔗 example.com
Formula
OG Tags = <meta property='og:{property}' content='{value}' />og:title = the title shown in the social media card (60 chars max)
og:description = the description text below the title (155 chars max)
og:image = URL of the preview image (1200×630px recommended)
og:url = the canonical URL of the page being shared
Worked Example
Setting up OG tags for a blog post
Did you know? The Open Graph protocol was created by Facebook in 2010. It is now supported by virtually all social platforms including LinkedIn, Twitter/X, Pinterest, Slack, Discord, and iMessage.
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.