Open Graph Tags
Open Graph tags control how your website looks when shared on social media. They set the title, description, and image in link previews.
Open Graph tags are bits of code in your page's HTML that control what people see when your website gets shared on social media. When someone pastes your URL into Facebook, LinkedIn, or Twitter, the platform pulls the title, description, and image from your Open Graph tags. Without them, the platform guesses, and it usually guesses poorly.
Facebook originally created the Open Graph protocol in 2010. Since then, nearly every social platform has adopted it. Twitter has its own version called Twitter Cards, but most platforms fall back to Open Graph tags when Twitter-specific tags aren't present.
Why It Matters for Your Business
First impressions matter. When a customer shares your site or you post a link on social media, the preview card is the first thing people see. A missing image, a truncated title, or a description pulled from random page text looks unprofessional. It also gets fewer clicks.
Posts with images get 2.3x more engagement on Facebook than posts without. Open Graph tags let you control exactly which image appears, so you can make sure it's your logo, a product photo, or something eye-catching instead of a random footer icon.
The Basics
Four essential tags. At minimum, every page should have og:title (the headline), og:description (a short summary), og:image (the preview image), and og:url (the page's canonical URL).
Image size matters. Facebook recommends 1200x630 pixels for the preview image. LinkedIn and Twitter use similar dimensions. If your image is too small, it might show as a tiny thumbnail instead of a large card.
Each page can have its own tags. Your homepage might show your logo and tagline. Your blog post should show the article's featured image and headline. Don't use the same Open Graph tags on every page.
Test before you share. Facebook's Sharing Debugger (developers.facebook.com/tools/debug) shows you exactly what your link will look like when shared. It also lets you clear Facebook's cache if you've updated your tags and the old preview is still showing.
Twitter Cards. Twitter looks for its own twitter:card, twitter:title, and twitter:image tags first. If they're missing, it falls back to your Open Graph tags. Adding twitter:card with a value of summary_large_image ensures your links show a big image preview on Twitter.
FAQ
Why does my link look wrong when I share it on Facebook?
Facebook caches your page's Open Graph data the first time someone shares it. If you've added or changed your tags since then, the old version might still show. Use Facebook's Sharing Debugger to clear the cache and pull fresh data. Also check that your og:image URL is an absolute path (starting with https://), not a relative one.
Do Open Graph tags help with SEO?
Not directly. Google doesn't use Open Graph tags as a ranking factor. But they help indirectly. A well-crafted social preview gets more clicks and shares, which drives more traffic to your site. More traffic and engagement can lead to more backlinks, which do help SEO.
What if I don't add Open Graph tags?
Social platforms will try to pull a title and image from your page automatically. The results are unpredictable. You might get your navigation menu as the title, a tiny icon as the image, or a description pulled from your footer. It's worth the 5 minutes to set them properly.