Add Open Graph and Twitter Card Tags to Joomla

Share a Joomla article on Facebook, LinkedIn, WhatsApp or X, and the preview card comes up with no image, a generic title, or nothing at all. Those networks build the card from Open Graph meta tags in the page's head, and Joomla doesn't write any. You can add them with one snippet in Code Snippets, as a few lines of HTML or as a PHP snippet that handles more cases.

Using an HTML snippet

This is the basic version: seven meta tags, filled in by smart tags when the page renders. It covers single article pages and needs a condition to stay off the other pages.

1. Install Code Snippets if it isn't installed already.
2. Log into your Joomla backend.
3. Go to Components → Tassos Code Snippets.
4. Click New.
5. Enter a title, for example Open Graph tags.
6. Set Code Type to HTML.
7. Set Insertion Method to Auto-Insert Locations.
8. Set Location to Site Header.

9. Paste this code into the editor:

   <meta property="og:type" content="article">
   <meta property="og:title" content="{tcs article.title --htmlSpecialChars=true}">
   <meta property="og:description" content="{tcs page.desc --htmlSpecialChars=true}">
   <meta property="og:url" content="{tcs url --htmlSpecialChars=true}">
   <meta property="og:site_name" content="{tcs site.name --htmlSpecialChars=true}">
   <meta property="og:image" content="{tcs site.url}{tcs article.images.image_fulltext --filter=re:#.*}">
   <meta name="twitter:card" content="summary_large_image">

10. Open the Conditional Logic tab:

    • Set Display on to Selected Pages.
    • Click New Condition Set.
    • Click Select Condition and choose Content View.
    • Select Single Article.
11. Click Save & Close.

Each {tcs ...} smart tag is replaced with the article's title, the page's meta description, the page address, the site name and the article's Full Article Image. The --htmlSpecialChars option turns characters like & into their HTML form so they can't break the tag, and the --filter option drops the size hints Joomla keeps after the # in image paths.

The condition matters. Outside a single article page the article smart tags print nothing, and a card with an empty title is worse than no card. The Content View condition is part of Code Snippets Pro. With the free version, use the PHP snippet below, which needs no condition.

Being the basic version, it has two limits. The description comes from the article's Meta Description, or the page's one when the article has none, so an article without either gets an empty description. And an article with no Full Article Image gets an image tag that points at your homepage, so set a full image on each article you plan to share.

Using a PHP snippet

Use this method if you want more flexibility. It works on every page of the site, not just articles, picks the Intro Image when an article has no full image, writes a description from the article text when the Meta Description field is empty, and needs no condition. On every page it adds the tags the networks read: the type, title, address and site name, an image, and the card format for X. On a single article page the title is the article's title, the image is the article's Full Article Image, or its Intro Image when there's no full one, and the description is the article's Meta Description. When that field is empty, the first 200 characters of the article text are used, cut at a whole word. Every other page gets its page title, its own meta description if one is set, and the default image.

use Joomla\CMS\Document\HtmlDocument;
use Joomla\CMS\Factory;
use Joomla\CMS\HTML\HTMLHelper;
use Joomla\CMS\Uri\Uri;
use Joomla\Database\DatabaseInterface;
use Joomla\Database\ParameterType;

// The image for pages that have no image of their own, like the homepage.
// A path inside your site or a full URL. 1200 x 630 pixels works best.
$defaultImage = 'images/social-share.jpg';

// Your site's handle on X (Twitter), with the @. Leave empty to skip it.
$twitterHandle = '';

// Do not edit below.

$app = Factory::getApplication();

$app->registerEvent('onBeforeCompileHead', function () use (
    $app, $defaultImage, $twitterHandle
) {
    $doc = $app->getDocument();

    if (!($doc instanceof HtmlDocument))
    {
        return;
    }

    // Another extension already added Open Graph tags. Leave them alone.
    if ($doc->getMetaData('og:title', 'property'))
    {
        return;
    }

    $input       = $app->getInput();
    $title       = $doc->getTitle();
    $description = $doc->getDescription();
    $image       = $defaultImage;
    $type        = 'website';

    $isArticle = $input->getCmd('option') === 'com_content'
        && $input->getCmd('view') === 'article';

    if ($isArticle)
    {
        $id    = $input->getInt('id');
        $db    = Factory::getContainer()->get(DatabaseInterface::class);
        $query = $db->createQuery()
            ->select($db->quoteName(['title', 'introtext', 'metadesc', 'images']))
            ->from($db->quoteName('#__content'))
            ->where($db->quoteName('id') . ' = :id')
            ->bind(':id', $id, ParameterType::INTEGER);
        $article = $db->setQuery($query)->loadObject();

        if ($article)
        {
            $images = json_decode($article->images, true) ?: [];
            $own    = $images['image_fulltext'] ?? '';
            $own    = $own !== '' ? $own : ($images['image_intro'] ?? '');
            $title  = $article->title;
            $type   = 'article';

            if ($own !== '')
            {
                // Joomla stores the editor's size hints after a #. Drop them.
                $image = HTMLHelper::cleanImageURL($own)->url;
            }

            if ($article->metadesc !== '')
            {
                $description = $article->metadesc;
            }
            else
            {
                // No meta description: use the first words of the article.
                $text = preg_replace('/\{[^}]*\}/', '', $article->introtext);
                $text = preg_replace('/<[^>]+>/', ' ', $text);
                $text = html_entity_decode($text, ENT_QUOTES, 'UTF-8');
                $text = trim(preg_replace('/\s+/', ' ', $text));

                if (mb_strlen($text) > 200)
                {
                    $text = mb_substr($text, 0, 200);
                    $text = mb_substr($text, 0, mb_strrpos($text, ' ')) . '...';
                }

                $description = $text;
            }
        }
    }

    // Social networks only accept full image URLs.
    if ($image !== '' && !preg_match('#^https?://#i', $image))
    {
        $image = Uri::root() . ltrim($image, '/');
    }

    $doc->setMetaData('og:type', $type, 'property');
    $doc->setMetaData('og:title', $title, 'property');
    $doc->setMetaData('og:url', Uri::getInstance()->toString(), 'property');
    $doc->setMetaData('og:site_name', $app->get('sitename'), 'property');
    $card = $image !== '' ? 'summary_large_image' : 'summary';
    $doc->setMetaData('twitter:card', $card);

    if ($description !== '')
    {
        $doc->setMetaData('og:description', $description, 'property');
    }

    if ($image !== '')
    {
        $doc->setMetaData('og:image', $image, 'property');
    }

    if ($twitterHandle !== '')
    {
        $doc->setMetaData('twitter:site', $twitterHandle);
    }
});

To change the default image, upload one to the Media manager and put its path in $defaultImage. An image of 1200 by 630 pixels fills the card on every network. To add your site's X handle to the tags, put it in $twitterHandle.

The snippet does nothing on a page where another extension has already added an og:title tag, so it won't fight with an SEO extension that writes its own.

1. Install Code Snippets if it isn't installed already.
2. Log into your Joomla backend.
3. Go to Components → Tassos Code Snippets.
4. Click New.
5. Enter a title, for example Open Graph tags.
6. Set Code Type to PHP.
7. Set Insertion Method to Auto-Insert Locations.
8. Set Location to On Page Load.
9. Paste the code above into the editor.
10. Click Save & Close.

Use one snippet or the other, never both. Two sets of tags on one page leave the networks to guess which to read.

Check that it works

1. Open an article that has a Full Article Image.
2. View the page source and search for og:.

The head holds six og: tags and one twitter:card tag. The title is the article's title, the description is its meta description, and the image is the full address of its image, like https://example.com/images/beaches.jpg. With the PHP snippet, the homepage shows the default image. To see the finished card, paste the page's address into Facebook's Sharing Debugger or LinkedIn's Post Inspector. Both need a site they can reach, so a local site won't do.

The card's description is only as good as the article's meta description. To fill that field on every article automatically, see Auto-Generate Meta Descriptions from Article Text in Joomla. To learn more about the two snippet types, read the HTML snippet docs and the PHP snippet docs.