Add Opengraph tags to your Concrete5 site for Social Media

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

The following code will add Opengraph 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 } ?>


Please complete the form below or contact us to enquire now