Open Graph (OG) Preview: How to Optimize Your Links for Social Media
Have you ever copied a link to a blog post, pasted it into a WhatsApp, Slack, or Facebook chat, and suddenly watched a beautiful wide image, a bold headline, and a short description magically generate below your text?
Conversely, have you ever shared a link to your own website, only to discover it displays a gray generic box and a confusing, cut-off title?
The difference between a highly clickable, visually stunning link preview and an ugly, broken one comes down to three letters: Open Graph (OG). In this guide, we will explore what OG tags are, why they are critical for social media marketing, and how to preview and fix them before you publish.
What is Open Graph?
The Open Graph protocol was created by Facebook in 2010. Its purpose is to allow any web page to have the same rich functionality as any other object on Facebook (like a photo or a profile).
Before Open Graph, if you shared a link, the social media platform would blindly scrape your page, randomly guessing which image and text snippet best represented your content. Usually, the guess was wrong. Open Graph puts you in control by using specific <meta> tags placed strictly in the <head> of your website's HTML.
Today, Open Graph is the universal standard. Twitter, LinkedIn, Discord, Slack, iMessage, and almost every other platform use OG tags (or fall back to them) to build rich link previews.
The Most Important OG Tags
While there are dozens of possible tags, you only need four required properties for your page to look great when shared:
og:title: The title of the content. This is usually similar to your page's standard<title>tag, but without the annoying "- Sitename" branding appended to the end.og:type: The type of your object. Is it a website (website), a blog post (article), or a video (video)?og:url: The canonical URL of your page. This prevents duplicate content issues if people share different tracking links (like?utm_source=fb).og:image: The absolute most important tag. This is the URL to the image that will appear in the link preview.
Sizing Your og:image Perfectly
The biggest mistake developers make is using a small, square logo for their og:image. To ensure your image looks sharp across all platforms, including retina displays, it must be exactly 1200 x 630 pixels (a 1.91:1 ratio). Ensure the most important text and visuals are centered so they aren't cropped out on platforms that use square previews (like WhatsApp).
Twitter Cards vs. Open Graph
Twitter has its own proprietary tags, called Twitter Cards (e.g., twitter:card, twitter:image).
Do you need to write them twice? Technically, yes, for perfect optimization. However, Twitter's crawler is smart enough that if it cannot find Twitter-specific tags, it will automatically fall back and use your Open Graph tags instead. Still, it is highly recommended to include at least <meta name="twitter:card" content="summary_large_image"> to guarantee Twitter displays your wide image instead of a tiny square.
Why You Need an OG Preview Tool
You cannot visually test your Open Graph tags just by looking at your Google Chrome window. The metadata operates behind the scenes.
Furthermore, if you paste a link into Facebook to "see how it looks" and it's wrong, Facebook will cache that broken image. If you fix your code and immediately try sharing again, Facebook will still show the broken image because its servers saved the old version.
UtiliZest's free OG Preview tool solves this problem. It simulates exactly how Facebook, Twitter, and LinkedIn scrapers will read your page. Before you ever hit "share" on social media, you can verify that your images aren't being cropped awkwardly, your title fits the character limit, and your description is compelling. Stop guessing and start designing links that demand to be clicked.