Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

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.

Table of Contents
minLevel1
maxLevel7

Installation

Info

This module is a part of MageSuite metapackage

...

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

Note

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
Code Block
breakoutModewide
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
Code Block
breakoutModewide
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:

Code Block
breakoutModewide
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
Code Block
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
Code Block
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.

...

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:

...

Code Block
<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"/>

Backend

NoteTODO - BE documentation and review of this documentation is needed