The Anatomy of Open Graph Tags for Social Media Sharing

When you share a web link on messaging platforms or social media feeds, the application automatically displays a visual card containing a title, description, and thumbnail image. This link preview is generated by reading Open Graph (OG) meta tags embedded inside the HTML head of the webpage.

Essential Open Graph Meta Tags

To ensure your links render attractive preview cards across all social networks, include these four core tags:

<meta property="og:title" content="ManyTinyTools - Free Online Web Utilities" />
<meta property="og:description" content="A collection of fast, browser-first tools for PDFs, images, and text." />
<meta property="og:image" content="https://manytinytools.com/og-image.png" />
<meta property="og:url" content="https://manytinytools.com" />

Best Practices for Open Graph Images

• Recommended Dimensions: Use images sized at 1200 × 630 pixels for high-resolution retina screen rendering.
• File Size Optimization: Keep OG image file sizes under 1MB to ensure messaging apps fetch preview images instantly.
• Aspect Ratio: A 1.91:1 horizontal landscape aspect ratio prevents unwanted image cropping across platforms.

Learn more web design and SEO best practices on the ManyTinyTools Blog.