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

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 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:

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

Get product tags

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

Frontend

The module is enabled by default when installed.

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

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:

MageSuite Developer Documentation

OpenGraph