Open Graph Tags: How to Control How Your Website Looks When Shared on Social Media
Make every social share look deliberate and professional.
When someone shares a link to your website on Facebook, LinkedIn, or WhatsApp, what does it look like? If you haven't set up Open Graph tags, the platform makes its own decision about which image and text to pull from your page — and the results are often embarrassing: a random image from the page footer, a truncated title, or no image at all. Open Graph tags give you full control over exactly how your content appears when it's shared on social media, ensuring every share looks deliberate and professional.
At Xpose, we add Open Graph tags to every website we build as a standard part of the technical setup. This guide explains what Open Graph tags are, which ones you need, how to add them to your site, and how to test that they're working correctly. The whole process takes less than an hour for most sites, and the improvement in how your content looks across social platforms is immediate.
What Are Open Graph Tags and How Do They Work?
Open Graph (OG) is a protocol originally created by Facebook that defines a set of HTML meta tags in your page's <head> section. When a social platform fetches a URL to generate a preview card — the box that appears when someone shares a link — it reads these tags to determine the title, description, image, and URL to display. Without OG tags, platforms use fallback logic to guess what to show, often with poor results.
The four essential Open Graph tags are: og:title (the title displayed in the share card — can differ from your HTML page title), og:description (a one to two sentence summary — can differ from your meta description), og:image (the URL of the image to display — ideally 1200 × 630 pixels), and og:url (the canonical URL of the page). Additional useful tags include og:type (usually "website" or "article"), og:site_name (your business name), and for articles, og:published_time and og:author. Each tag is a simple meta element: <meta property="og:title" content="Your Title Here">.
Creating Effective OG Images and Descriptions
The OG image is the most visible element of a social share card and has the biggest impact on whether people click through. Use an image of 1200 × 630 pixels — this is the recommended size that displays correctly across Facebook, LinkedIn, and most other platforms. The image should be relevant to the page content, high quality, and ideally include your logo or brand colours so that shares are visually consistent across all content.
For blog posts and guides, creating a custom OG image with the article title overlaid on a branded background is worth the time — it makes your shares look like a distinct content card rather than a generic website screenshot. Free tools like Canva make this straightforward. For service and homepage URLs, a professional photo of your work, your team, or your product in context works well. Avoid images with large amounts of fine text, as these become unreadable at small sizes.
Implementation, Testing, and Common Mistakes
If your site uses WordPress with an SEO plugin like Yoast or Rank Math, Open Graph tags are added automatically when you fill in the plugin's social preview fields for each page. For sites without a CMS or plugin, add the tags manually to the <head> section of each page's HTML. For sites that generate pages dynamically, ensure your templating system inserts the correct OG tags for each page rather than the same static tags across all pages.
Once added, test your tags using the Facebook Sharing Debugger (developers.facebook.com/tools/debug) and the LinkedIn Post Inspector. Both tools show exactly what the share card will look like and flag any missing or incorrectly formatted tags. Social platforms cache OG data, so if you update your tags, use the debugger's "Scrape Again" function to force a refresh. Common mistakes include: using the same OG image for every page (missing an opportunity to make each share distinctive), OG images that don't meet the minimum size requirements (720 × 375 pixels absolute minimum, 1200 × 630 ideal), and OG descriptions that are identical to the meta description — the OG description can be written specifically for social sharing context, which is a slightly different register than search result copy.
Common questions.
Do Open Graph tags help with SEO?
Which platforms use Open Graph tags?
Do I need different images for different social platforms?
More on web design & ux.
Want a hand putting this into practice?
Book a free, no-obligation consultation with a Norwich-based specialist.
Let's put your business in a better light.
Book a free, no-pressure consultation. We'll talk through your goals and tell you honestly what we'd do — whether you work with us or not.