What is Open Graph and Why Do You Need a Preview Tool?
When you share a link on a social media platform like Facebook, Twitter, or LinkedIn, you usually see an automatic preview consisting of a large image, a bold title, and a short description. This preview isn't randomly generated—it is explicitly defined by Open Graph (OG) tags in the HTML of the shared webpage.
The Open Graph protocol was originally created by Facebook in 2010 to allow any webpage to become a rich object in a social graph. Since then, almost every major platform—including LinkedIn, Slack, Discord, and iMessage—has adopted Open Graph as the standard for link previews. Without these tags, social networks are forced to guess what your page is about, often resulting in broken images or irrelevant text being displayed, which drastically lowers your Click-Through Rate (CTR).
The Core Open Graph Tags You Must Include
To ensure your link looks
professional across the web, you need to include at least the following four essential meta tags in the
<head> section of your HTML:
- og:title - The title of your page, article, or product. This should be compelling and ideally under 60 characters so it doesn't get truncated.
- og:description - A brief, 1-2 sentence summary of the content. While Facebook and LinkedIn use this, Twitter sometimes hides it on mobile devices depending on the card type.
- og:image - The URL of the image that should appear when the link is shared. This is the single most important factor for CTR.
- og:url - The canonical URL of the page. This prevents duplicate shares and consolidates your social metrics.
Understanding Twitter Cards
While Twitter falls back on
Open Graph tags if nothing else is available, it prefers its own proprietary markup known as Twitter Cards.
To guarantee your content looks perfect on X (formerly Twitter), you should specify a
twitter:card tag. The two most common types are summary (a small square image) and
summary_large_image (a full-width hero image).