...
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 | ||||
---|---|---|---|---|
|
Installation
Info |
---|
This module is a part of MageSuite metapackage |
...
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
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 | ||
---|---|---|
| ||
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 | ||
---|---|---|
| ||
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 | ||
---|---|---|
| ||
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 | |
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
TODO - BE documentation and review of this documentation is needed Note