Open Graph (OG) tags are small snippets of HTML code that control how your website content appears when shared on social media platforms like Facebook, LinkedIn, WhatsApp, Twitter/X, and others. Without them, these platforms will try to guess what image, title, and description to show — and they usually get it wrong.
You have probably seen this yourself: you share a link on WhatsApp or Facebook and it either shows no image, the wrong image, or a generic description that makes no sense. OG tags fix that by telling these platforms exactly what to display.
OG tags are placed inside the <head> section of your HTML page. When someone shares your URL on a social platform, that platform sends a request to your page (called "scraping" or "crawling") and reads the OG tags to determine what to display in the link preview.
Here is a visual breakdown of what happens:
<meta> tags in the <head>There are four OG tags that every page should have at minimum:
The title of your page as you want it to appear in the share preview. This does not have to match your page <title> tag — you can make it more engaging for social media.
<meta property="og:title" content="Your Page Title Here" />Tips: Keep it under 60 characters. Make it compelling — this is your headline on social media.
A brief summary of the page content. This appears below the title in the link preview.
<meta property="og:description" content="A short, engaging description of what this page is about." />Tips: Keep it between 50-160 characters. Think of it as your elevator pitch for the page.
The image that appears in the link preview. This is the single most important OG tag — a good image dramatically increases engagement.
<meta property="og:image" content="https://www.yoursite.com/images/og-image.jpg" />Tips:
https://)The canonical URL of the page. This tells platforms which URL to associate with the content.
<meta property="og:url" content="https://www.yoursite.com/page" />Beyond the four essentials, these tags give you more control:
Tells platforms what type of content this is. Most pages should use website. Blog posts can use article.
<meta property="og:type" content="website" />The name of your overall website (not the page title).
<meta property="og:site_name" content="Your Company Name" />The language and region of your content.
<meta property="og:locale" content="en_ZA" />Specifying the image dimensions helps platforms render the preview faster without having to download the full image first.
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />Here is a complete, copy-paste example of OG tags for a typical business page. Place these inside the <head> section of your HTML, before the closing </head> tag:
<!-- Open Graph Tags -->
<meta property="og:title" content="Professional Web Hosting in South Africa" />
<meta property="og:description" content="Fast, reliable hosting with local support. Get your website online in minutes." />
<meta property="og:image" content="https://www.example.co.za/images/og-share.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:url" content="https://www.example.co.za/" />
<meta property="og:type" content="website" />
<meta property="og:site_name" content="Example Hosting" />
<meta property="og:locale" content="en_ZA" />
<!-- Twitter/X Card Tags (recommended alongside OG tags) -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Professional Web Hosting in South Africa" />
<meta name="twitter:description" content="Fast, reliable hosting with local support." />
<meta name="twitter:image" content="https://www.example.co.za/images/og-share.jpg" />twitter:card, twitter:title, etc.), but will fall back to OG tags if the Twitter-specific ones are not present. Including both ensures your content looks great everywhere.
If your website runs on WordPress, you do not need to edit HTML manually. Use one of these plugins:
For static HTML websites, manually add the OG meta tags to the <head> section of each page:
<head> section (near the top of the file)</head> tagEach page should have its own unique OG tags — do not use the same title, description, and image for every page.
After adding your OG tags, test them to make sure they work correctly:
https://. Relative paths like /images/photo.jpg will not work.| Tag | Required? | Best Practice |
|---|---|---|
og:title | Yes | Under 60 characters, compelling |
og:description | Yes | 50-160 characters |
og:image | Yes | 1200x630px, absolute HTTPS URL, under 1MB |
og:url | Yes | Canonical URL of the page |
og:type | Recommended | "website" or "article" |
og:site_name | Recommended | Your brand/company name |
og:image:width | Optional | Speeds up preview rendering |
og:image:height | Optional | Speeds up preview rendering |
twitter:card | Recommended | "summary_large_image" for best results |
If you are struggling to get your OG tags working or are not sure how to implement them on your specific website setup, open a support ticket and our team will be happy to assist you.