...
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 open graph 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:
...