The Lazy Developer's Guide to Perfect Social Media Previews
You finally ship your project. You share the link on Twitter. And the preview looks like... nothing. A blank card. Or worse, some random text fragment from your footer. I've been there. Multiple times. And it's always the same problem: Open Graph tags. What Are OG Tags? Open Graph tags are meta tags in your HTML <head> that tell social platforms what to show when someone shares your link. Facebook invented the protocol, but Twitter, LinkedIn, Slack, Discord, and basically every platform uses them now. Here are the important ones: <head> <meta property= "og:title" content= "My Awesome Project" /> <meta property= "og:description" content= "A short description of what this does" /> <meta property= "og:image" content= "https://example.com/preview.png" /> <meta property= "og:url" content= "https://example.com" /> <meta property= "og:type" content= "website" /> <!-- Twitter-specific (yes, they still need their own) --> <meta name= "twitter:card" content= "summary_large_image" /> <meta name=
Continue reading on Dev.to Webdev
Opens in a new tab
