Open Graph Meta Tags PWA Studio for Magento Adobe Commerce

Compatible with Magento v2 Adobe Commerce - Open Source (CE), Commerce on-prem (EE), and Commerce on Cloud (ECE)!

Provides Apptrian Open Graph Meta Tags extension functionality to PWA Studio. Requires both original (base) extension and GraphQL (add-on) extension to be installed. The Open Graph protocol enables any web page to become a rich object in a social graph. Apptrian Open Graph extension for Magento adds Meta (Facebook) Open Graph and Pinterest Rich Pins, to product, category, home, and CMS pages. The Open Graph meta tags are also used by Pinterest, TikTok, Twitter, and many others. There are dozens of options for customization. This extension provides your Magento site not only with social improvements but also has great SEO value. All of the meta tags are generated automatically based on the data in your Magento database. Like all of our extensions, it is multistore compatible, works on any theme, it does not override nor overwrite anything. Functionality is injected via layout updates as Magento best practices recommend.

Compatible with PWA Studio (Venia) frontend without the need for any additional coding. It works out of the box.

Features

General Settings

• An easy way to enable or disable the extension.

Meta (Facebook) Open Graph (for the product, category, home, and cms pages)

• An easy way to enable or disable Open Graph.
• All data needed for Open Graph meta tags is parsed from Magento and tags are generated automatically.
• Multiselect option to add Open Graph for the product, category, home, and/or cms pages.
• Option to type in Facebook Administrator IDs (fb:admins).
• Option to type in Facebook App Id (fb:app_id).
• Option to type in Facebook Profile Id (article:author).
• Option to type in attribute code to use for Category page title (og:title) meta tag.
• Option to type in attribute code to use for Category page description (og:description) meta tag.
• Option to type in attribute code to use for Category image (og:image) meta tag.
• Option to type in attribute code to use for CMS page title (og:title) meta tag.
• Option to type in attribute code to use for CMS page description (og:description) meta tag.
• Option to limit the number of images on CMS pages Open Graph.
• Option to type in attribute code to use for Product page title (og:title) meta tag.
• Option to type in attribute code to use for Product page description (og:description) meta tag.
• Option to limit the number of images on Product pages Open Graph.
• Products will use a full-size primary image for (og:image) meta tag.
• Option to type the attribute code you want to use for the product:brand meta tag.
• Option to type default text for the product:brand meta tag value. (It is used if an attribute is empty.)
• Option to type the attribute code you want to use for the product:availability meta tag. (If left empty determination will be made based on the default Magento getIsInStock() method.)
• Option to match product:availability values to defined ones: in stock, out of stock, available for order, and discontinued.
• Option to type the attribute code you want to use for the product:catalog_id meta tag.
• Option to type the attribute code you want to use for the product:category meta tag.
• Option to type default category for the product:category meta tag value. (It is used if an attribute is empty.)
• Option to type the attribute code you want to use for the product:condition meta tag.
• Option to match product:condition values to defined ones: new, refurbished, and used.
• Option to type the attribute code you want to use for the product:gender meta tag.
• Option to match product:gender values to defined ones: female, male, and unisex.
• Option to type the attribute code you want to use for the product:item_group_id meta tag.
• Option to type the attribute code you want to use for the product:gtin (Global Trade Item Number) meta tag.
• Option to type the attribute code you want to use for the product:isbn (International Standard Book Number) meta tag.
• Option to type the attribute code you want to use for the product:mfr_part_no (Manufacturer Part Number) meta tag.
• Option to type the attribute code you want to use for the product:retailer_item_id meta tag.
• Option to enable the product:sale_price meta tag.
• Option to enable the product:sale_price_dates meta tag.
• Option to enable the og:price meta tag. (The product:price meta tag is already enabled by default.)
• Option to use the lowest price for the og:price meta tag.
• Option to use the price range.
• Option to use one meta tag or two meta tags for the price range.
• Option to type the meta tag for the price range.
• Option to type the meta tag for price range minimum.
• Option to type the meta tag for price range maximum.
• Option to type the price range separator sign or text.
• Options to select which product type should use product range. (Separate option for bundle, configurable, downloadable, grouped, simple, and virtual.)
• Options to use price range only if minimum and maximum prices are different. (Separate option for bundle, configurable, downloadable, grouped, simple, and virtual.)
• Option to format price value as a string with zeros (Example: 7.00).
• Option to type price precision (number of decimal places).
• Option for additional meta tags to attributes mapping. Example: color=color|pattern=pattern. As you can see the format is simple tag1=attribute1|tag2=attribute2 The meta tag and Magento product attribute are connected by = sign and pairs are separated by | sign.
• Product pages are done as Product objects while Category, Home, and CMS pages are done as Article objects.

Pinterest Rich Pins (for the product, category, home, and cms pages)

• An easy way to enable or disable Pinterest Rich Pins.
• Product pages are done as Product objects while Category, Home, and CMS pages are done as Article objects.
• All data needed for Pinterest Rich Pins meta tags are parsed from Magento and tags are generated automatically.
• Pinterest Rich Pins are using Open Graph meta tags to implement their functionality, therefore Open Graph must be enabled in order for Pinterest Rich Pins to function.
• Please take a look at our genuine Pinterest Rich Pins examples.

Installation Instructions

This extension is not a standalone extension. It is an add-on extension. Requires both original (base) extension and GraphQL (add-on) extension. Please do not attempt to install it before the required extensions. Once you installed both the original (base) extension and GraphQL (add-on) extension, you may proceed.

There are several ways you can install any Magento extension. Our extension is no different. We will show you three ways to install the extension, but you must not mix them. Choose one and stick to it.

If you do not know how to install an extension or you wish a professional to do it for you, we offer an additional installation service for a small fee.

Installation via file uploading
(If you purchased the extension on our site)

Step 1. Backend installation instructions

If you purchased the extension on our site, unpack the .zip file from /Magento2/InstallByUploadingFiles/ directory inside your Magento root.
- Run the following commands on the Magento root directory:

php bin/magento maintenance:enable

php bin/magento module:enable --clear-static-content Apptrian_OpenGraphPwaStudio

php bin/magento setup:upgrade

php bin/magento cache:flush

php bin/magento setup:static-content:deploy

php bin/magento maintenance:disable

php bin/magento cache:flush

Step 2. PWA Studio installation instructions

From your PWA Studio parent directory, create the extensions/@apptrian directory and copy the JavaScript module (React package) available in the pwa-studio/@apptrian directory. (You can get it from /path/to/MAGENTO_ROOT/app/code/Apptrian/OpenGraphPwaStudio/pwa-studio/@apptrian, or if you do not have access to this directory, it is also in a .zip file you downloaded in Step 1.)

mkdir -p extensions/@apptrian
cp -r /path/to/package/@apptrian/open-graph-pwa-studio extensions/@apptrian/open-graph-pwa-studio

Then, go to your PWA Studio root directory.

cd your-pwa-studio

Edit the package.json file in your-pwa-studio directory and add @apptrian to the trusted-vendors array. (It is usually near the end of the file.)

{
    ...
    "pwa-studio": {
        "targets": {
          "intercept": "./local-intercept.js"
        },
        "trusted-vendors": [
          "@apptrian"
        ]
    }
}

If you do not have the trusted-vendors array, add it exactly as presented above. If you already have the trusted-vendors array, add @apptrian at the end of it.

Add the extension to your project with yarn or npm, depending on which one you are using.

If you are using yarn

yarn add file:../extensions/@apptrian/open-graph-pwa-studio

If you are using npm

npm install -f ../extensions/@apptrian/open-graph-pwa-studio

Installation via Composer
(If you purchased the extension on our site)

Step 1. Backend installation instructions

If you purchased the extension on our site and you want to install the extension via composer public and private keys. (To find your public and private keys, login to your Apptrian.com customer account and look at the My Downloadable Products section.)
- Run the following commands on the Magento root directory:

php bin/magento maintenance:enable

composer config --auth http-basic.packages.apptrian.com $PUBLIC_KEY $PRIVATE_KEY

composer config repositories.apptrian-open-graph-pwa-studio composer https://packages.apptrian.com/open-graph-pwa-studio/

composer require apptrian/open-graph-pwa-studio

php bin/magento module:enable --clear-static-content Apptrian_OpenGraphPwaStudio

php bin/magento setup:upgrade

php bin/magento cache:flush

php bin/magento setup:static-content:deploy

php bin/magento maintenance:disable

php bin/magento cache:flush

Step 2. PWA Studio installation instructions

From your PWA Studio parent directory, create the extensions/@apptrian directory and copy the JavaScript module (React package) available in the pwa-studio/@apptrian directory. (You can get it from /path/to/MAGENTO_ROOT/vendor/apptrian/open-graph-pwa-studio/pwa-studio/@apptrian, or if you do not have access to this directory, it is also in a .zip file you can download from your account on our site in the My Downloadable Products section.)

mkdir -p extensions/@apptrian
cp -r /path/to/package/@apptrian/open-graph-pwa-studio extensions/@apptrian/open-graph-pwa-studio

Then, go to your PWA Studio root directory.

cd your-pwa-studio

Edit the package.json file in your-pwa-studio directory and add @apptrian to the trusted-vendors array. (It is usually near the end of the file.)

{
    ...
    "pwa-studio": {
        "targets": {
          "intercept": "./local-intercept.js"
        },
        "trusted-vendors": [
          "@apptrian"
        ]
    }
}

If you do not have the trusted-vendors array, add it exactly as presented above. If you already have the trusted-vendors array, add @apptrian at the end of it.

Add the extension to your project with yarn or npm, depending on which one you are using.

If you are using yarn

yarn add file:../extensions/@apptrian/open-graph-pwa-studio

If you are using npm

npm install -f ../extensions/@apptrian/open-graph-pwa-studio

Installation via Composer
(If you purchased the extension on Adobe Commerce Marketplace)

Step 1. Backend installation instructions

If you purchased the extension on Adobe Commerce Marketplace then you must use Composer. Adobe Commerce Marketplace does not allow extension downloads.
- Run the following commands on the Magento root directory:

php bin/magento maintenance:enable

composer require apptrian/open-graph-pwa-studio

php bin/magento module:enable --clear-static-content Apptrian_OpenGraphPwaStudio

php bin/magento setup:upgrade

php bin/magento cache:flush

php bin/magento setup:static-content:deploy

php bin/magento maintenance:disable

php bin/magento cache:flush

Please make sure your Magento public and private keys are in your Magento root auth.json file. Usually, people install Magento with one Adobe Commerce Marketplace account (public and private keys) and then purchase an extension with another Adobe Commerce Marketplace account (different public and private keys). Check the Adobe Commerce Marketplace account you used to purchase the extension and make sure its public and private keys are in the Magento root auth.json file. WARNING! If you already have keys there, be very careful because maybe some other extensions are purchased with another Adobe Commerce Marketplace account.

Step 2. PWA Studio installation instructions

From your PWA Studio parent directory, create the extensions/@apptrian directory and copy the JavaScript module (React package) available in the pwa-studio/@apptrian directory. (You can get it from /path/to/MAGENTO_ROOT/vendor/apptrian/open-graph-pwa-studio/pwa-studio/@apptrian, or if you do not have access to this directory, use composer to download the package to your computer. If you get stuck, use the contact form on our site and provide your order number and full name as it is on order, and we will provide you with further instructions.)

mkdir -p extensions/@apptrian
cp -r /path/to/package/@apptrian/open-graph-pwa-studio extensions/@apptrian/open-graph-pwa-studio

Then, go to your PWA Studio root directory.

cd your-pwa-studio

Edit the package.json file in your-pwa-studio directory and add @apptrian to the trusted-vendors array. (It is usually near the end of the file.)

{
    ...
    "pwa-studio": {
        "targets": {
          "intercept": "./local-intercept.js"
        },
        "trusted-vendors": [
          "@apptrian"
        ]
    }
}

If you do not have the trusted-vendors array, add it exactly as presented above. If you already have the trusted-vendors array, add @apptrian at the end of it.

Add the extension to your project with yarn or npm, depending on which one you are using.

If you are using yarn

yarn add file:../extensions/@apptrian/open-graph-pwa-studio

If you are using npm

npm install -f ../extensions/@apptrian/open-graph-pwa-studio

Configuration

Our extension works out of the box. If you want to configure it differently log to your Magento Admin and go to:

Stores > Configuration > Apptrian Extensions > Open Graph Meta Tags

There are more than several options for customization. They are all self-explanatory and have comments and tooltips.

After changing options make sure you refresh your Magento cache.

FAQ

Q: Does the extension work with multi-store setups?
A: Yes, it does work with multi-store setups. It functions in the same way as the core Magento modules, and it is fully automated.