Open Graph tags are small pieces of code in your website's header that tell WhatsApp, Facebook, LinkedIn, and other platforms exactly what title, description, and image to show when someone shares your link. Without them, a shared link often shows a blank box, the wrong image, or messy text pulled randomly from your page. For a Kenyan business where most customer conversations and referrals happen over WhatsApp, this is often the first impression a potential customer gets of your site, so it's worth getting right.
What Open Graph Tags Do
When you paste a link into WhatsApp or Facebook, the platform briefly visits your page, looks for Open Graph tags in the HTML, and uses them to build a preview card: a title, a short description, and an image. If those tags are missing, the platform guesses using whatever text and images it finds first on the page, which is why previews sometimes look broken or show an unrelated photo.
The Core Tags You Need
- og:title: the headline shown in the preview card.
- og:description: a short summary, usually one or two sentences.
- og:image: the full, direct URL to the image you want shown (ideally at least 1200 by 630 pixels).
- og:url: the canonical URL of the page being shared.
- og:type: usually set to "website" for a homepage or general page.
These tags go inside the <head> section of your page's HTML, for example:
<meta property="og:title" content="Your Business Name">
<meta property="og:description" content="A short line about what you offer.">
<meta property="og:image" content="https://yourdomain.co.ke/images/preview.jpg">
<meta property="og:url" content="https://yourdomain.co.ke/">
<meta property="og:type" content="website">
How to Add Them
If Your Website Runs on WordPress
The easiest route is an SEO plugin such as Yoast SEO or Rank Math, both of which generate Open Graph tags automatically from your page title, excerpt, and featured image. After installing one:
- Open the page or post you want to edit.
- Scroll to the plugin's SEO section and look for a tab labelled Social or Facebook & Open Graph.
- Set a custom title, description, and image for that page if you don't want the plugin's automatic guess.
- Update or publish the page.
If you'd rather not install a plugin, you can add the tags manually by editing your theme's header.php file through the file manager, pasting the tags just before the closing </head> tag. This works the same way whether your hosting account is on cPanel or DirectAdmin, since both give you a File Manager for editing theme files directly.
If Your Website Uses Custom HTML
Open the HTML file for the page in your file manager or a code editor, find the <head> section, and paste the Open Graph meta tags in directly, adjusting the title, description, and image URL for each page. Save the file and re-upload it if you edited it locally.
Use an image URL that's publicly accessible (not one behind a login or password-protected folder) and avoid SVG images, since most platforms can't render them in preview cards.
How to Test Your Open Graph Tags
After adding the tags, check how your link will actually look before sharing it widely:
- Facebook's Sharing Debugger tool lets you enter your URL and see the exact preview, and it also has a Scrape Again button to force a refresh.
- LinkedIn's Post Inspector works the same way for LinkedIn previews.
Platforms cache preview data aggressively. If you change your Open Graph tags and the old preview still shows up on WhatsApp or Facebook, use the relevant debugger tool's refresh option, or wait a day or two for the cache to clear on its own.
If you're also working on structured data for search results, see What Is Schema Markup (Structured Data) and How Do You Add It to Your Website? for a related way to control how your site appears beyond social previews.