3.5.Social Media Sharing

Owned by Adnan Krzavic
Last updated: Apr 14, 2022 by Duy Pham
3 min read

The social media visibility can be improved by using Open Graph Tags. Open Graph Tags were introduced by Facebook and allow adding more information of a given page link in their meta tags.

Thus, Open Graph Tags have a similar function as Google Rich snippets that pass additional information of products to Google, such as the price, stock etc. The information contained in Open Graph Tags will be also used when displaying the links on Facebook, e.g. the title or image. Optimizing Open Graphs will improve the visibility on Facebook in first instance. Since Social Media also impact the SEO performance, optimizing the shop’s Open Graph Tags will also indirectly improve the SEO performance.42

 

Figure 126 Open Graph Tags of a Product Detail Page (source code on storefront)

  

 

In order to configure the Open Graph Tag feature in the shop access STORES / SETTINGS / CONFIGURATION and navigate to MAGESUITE and then FACEBOOK. You can enable the feature by setting IS ENABLED to “YES” in the dropdown. In the FB:APP ID input field enter the Facebook App ID that identifies your website to Facebook. In DEFAULT IMAGE you can upload an image that will be displayed as the default image in the Open Graph Image Tag (“og:title”) in case there is no specific Open Graph Image Tag set for a link (product, category or CMS page).

 

Figure 127 Configuration of Open Graph Tags (admin panel)

 

 

 

You can set Open Graph Tags for products. Access CATALOG / INVENTORY / PRODUCTS and click “EDIT” in the product entry you want to set the Open Graphs Tags in. Scroll down and expand the SOCIAL MEDIA area. Here you can do the following:

 

  1. OPEN GRAPH TITLE: You can set an Open Graph Title. In case of not setting any Open Graph Title the value from the META TITLE will be used (from the SEARCH ENGINE OPTIMIZATION section)

  2. OPEN GRAPH DESCRIPTION: You can set an Open Graph Description. In case of not setting any Open Graph Description the value from the META DESCRIPTION will be used (from the SEARCH ENGINE OPTIMIZATION section).

  3. OPEN GRAPH TYPE: Here you can set the Open Graph Object Type. In case you want to use the Open Graph Tags for specific pages within the website, select “ARTICLE”. In case of not selecting any value here the Open Graph Type “product” will be used.

  4. PREVIEW: Here you can preview the Open Graph properties.43

 

When this is done click “SAVE” in the top section on the right-hand side.

 

 

 

 

 

You can set Open Graph Tags for categories. Access CATALOG / INVENTORY / CATEGORIES and click the category in the category tree you want to set the Open Graphs Tags in. Scroll down and expand the SOCIAL MEDIA area. Here you can do the following:

 

  1. OPEN GRAPH TITLE: You can set an Open Graph Title. In case of not setting any Open Graph Title the value from the META TITLE will be used (from the SEARCH ENGINE OPTIMIZATION section).

  2. OPEN GRAPH IMAGE: You can upload an image to be used in Open Graph Tags. In case of not uploading any image here, the “IMAGE” from the section IMAGE TEASER will be used.

  3. OPEN GRAPH DESCRIPTION: You can set an Open Graph Description. In case of not setting any Open Graph Description the value from the META DESCRIPTION will be used (from the SEARCH ENGINE OPTIMIZATION section).

  4. OPEN GRAPH TYPE: Here you can set the Open Graph Object Type. In case you want to use the Open Graph Tags for specific pages within the website, select “ARTICLE”. In case of not selecting any value here the Open Graph Type “website” will be used.

  5. PREVIEW: Here you can preview the Open Graph properties.44

 

When this is done click “SAVE” in the top section on the right-hand side.

 

 

 

You can set Open Graph Tags for CMS pages. Access CONTENT / ELEMENTS / PAGES and select “EDIT” in the ACTION column in the page entry you want to set the Open Graph Tags in. Scroll down and expand the SOCIAL MEDIA area. Here you can do the following:

 

  1. OPEN GRAPH TITLE: You can set an Open Graph Title. In case of not setting any Open Graph Title the value from the META TITLE will be used (from the SEARCH ENGINE OPTIMIZATION section).

  2. OPEN GRAPH IMAGE: You can upload an image to be used in Open Graph Tags. In case of not 
    uploading any image here, the “IMAGE” from the section IMAGE TEASER will be used.

  3. OPEN GRAPH DESCRIPTION: You can set an Open Graph Description. In case of not setting any Open Graph Description the value from the META DESCRIPTION will be used (from the SEARCH ENGINE OPTIMIZATION section).

  4. OPEN GRAPH TYPE: Here you can set the Open Graph Object Type. In case you want to use the Open Graph Tags for specific pages within the website, select “ARTICLE”. In case of not selecting any value here the Open Graph Type “website” will be used.

  5. PREVIEW: Here you can preview the Open Graph properties.45

 

When this is done click “SAVE PAGE” in the top section on the right-hand side.

 

 

 

_________________________________________ 

40 Please take into account the time-zone set in STORES / SETTINGS / CONFIGURATION in GENERAL / GENERAL / LOCALE OPTIONS and TIMEZONE

41 Please note that it may take up to 10 minutes to make the changes visible in the storefront.

42 You can find best practices for setting Open Graph Tags here: https://developers.facebook.com/docs/sharing/best-practices  

43 You can find a full overview of product related Open Graph Tags here: https://developers.facebook.com/docs/reference/opengraph/object-type/product/