Open Graph Tags — Make Your Content Look Great on Social Media

What Open Graph Tags Do

When you share a link on Facebook, Twitter, LinkedIn, or any other social platform, the platform fetches metadata from the shared URL to create a preview card. Open Graph tags are HTML meta tags in your page head section that control exactly what appears in these preview cards — the title, description, image, and other details. Without Open Graph tags, platforms guess which content to display, often picking the wrong image or truncating text awkwardly.

Facebook created the Open Graph protocol in 2010, and it has become the standard adopted by virtually every platform that displays link previews. Twitter has its own Twitter Card tags that work similarly but fall back to Open Graph tags when Twitter-specific tags are not present. LinkedIn, Pinterest, WhatsApp, Slack, Discord, and Telegram all read Open Graph tags when rendering link previews.

Essential Open Graph Tags Every Page Needs

Four tags form the minimum set for good social media previews. The og:title tag defines the title shown in the preview card — keep it under 60 characters to avoid truncation. The og:description tag provides the description text — aim for 155 characters or less. The og:image tag specifies the preview image URL — this single tag has the biggest impact on click-through rates. The og:url tag declares the canonical URL for the page.

The og:image tag deserves special attention. Facebook recommends images at least 1200 x 630 pixels for optimal display across devices. Images smaller than 600 x 315 pixels display as small thumbnails instead of large previews — a dramatic difference in visual impact and engagement. Use high-quality, relevant images that give context about the content. Faces, text overlays, and bright colors tend to get more clicks than generic stock photos.

Advanced Open Graph Tags

Beyond the basics, og:type specifies the content type (article, website, product, video, etc.). For articles, you can add article:published_time, article:author, and article:section for more structured metadata. The og:locale tag specifies the language and territory, which helps platforms display content correctly for different audiences.

For ecommerce, product-specific tags enable rich product previews. Video content benefits from og:video tags that can trigger inline video playback on some platforms. Music sites can use music-related tags for audio content.

Twitter Card Tags

Twitter uses its own set of meta tags — twitter:card, twitter:title, twitter:description, and twitter:image. The twitter:card tag is the most important, determining the card layout: summary for a small card with a thumbnail, summary_large_image for a large image card, player for embedded video or audio, and app for mobile application deep links.

If you already have Open Graph tags, you technically only need the twitter:card tag since Twitter falls back to OG tags for everything else. However, specifying both gives you the most control — you might want a different title length or image crop for Twitter versus Facebook.

Common Mistakes and How to Fix Them

The most common mistake is not including an og:image tag at all. Links shared without a preview image get dramatically fewer clicks — some studies show 2 to 3 times fewer clicks compared to links with images. The second most common mistake is using images that are too small or in the wrong aspect ratio, resulting in ugly cropping or tiny thumbnails.

Another frequent issue is caching. Facebook, Twitter, and other platforms cache Open Graph data aggressively. If you update your OG tags, the old preview might persist for days or weeks. Use platform-specific debugging tools to clear the cache for a specific URL. Use our Open Graph Checker at safewebtools.com to verify all your tags are present and correctly formatted before sharing important content.

Implementing Open Graph Tags

In WordPress, plugins like Yoast SEO and Rank Math automatically generate Open Graph tags based on your content. They let you customize the title, description, and image for each page. For custom-built sites, add the meta tags directly in your HTML head section. For single-page applications, server-side rendering or a prerender service is necessary because social media crawlers do not execute JavaScript.

Test every important page before sharing. A few minutes spent checking your Open Graph tags with debugging tools can mean the difference between a viral share with a compelling preview and a plain text link that nobody clicks. Our Open Graph Checker tool provides a complete analysis of all social media tags on any URL, highlighting missing or problematic tags that could hurt your content social media performance.