What are OpenGraph tags?
OpenGraph is an internet protocol developed by Facebook in 2010 to help control what content from your website is shown when you share your content on Facebook and other social media, such as X (formerly known as Twitter) and Pinterest. For example, the OpenGraph protocol allows you to control what image, title, and description display when sharing links on social media.
OpenGraph tags are snippets of code that you add to the <head> section of a webpage to send information to social media platforms. Without OpenGraph tags, the social media platforms will make the best guess about what information to show, which may not accurately represent what you intended to be shared.
You can see a description of all the OpenGraph (OG) tags in Facebook’s official documentation. Only a handful of OG tags are required for social media platforms to understand the basics of your page. The basic OpenGraph tags required are:
- og:type The type of content you are sharing (e.g. video, picture, blogpost)
- og:title The title of your page
- og:url The URL of the page
- og:description The description of your content
- og:image The URL of the image you want to display
Which OpenGraph tags are used on DecoNetwork websites?
In DecoNetwork, all the necessary OG tags are defined once per page in the <head> section of the page. Product listing pages have the og:type, og:title, og:url, and og:description tags. The designer, decorated product, and design pages also contain the og:image, og:image:width, and og:image:height tags. Blank and decorated product pages have all the necessary OG tags required to enable social media platforms to index products and add them to their shopping feeds. Product pages in DecoNetwork have the OG tags:
- og:image The URL of the product image
- og:image:width The width of the product image (Set to 200px)
- og:image:height The height of the product image (Set to 200px)
- og:price:amount The current price of the product (For a decorated product this is set to the price displayed on the decorated product page. For a blank product this is set to the price of the blank product excluding decoration price).
- og:price:currency The currency to be used for the price (This is set to the currency of the FC)
- product:brand The brand name of the product (This is the brand of the blank product)
- product:availability The current availability status of the product - in stock, out of stock, available for order, or discontinued (This is set to ‘available for order’)
- product:condition The current condition of the product - new, refurbished, or used (This is set to ‘new’)
- product:price:amount (Same as for og:price:amount)
- product:price:currency (Same as for og:price:currency)
- product:retailer_item_id The identification code for the product (This is the database id of the decorated or blank product)
DecoNetwork allows you to specify a particular image to be used as the og:image when you share a page on your website that does not have a specified image. This functionality is available under the Social Share Image setting in the Design section of the Website Editor. Click here for instructions.
Comments
0 comments
Please sign in to leave a comment.