When sharing a link on social media platforms like Facebook or LinkedIn, we expect a preview to appear: a title, a description, and most importantly, an image. If the preview image doesn’t load, it’s often due to missing or incorrectly set Open Graph meta tags. This article explains the most common causes and offers a step-by-step solution—especially for Joomla-based websites.
What Are Open Graph Meta Tags?
Open Graph (OG) tags are special HTML meta tags in the <head> section of a webpage that define how the content should appear when shared on social platforms. Key tags include:
<meta property="og:title" content="Page Title">
<meta property="og:description" content="Short page description">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:url" content="https://example.com/current-page">
Common Reasons Why the Image Doesn’t Show Up
-
Missing
og:imagetag – the image is not defined in the page’s metadata. -
Incorrect image path – relative URLs, missing files, or restricted access.
-
Image doesn't meet technical requirements – Facebook recommends minimum size of 1200×630 px and a 1.91:1 aspect ratio.
-
Facebook cached an outdated version – old data is stored and needs to be refreshed.
How to Fix the Issue in Joomla
Since Joomla doesn't support Open Graph tags by default, you can add them in three main ways:
1. Use an Extension (Recommended for Most Users)
Popular plugins:
-
EFSEO (Easy Frontend SEO)
-
sh404SEF
-
OSMeta
-
SEO & Metatags by Tassos.gr
These extensions let you manage Open Graph tags like og:image, og:title, and more—either globally or per article/page.
2. Add OG Tags Manually to Your Template
Open your active template's index.php file, typically found at /templates/your_template_name/index.php.
Insert the following code in the <head> section:
<?php
$doc = JFactory::getDocument();
$img = 'https://yourwebsite.com/images/og-image.jpg'; // Replace with your actual image URL
$doc->addCustomTag('<meta property="og:image" content="'.$img.'" />');
$doc->addCustomTag('<meta property="og:title" content="'.$this->title.'" />');
$doc->addCustomTag('<meta property="og:description" content="Your custom page description." />');
$doc->addCustomTag('<meta property="og:type" content="website" />');
$doc->addCustomTag('<meta property="og:url" content="'.JURI::current().'" />');
?>
3. Verify with Facebook Sharing Debugger
After updating your site, visit the Facebook Sharing Debugger, paste your URL, and click Scrape Again. This forces Facebook to fetch the most recent version of your page and update its preview.
Best Practices for og:image
-
Minimum resolution: 1200 × 630 px
-
Format: JPG or PNG
-
Hosting: Image should be publicly accessible (avoid admin folders or restricted directories)
-
Use absolute URLs only (starting with
https://)
If you want your site to look professional and inviting when shared on social media, properly setting Open Graph tags—especially og:image—is essential. Joomla users can choose between extensions or direct template edits to implement this. Don’t forget to test your changes using the Facebook Debugger and choose a high-quality, well-sized image. Doing so improves both your visual presence and your click-through rate.
