Preview Open Graph card layouts for social media platforms.
When you paste a URL into a tweet or a Slack message, the app instantly generates a beautiful preview card with an image, a title, and a description. How does it know what image to use?
The platform's backend sends an automated crawler (a bot) to fetch the raw HTML of your URL. It does not render the page or execute JavaScript; it simply parses the <head> of your document looking for specific metadata tags.
Created by Facebook in 2010, the Open Graph (OG) protocol is the industry standard for declaring this rich metadata.
A typical implementation looks like this:
<meta property="og:title" content="My Article" /> <meta property="og:description" content="A brief summary." /> <meta property="og:image" content="https://example.com/hero.jpg" />While almost all platforms support standard OG tags, Twitter also maintains its own proprietary format called Twitter Cards (e.g., twitter:card or twitter:image).
If you want the large, edge-to-edge image layout on Twitter, you must explicitly include <meta name="twitter:card" content="summary_large_image">. If Twitter-specific tags are missing, Twitter's crawler is programmed to fall back and read your standard Open Graph tags instead.
How do platforms like Slack or Twitter fetch the image for a link preview?