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.
- 1 Installation
- 2 Admin settings
- 3 Backend
- 3.1 vendor/creativestyle/magesuite-opengraph/Plugin/Framework/View/Page/Config/Renderer/AddTagsToHeadMeta.php:39
- 3.2 vendor/creativestyle/magesuite-opengraph/Service/TagsCollector.php:17
- 3.3 vendor/creativestyle/magesuite-opengraph/DataProviders/General.php:71
- 3.4 vendor/creativestyle/magesuite-opengraph/Mapper/Product.php:14
- 4 Frontend
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
| 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
| If this field is empty, the value from "Meta Description" will be used. |
Open Graph Image | Custom image
| 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 |
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: