The module adds the possibility to add Open graph metatags for different kinds of pages (cms, category page, pdp). If custom values are not provided the module uses a meta title, meta description, and first available content image. The Open Graph protocol enables any web page to become a rich object in a social graph. For instance, this is used on Facebook to allow any web page to have the same functionality as any other object on Facebook.

Installation

This module is a part of MageSuite metapackage

Installation if metapackage is not used:

composer require "creativestyle/magesuite-opengraph" ^1.0.0

Admin settings

Open graph settings are placed inside Social Media tab.

CMS page

Category Page

Product Page

Settings:

Name	Options	Comment
Open Graph Title	Custom title The title of your article without any branding such as your site name.	If this field is empty, the value for "Meta Title" will be used. If "Meta Title" is also empty, page title will be used.
Open Graph Description	Custom description A brief description of the content, usually between 2 and 4 sentences. This will displayed below the title of the post on Facebook.	If this field is empty, the value from "Meta Description" will be used.
Open Graph Image	Custom image Try to keep your images as close to 1.91:1 aspect ratio as possible to display the full image in Feed without any cropping. Recommended size: 1200 x 630 pixels	Allowed file types: png, gif, jpg, jpeg, svg. Max file size 1MB. If this field is empty, the image from "Image Teaser" will be used.
Open Graph Type	article / website

Backend

TODO - BE documentation and review of this documentation is needed

Product Page

Get current metadata template and add open graph tags to existing tags

vendor/creativestyle/magesuite-opengraph/Plugin/Framework/View/Page/Config/Renderer/AddTagsToHeadMeta.php:39

class AddTagsToHeadMeta
{
    public function afterRenderMetadata(\Magento\Framework\View\Page\Config\Renderer $subject, $result)
    {
        .....
        $tags = $this->tagsCollector->getTags($pageType);
        .....
        foreach ($tags as $name => $value) {
            .....
            $metadataTemplate = $this->getMetadataTemplate($name);
            .....
            $result .= str_replace(['%name', '%content'], [$name, $value], $metadataTemplate);
        }

        return $result;
    }
}

Get open graph tags

vendor/creativestyle/magesuite-opengraph/Service/TagsCollector.php:17

class TagsCollector
{
    public function getTags($pageType = null)
    {
        .....
        $dataProviders = $this->sortProviders($this->dataProviders[$pageType]);

        $tags = [];
        foreach ($dataProviders as $dataProvider) {
            $dataProviderClass = $dataProvider['class'];
            .....
            $tags = $this->mergeTags($tags, $dataProviderClass->getTags());
        }

        return $tags;
    }
}

Get general open graph tags for example:

og:title = "Damen-T-Shirt mit Rundhalsausschnitt  | NKD"
og:description = "Mode-Basic: Dieses Damen-T-Shirt von Laura Torelli Collection ist wirklich unverzichtbar. Mit seinem schlichten, einfarbigen Design lässt es sich nach Herzenslust zu farbenfrohen Hosen, Röcken oder Strickjacken kombinieren. Erleben Sie außerdem"
og:image = "http://magesuite.me/static/version1698066273/frontend/Creativestyle/theme-nkd/de_DE/images/logo.svg"
og:image:type = "image/svg+xml"
og:image:alt = "NKD Deutschland GmbH"
og:url = "http://magesuite.me/de_de/id/242392/"
og:locale = "de_DE"

vendor/creativestyle/magesuite-opengraph/DataProviders/General.php:71

class General extends TagProvider implements TagProviderInterface
{
    public function getTags()
    {
        $this->addFbAppIdTag();
        $this->addTitleTag();
        $this->addDescriptionTag();
        $this->addImageTag();
        $this->addUrlTag();
        $this->addLocaleTag();

        return $this->tags;
    }
}

Get product tags

vendor/creativestyle/magesuite-opengraph/Mapper/Product.php:14

class Product implements MapperInterface
{
    public function getItems($product)
    {
        .....

        $tags = [];
        foreach ($this->items as $tagName => $item) {
            .....
            if (is_array($tagValue)) {
                foreach ($tagValue as $key => $value) {
                    $name = $tagName . ':' . $key;
                    $tags[$name] = $value;
                }
            } else {
                $tags[$tagName] = $tagValue;
            }
        }

        return $tags;
    }
}

Frontend

The module is enabled by default when installed.

On the frontend open graph prefix is added to the HTML tag.

<html lang="en"><head prefix="og: http://ogp.me/ns#">

General configuration can be found in:

Stores -> Configuration -> MageSuite -> Facebook -> Open Graph

Settings:


Is Enabled	Yes No
fb:app_id		If set, tag `<meta property="fb:app_id" content="1234567890" />` is visible on every page
Default Image		If set, this image will be used as default Open Graph image tag

Custom values per page

The following open graph tags are added to the HEAD section:

Example of open graph tags:

<meta property="og:title" content="Home Page"/>
<meta property="og:description" content="New Yoga Collection. Get fit and look fab in new seasonal styles"/>
<meta property="og:image" content="https://d187yychpee5t0.cloudfront.net/static/version1660037879/frontend/Creativestyle/theme-creativeshop-test/en_US/images/logo.svg"/>
<meta property="og:image:type" content="image/svg+xml"/>
<meta property="og:image:alt" content="creativeshop Demo"/>
<meta property="og:url" content="https://demo.magesuite.io/"/>
<meta property="og:locale" content="en_US"/>
<meta property="og:type" content="article"/>

OpenGraph