Joomla Open Graph Tags: Complete Social Sharing Guide

⚡ Quick Answer

Joomla's core does not generate Open Graph tags on its own, so you need either a free plugin or a short custom code snippet. The fastest reliable option for most sites is installing a free extension such as Phoca Open Graph, which fills in og:title, og:description, and og:image automatically in under five minutes. If you'd rather avoid a dependency, you can add the tags yourself with a small system plugin that hooks into Joomla's onBeforeCompileHead event.

What you'll need	Details
Joomla version	5.4 LTS or 6.x (steps also work on 5.0–5.3; admin screens may look slightly different)
Access level	Super User / Administrator
For the manual method	FTP or File Manager access, basic comfort editing PHP
An Open Graph image	At least 1200×630px, ideally under 1MB
Time required	5–15 minutes

This guide covers two ways to add Open Graph tags to a Joomla site: a plugin-based method that needs no code, and a manual method using a short custom system plugin. Both approaches work on Joomla 5.4 LTS and Joomla 6.x running PHP 8.1 or newer, and both produce the same result — correct og:title, og:description, og:image, og:url, and og:type meta tags in your page's <head>.

🖼️ [SCREENSHOT NEEDED] Hero image: a Facebook or LinkedIn share preview card showing a Joomla article title, description, and image pulled in correctly via Open Graph tags.

Suggested alt text: "Facebook link preview showing Open Graph title, description, and image for a Joomla article"

What Are Open Graph Tags, and Why Doesn't Joomla Add Them by Default?

Open Graph tags are a small set of <meta> tags — originally created by Facebook, now read by LinkedIn, X, Pinterest, WhatsApp, Slack, and most chat apps — that tell a platform exactly what title, description, and image to show when someone shares your page's link. Without them, the platform has to guess, and it usually guesses badly: a random image from the page, a truncated menu label as the title, or no preview at all.

Joomla's core content and template engine builds a page's <title> and meta description, but it does not generate og:* properties on its own. That part has always been left to templates, plugins, or manual code — it's a known gap, not a bug, and it's the reason this guide exists.

Method 1: Add Open Graph Tags with a Free Plugin (No Code)

This is the right choice for most sites, especially if you're not comfortable editing PHP. We're using Phoca Open Graph as the example because it's free, actively maintained, and — unlike plugins that only cover articles — ships as two plugins that together cover both article pages and every other page type on the site.

Step 1: Install Phoca Open Graph

Download the extension package from the Phoca website or the Joomla Extensions Directory. In your Joomla administrator, go to System → Install → Extensions, upload the ZIP file, and let Joomla install it.

🖼️ [SCREENSHOT NEEDED] Joomla admin, System → Install → Extensions, mid-upload of the Phoca Open Graph ZIP file, with the "Upload & Install" tab visible.

Suggested alt text: "Joomla Extensions install screen uploading the Phoca Open Graph plugin ZIP file"

Step 2: Enable both plugins

Go to System → Manage → Plugins and search for "Phoca Open Graph." You'll see two entries — a Content plugin and a System plugin. Enable both. This is the step people skip most often, and skipping it is the single biggest cause of "it's not working."

⚠️ Easy to miss

The Content plugin only adds tags to article pages generated by com_content. The System plugin covers everything else — your homepage, category pages, and other components. If you only enable one, half your site will still have no Open Graph tags.

🖼️ [SCREENSHOT NEEDED] Joomla Plugin Manager filtered by search term "Phoca Open Graph," showing both the Content and System plugins with their status toggled to enabled (green checkmark).

Suggested alt text: "Joomla Plugin Manager showing Phoca Open Graph Content and System plugins both enabled"

Step 3: Set a global default image and description

Open the System plugin's options and set a default og:image (used on pages that don't have their own image, like your homepage) and a fallback description. This guarantees every page has usable Open Graph data, even ones you haven't customized yet.

🖼️ [SCREENSHOT NEEDED] Phoca Open Graph System plugin parameters panel, with the "Default Image" media field and "Default Description" text field both filled in and highlighted with a red box.

Suggested alt text: "Phoca Open Graph plugin settings panel with default Open Graph image and description fields"

Step 4: Override tags per article (optional)

For any article where you want a custom social preview — a different image than the article's intro image, or a punchier description — open the article, go to the Images and Links (or dedicated Open Graph) tab depending on your plugin version, and fill in the override fields. Leave them blank to fall back to the article's own title, intro text, and image.

Step 5: Verify the tags are live

Visit any page on your site, right-click, choose "View Page Source," and search for og:. You should see og:title, og:description, og:image, og:url, and og:type populated with real values, not empty strings.

Method 2: Add Open Graph Tags Manually with a Custom System Plugin

Choose this method if you want zero third-party dependencies, need full control over exactly what's output, or you're already running a custom system plugin and want to add this logic to it. It takes a bit longer but gives you a single, auditable code path.

Step 1: Create the plugin folder structure

Using FTP or your host's File Manager, create this folder inside your Joomla installation:

plugins/system/customog/

Inside it, create a single file named customog.xml — this is the manifest Joomla reads to install the plugin.

🖼️ [SCREENSHOT NEEDED] File Manager (cPanel or FTP client) showing the newly created plugins/system/customog/ folder path in the breadcrumb, with customog.xml and customog.php files inside it.

Suggested alt text: "File manager view of the plugins/system/customog folder containing the plugin manifest and PHP file"

Step 2: Write the plugin manifest

Paste this into customog.xml:

<?xml version="1.0" encoding="utf-8"?>
<extension type="plugin" group="system" method="upgrade">
    <name>plg_system_customog</name>
    <author>Your Name</author>
    <creationDate>2026</creationDate>
    <version>1.0.0</version>
    <description>Adds custom Open Graph meta tags to every page.</description>
    <files>
        <filename plugin="customog">customog.php</filename>
    </files>
</extension>

Step 3: Write the plugin logic

Create customog.php in the same folder with this code. It hooks into onBeforeCompileHead — an event Joomla fires just before the page's <head> is finalized — and pulls the page title and meta description Joomla already generated, so you're not duplicating data entry:

<?php
defined('_JEXEC') or die;

use Joomla\CMS\Plugin\CMSPlugin;
use Joomla\CMS\Factory;
use Joomla\CMS\Uri\Uri;

class PlgSystemCustomog extends CMSPlugin
{
    public function onBeforeCompileHead()
    {
        $app = Factory::getApplication();

        if ($app->isClient('administrator')) {
            return;
        }

        $doc  = $app->getDocument();
        $uri  = Uri::getInstance();

        $title       = $doc->getTitle();
        $description = $doc->getDescription();

        if (empty($description)) {
            $description = 'Default fallback description for your site.';
        }

        // Absolute URL required -- relative paths are ignored by most platforms
        $defaultImage = $uri->root() . 'images/og-default.jpg';

        $doc->setMetaData('og:title', $title, 'property');
        $doc->setMetaData('og:type', 'website', 'property');
        $doc->setMetaData('og:url', (string) $uri, 'property');
        $doc->setMetaData('og:description', $description, 'property');
        $doc->setMetaData('og:image', $defaultImage, 'property');
        $doc->setMetaData('twitter:card', 'summary_large_image', 'name');
    }
}

💬 Note on plugin style

This example uses Joomla's legacy CMSPlugin class style, which Joomla continues to support for third-party and custom plugins and is the simplest way to hook a single event like this. Joomla's own core-distributed plugins increasingly use a newer services/provider.php pattern, which is worth adopting if you plan to publish this plugin publicly or extend it with multiple events.

Step 4: Install and enable the plugin

In the Joomla administrator, go to System → Manage → Plugins, click New, and choose Discover if your Joomla version supports discovering plugins already on the filesystem — or zip the customog folder and install it through System → Install → Extensions like any other extension. Then find "System - Customog" in the plugin list and enable it.

Step 5: Verify and adjust the fallback values

View any page's source and confirm the og:* tags appear with correct, absolute URLs. Update the default image path in Step 3 to match a real file on your server before going live — a broken default image is the most common issue with this method on first deploy.

🖼️ [SCREENSHOT NEEDED] Browser "View Page Source" tab with the og:title, og:description, og:image, og:url, and og:type meta tags visible in the , highlighted or boxed in red.

Suggested alt text: "Browser view-source panel showing Open Graph meta tags in the Joomla page head"

🧯 Common Mistakes to Avoid

Running two Open Graph plugins at once

Two plugins writing the same og:* properties creates duplicate tags. Most platforms pick whichever tag appears first in the source, which is rarely the one you meant. Pick one method and disable the other.

Using an image smaller than 200×200px

Facebook and LinkedIn silently reject undersized images and either show no image or fall back to something else on the page. Aim for 1200×630px.

Enabling only the Content plugin, not the System plugin

Your homepage, category pages, and non-article components will have no Open Graph tags at all if you skip the System half of a two-plugin extension.

Testing only in your own browser tab

Facebook, LinkedIn, and X cache old previews aggressively. A page that looks right when you view-source it can still show a stale card to real users — always re-scrape with the platform's own debugging tool before trusting what you see.

Using a relative path for og:image

Something like /images/og.jpg instead of https://yoursite.com/images/og.jpg is invalid per the Open Graph spec and gets ignored by most platforms. Always use the full, absolute URL.

❓ Frequently Asked Questions

Does Joomla have built-in Open Graph support?

No. Joomla's core generates the page title and meta description, but not og:* properties. You need a free plugin (like Phoca Open Graph) or a short custom code snippet to add them.

Which is better: a plugin or a manual code snippet?

A plugin is faster to set up and gives editors per-article control from the article edit screen. A manual snippet has zero dependencies and full control, but needs a developer to maintain it as your site grows.

Why isn't my Facebook preview updating after I fixed the tags?

Facebook caches link previews. Fixing the tags on your site doesn't clear that cache — you need to re-scrape the URL using Facebook's Sharing Debugger tool to force it to pull the new data.

What size should my og:image be?

Aim for 1200×630px (roughly a 1.91:1 ratio) and keep the file under 1MB. The minimum most platforms will accept is 200×200px, but images that small often render poorly.

Do I also need separate Twitter/X Card tags?

X reads Open Graph tags as a fallback, but adding twitter:card (e.g., summary_large_image) is recommended for a guaranteed large-image preview on X specifically, since fallback rendering isn't always consistent.

Will adding Open Graph tags improve my Google ranking?

No — Open Graph tags aren't a Google ranking factor. Their value is a better-looking, higher-click-through social share preview, plus cleaner structured page data that AI answer engines can also read when summarizing your content.

⚖️ Final Notes

For most Joomla sites, installing Phoca Open Graph and enabling both of its plugins is the fastest path to correct, working Open Graph tags with no code. Reach for the manual system plugin method only if you specifically want to avoid a third-party extension or need logic a plugin's settings screen can't express.

✅ Last verified on Joomla 6.1.2 / Joomla 5.4.7 (LTS) — July 2026

How to Add Open Graph Tags in Joomla (Joomla 5 & 6 Guide, 2026)