Top Lines

Add Open Graph tags to your Concrete5 site for Social Media

Dave Reeder

by Dave Reeder , 29 June 2018

Add Open Graph tags to your Concrete5 site for Social Media
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 } ?>

Join the Discussion...

Back to Blog

Get Essential News & Offers

Enter your email to receive monthly news and special offers from Made Simple Media:

You can unsubscribe at any time, please read our privacy policy for more information.

Call free on 01403 730080