OpenGraph

GitHub - magesuite/opengraph

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: