utilities
Flexbox Froggy
Learn CSS Flexbox through 24 interactive coding puzzles with frogs.
#flexbox#learning#interactive
Built-in toolFree · No signup
Open Graph & Meta Tag Generator
Fill in your page's title, description, canonical URL, and image, and get a complete, copy-ready block of <title>, meta description, canonical link, Open Graph, and Twitter Card tags. See exactly how the page will look when shared on Twitter/X, Facebook, LinkedIn, and in a Google search result — before you ship it.
Share:
0/160 chars
Recommended 1200×630px. Use the local-preview upload below to test the layout before you have a hosted URL.
example.com
example.com
Page title
example.com · example.com
Page title
Meta description preview will appear here.
Meta Tags
<!-- Open Graph --> <meta property="og:type" content="website"> <!-- Twitter --> <meta name="twitter:card" content="summary_large_image">
How to use
01
Fill in the basics
Title, meta description, canonical URL, and site name — the core fields every page needs.
02
Add a share image
Paste a hosted OG image URL, or upload a local image just to preview the layout before you have one hosted.
03
Check the previews
See live mockups for Twitter/X, Facebook/LinkedIn, and Google search results as you type.
04
Copy the tags
Paste the generated block straight into your page's <head>.
More CSS utility tools
From our directory of 30+ CSS tools.
Know a great CSS tool?
Submit it to the directory and help developers discover it.