A compelling OG image can boost engagement and click-through rates.
When you share a link on social media like Twitter, LinkedIn, Facebook, or via messaging apps like WhatsApp, Slack, or Telegram, a thumbnail preview image usually appears. This image, called the Open Graph or OG image, is meant to represent your content.
Without the correct setup, you might end up with missing images, cut-off titles, or irrelevant descriptions appearing in the social media cards. This leads to previews that look unprofessional and unappealing, which can deter engagement and reduce click-through rates.
Learn how your content is read by Search Engines and social media
Use the debugger to find warnings about opengraph tags and tags from social platforms that are either incomplete, or completely missing.
What is an OG image checker?
An OG image checker is a free tool that reads the Open Graph meta tags on any public URL and shows you how the link will look when it is shared. It fetches the page the way a social crawler does, extracts og:image, og:title and og:description, checks the image actually loads at a sensible size, and renders a preview card for each major platform.
What is the ideal og:image size?
1200 × 630 pixels, a 1.91:1 landscape ratio. That is the size Facebook, LinkedIn, X, Discord and Slack all design their large card layouts around. Below roughly 600 × 315 most platforms drop the large card entirely and fall back to a small square thumbnail. Keep the file under 1 MB, and under about 300 KB if you care about WhatsApp.
What are meta tags?
Meta tags provide useful information about your website content to search engines, visitors to your website, and when you share content. There are certain rules about each meta tag that you can make use of to position your content more effectively.
<title>Product Hunt – The best new products in tech.</title>
<meta name="description" content="Product Hunt is a curation of the best new products, every day. Discover the latest mobile apps, websites, and technology products that everyone's talking about.">
Why are meta tags so important?
When you search with Google, or other search engines, the title and description meta tags act like advertising copy! This is why it’s super important to get them right, if not, you're losing out on website visitors. The <title> acts as a headline, whilst the description (AKA a snippet) is a hook to pull people in with, typically describing the content of the page.
Titles aren't just used by search engines, they’re also used on bookmarks, and browser tabs. Google usually truncates descriptions to around 155-160 characters.
Recommended reading- Best practices for influencing title links
- Common issues with title tags, and how google manages them
- Best practices for creating quality meta descriptions
What are Open Graph meta tags?
Much like how meta tags can be used to describe your content to search engines, Open Graph Meta tags can be used to describe your content to social media channels and to augment and enhance your content in more places, such as rich snippets.
<meta property="og:title" content="og:image is missing — how to fix it" />
<meta property="og:type" content="website" />
<meta property="og:image" content="https://ogimage.info/og.png" />
<meta property="og:url" content="https://ogimage.info/learn/missing-og-image" />What are Twitter cards?
When you share a link on Twitter or X a thumbnail preview image usually appears in a card. There are four kinds of card, each suited to particular media types. Setting twitter:card to summary_large_image gives you the full-width image layout.
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="A guide to Open Graph meta tags" />
<meta name="twitter:description" content="Open Graph meta tags are used to specify how a page should be represented on social media. Learn how to leverage them to make your content stand out and increase engagement with the content you share." />
<meta name="twitter:image" content="https://imgsrc.io/og.png" />
<meta name="twitter:image:width" content="1200" />
<meta name="twitter:image:height" content="630" />
ZippyStarter