With some simple coding, we can generate Open Graph tags automatically, so you can set it and forget it!

What are Opengraph tags?

Open Graph is a protocol that interacts with Facebook and allows us to control what content appears when someone shares our page on Facebook.

By controlling how our content gets shared on Facebook,  we can influence how well our content performs when shared via social media.

How to Add Dynamic Open Graph tags in Concrete5

The following code will add Open Graph tags for new pages of the "Article" pagetype and dynamically grab all the details such as article name, url, image url and image information such as width and height.

It uses the article title for the alt attribute, but you could change that if you have set your images alt attributes.

Note, this was developed for Concrete5 v5.6, it may need some tweaks for 5.7/8:

        // Open Graph for articles
        $pageType = $c->getCollectionTypeHandle();
        if($pageType === "article") {
            $url = 'https://' . $_SERVER['HTTP_HOST'] . $c->getCollectionPath();
            $title = $c->getCollectionName();
            $desc = $c->getCollectionDescription();
            $ih = Loader::helper('image');
            $thumbnail = $c->getAttribute('featured');
            if($thumbnail) {
                $imageUrl = 'https://' . $_SERVER['HTTP_HOST'] . $ih->getThumbnail($c->getAttribute('featured'), 1200, 600)->src;
            else {
                $imageUrl = "";
        <meta property="og:type" content="article" /> 
        <meta property="og:url" content="<?php echo $url ?>" /> 
        <meta property="og:title" content="<?php echo $title ?>" /> 
        <meta property="og:description" content="<?php echo $desc ?>" /> 
        <meta property="og:image" content="<?php echo $imageUrl ?>" /> 
        <meta property="og:image:type" content="image/<?php echo strtolower($thumbnail->getType()) ?>" />
        <meta property="og:image:width" content="<?php echo $thumbnail->getAttribute('width') ?>" /> 
        <meta property="og:image:height" content="<?php echo $thumbnail->getAttribute('height') ?>" /> 
        <meta property="og:image:alt" content="<?php echo $title ?>" />
        <?php } ?>

Who are we?

We are a digital agency specialising in Web Design, Development, Concrete5 and digital marketing, based in London & West Sussex.

We make digital simple. Our purpose is to simplify your frustrations in digital and solve the challenges you face to help make you more money and progressively grow your business or organisation.

Tell me more

Keep up to date

Call us