What Are Open Graph Meta Tags?
Open Graph (OG) meta tags are HTML elements that control how your web pages appear when shared on social media platforms like Facebook, LinkedIn, Twitter, and messaging apps such as WhatsApp and Slack. When someone pastes a link, the platform's crawler reads these tags to generate a rich preview card showing a title, description, and image. Without proper OG tags, platforms fall back to guessing - often pulling the wrong image, truncating your title, or showing a blank preview.
The Open Graph protocol was introduced by Facebook in 2010 and has since become the universal standard for link previews across the web. Every major social platform supports it, and most messaging applications use it to generate link unfurls. Getting your OG tags right takes minutes and directly improves your content's visibility and click-through rate.
Why Social Sharing Previews Matter
A well-formatted social preview noticeably increases engagement with your shared links. Studies consistently show that posts with rich preview cards - a compelling image, clear title, and concise description - receive significantly more clicks than bare URLs or poorly formatted previews. This applies whether you are sharing blog posts, product pages, landing pages, or interactive tools.
For engineering teams and technical blogs, social previews are especially important because much of your distribution happens through platforms like Twitter, LinkedIn, and Hacker News. If your preview looks broken or unprofessional, people will scroll past without clicking, regardless of how good the underlying content is. Use the preview tool above to check exactly how your URLs will appear before you share them.
The Essential OG Tags Every Page Needs
While the Open Graph protocol defines dozens of properties, four tags are essential for every page:
- og:title - The title of your page as it should appear in the preview card. Keep it under 60 characters to avoid truncation.
- og:description - A brief summary of the page's content. Aim for 120-160 characters. This appears below the title in most preview cards.
- og:image - The URL of the image to display in the preview. Use an absolute URL, ensure the image is at least 1200 x 630 pixels, and keep the file size under 1 MB.
- og:url - The canonical URL of the page. This tells platforms which URL to associate with the shared content, consolidating shares across different URL variations.
Beyond these four, consider adding og:type (usually "website" or "article"), og:site_name, and og:locale for a complete implementation.
How Twitter Cards Differ from OG Tags
Twitter uses its own meta tag format called Twitter Cards, which provides additional control over how links appear on Twitter specifically. The most important Twitter-specific tag is twitter:card, which determines the card layout - "summary" for a small image beside the text, or "summary_large_image" for a large image above the text.
The good news is that Twitter falls back to OG tags when Twitter-specific tags are not present. So if you have og:title and og:image set, Twitter will use those values. However, for the best results, include at minimum twitter:card and twitter:image alongside your OG tags. This ensures your preview looks exactly right on every platform.
Debugging Social Share Issues
Social platforms cache link previews aggressively, which means updating your OG tags does not immediately change existing previews. Each major platform provides a debugging tool to force a cache refresh:
- Facebook: Use the Sharing Debugger to scrape your URL again and see the updated preview.
- Twitter: Use the Card Validator to preview and refresh your Twitter Card.
- LinkedIn: Use the Post Inspector to refresh your LinkedIn preview.
Common issues include relative image URLs (must be absolute), images that are too small (minimum 200 x 200 pixels, recommended 1200 x 630), server-side rendering problems where the crawler cannot see your meta tags, and robots.txt rules that block social platform crawlers. The preview tool above simulates what these crawlers see, helping you catch problems before you share.
Frequently Asked Questions
- What are Open Graph meta tags?
- Open Graph (OG) meta tags are snippets of HTML code placed in the <head> section of a web page that control how the page appears when shared on social media platforms. They were originally developed by Facebook in 2010 and have since become the standard used by LinkedIn, Twitter (as a fallback), Pinterest, and most messaging apps. The four essential OG tags are og:title (the headline), og:description (a summary), og:image (the preview image), and og:url (the canonical URL). Without these tags, social platforms will attempt to guess your content, often producing unattractive or inaccurate previews.
- What is the ideal OG image size?
- The recommended Open Graph image size is 1200 x 630 pixels with a 1.91:1 aspect ratio. This size works well across Facebook, LinkedIn, and Twitter. Keep the file size under 1 MB (ideally under 300 KB) for fast loading. Use JPEG or PNG format - most platforms do not yet support WebP for OG images. Ensure important text and visual elements are centred, as some platforms crop the edges. For Twitter summary cards with large images, the same 1200 x 630 size works perfectly. For smaller Twitter summary cards, use 120 x 120 pixels minimum.
- Why does my link preview look wrong on social media?
- There are several common reasons link previews appear incorrect. First, the page may be missing OG meta tags entirely, causing the platform to guess (often poorly). Second, the OG image URL may be broken, relative instead of absolute, or pointing to a file that is too large or in an unsupported format. Third, social platforms cache previews aggressively - if you recently updated your tags, the old preview may still be cached. Use Facebook's Sharing Debugger, Twitter's Card Validator, or LinkedIn's Post Inspector to force a cache refresh. Fourth, your server may be blocking the platform's crawler via robots.txt or requiring authentication.
- What is the difference between OG tags and Twitter Cards?
- Open Graph tags and Twitter Cards serve the same purpose - controlling link previews on social platforms - but they use different meta tag formats. OG tags use the property attribute (e.g., <meta property="og:title">), while Twitter Cards use the name attribute (e.g., <meta name="twitter:title">). Twitter will fall back to OG tags if Twitter Card tags are not present, so you do not strictly need both. However, Twitter Cards offer unique features like the 'summary_large_image' card type and app download cards. Best practice is to include both: OG tags for Facebook, LinkedIn, and general sharing, plus twitter:card and twitter:image tags for Twitter-specific formatting.
- Do Open Graph tags affect SEO?
- Open Graph tags do not directly affect search engine rankings - Google does not use OG tags as a ranking signal. However, they have a strong indirect impact on SEO. Well-crafted OG tags produce attractive, clickable social previews, which increases social sharing and click-through rates. More clicks and shares generate more traffic and backlinks, both of which are ranking factors. A professional-looking link preview also builds brand credibility and trust, encouraging users to engage with your content. Think of OG tags as part of your overall SEO and content marketing strategy rather than a direct ranking lever.
Optimise Your Entire Web Presence
Social sharing previews are just one aspect of web optimisation. Pair this tool with the image optimiser to ensure your OG images load quickly, and explore my full collection of free engineering tools for everything from system design to career planning.