Open Graph (OG) is a protocol originally introduced by Facebook that uses <meta property="og:..."> tags in the page <head> to describe how a URL should appear when shared on social platforms such as Facebook, LinkedIn, Slack, Discord, and iMessage. Twitter/X uses its own twitter:card meta tags, which fall back to OG values when the Twitter-specific ones are missing.
Why it matters
Without Open Graph tags, social platforms guess the title, description, and image for a link preview — usually picking the first headline they find and a small, awkward image from the page. The result looks unprofessional and earns fewer clicks. A deliberate preview, with a custom 1200×630 image and a short headline, can significantly improve click-through and share rates from social channels. OG also affects how your links render inside chat apps, which is now a major referral source for many sites.
How to set it up
- At minimum, set
og:title,og:description,og:image,og:url, andog:typeon every public page. - Use images at least 1200×630 pixels (under 5 MB) for crisp Facebook and LinkedIn previews.
- Set
og:urlto the same URL as your canonical-tag so shares consolidate signals correctly. - Keep
og:titleandog:descriptionaligned with your meta-description but tuned for social tone. - Add Twitter Card tags (
twitter:card,twitter:image) for control on X. - Validate after deployment with Facebook's Sharing Debugger and LinkedIn's Post Inspector — both tools also force-refresh their cache.
- Pair OG with structured-data for rich Google results.