OpenDraph Data for Social Media Sharing.

When you share a webpage to Social Media such as twitter or Facebook, you will see a preview of the content with an image like the product share below:

Example of Open Graph Data in action

This is managed through the use of standardized metadata design initially by Facebook that is inserted in the code. Flower Store in a Box will automatically include OpenGraph data in the page from the content you provide.

There are three types of pages in your website:

Content Pages – such as the homepage, about us page etc

Product Category Pages – such as Best Sellers, Roses etc

Product Pages – the actual page when a product is displayed.

By default the content for the OG Metadata is taken from the Existing Metadata of the page, IE:

OG:Title – Meta Title

OG:Description – Meta Description

Image Sharing

The image for pages and categories that is shared by default is:

https://www.yourdomainname.com.au/images/facebook_main.jpg

This is set as a generic image when your website is built. You can add a custom sharing image by uploading the image to your website your image library.

For products the image shared will be the main image of the product by default.

Create Custom Product Category Sharing Image.

You can choose a custom image for each of your product categories by uploading an image when you edit the category:

Upload Custom OG:IMage

In addition to OpenGraph data on the product pages we also embed special structured data for each product:

{

"<atsymbol>context": "http://schema.org/",

"<atsymbol>type": "Product",

"productID": "$in{`display`}",

"name": "$name",

"image": "$domain/images/product/large/$in{`display`}.jpg",

"description": "$desc",

"sku": "$in{`display`}",

"itemCondition": "new",

"brand": {

"<atsymbol>type": "Thing",

"name": "$sitename"

"aggregateRating": {

"<atsymbol>type": "AggregateRating",

"ratingCount": "1",

"ratingValue": "5",

"bestRating": "5"

"offers": {

"<atsymbol>type": "Offer",

"priceCurrency": "$dollartype",

"price": "$price_one",

"url": "$url",

"priceValidUntil": "2030-01-01",

"itemCondition": "http://schema.org/Fresh",

"availability": "$stocklabel",

"seller": {

"<atsymbol>type": "Organization",

"name": "$sitename"

}

</script>

This is used by Google to identify the variables of a product and also used by Facebook to create Facebook Catalogues for advertising in Facebook and Instagram

Added: 2021-7-22 and last modified: 2021-7-22

Myweblogin Knowledge Base

OpenDraph Data for Social Media Sharing.

Image Sharing

Create Custom Product Category Sharing Image.

Related Topics