When you share a link to your store page or want to promote your site through social networks, you need it to display eye-catching and clickable. Hence you should give this link an image, title, description, and more to provide the audience with the contextual information that will make them want to click.
The fields that you need to configure in X-Cart for the store pages to display attractively in networks are:
You need to set up the fields mentioned earlier for every store page you will share, from a product page to your site's static content pages.
Open Graph Image
The "Open Graph image" field is a property of every store content page and allows uploading an image displayed in the link preview.
NOTE: Though the front page does not have an Open Graph image field property, just like the products and categories pages, this does not mean that these pages don't have an image used for a page preview at all.
The front page uses the store logo instead. The pages of categories use the category icons, and the pages of products use the main product images.
Note that you can also include an image in a page preview as an Open Graph meta tag.
For the best display on high-resolution devices, Facebook suggests choosing an image of at least 1200 x 630 pixels (1.91/1 ratio). For the rest of the devices, the resolution of 600 x 314 pixels should be enough.
NOTE: The absolute minimum is 200 x 200 pixels, though it will appear as a thumbnail-sized picture if your image is smaller than 600 x 314 pixels. So, if your images carry many vital details that would be lost in such a small frame, it is best to set your Open Graph image to 1200 x 630.
It is also possible to use images with a square aspect ratio, e.g., 1200 x 1200 or bigger. Facebook will automatically crop the top and bottom of the image to fit the sizes.
Open Graph Meta Tags
The "Open Graph meta tags" field is a property of almost every page in your X-Cart-based store. This field usually has two possible values in X-Cart - Autogenerated (default) and Custom.
Autogenerated meta tags use the general information available for a page, are generated automatically, and differ in number depending on the page type.
Custom value allows you to adjust the default set of Open Graph meta tags used on the page. This way, you can essentially control what people see when they share your website.
The list of Open Graph meta tags that you can use in X-Cart is as follows:
og:title - This is the title of your webpage. Remember that the title will display whenever someone links your website, so make it quick, snappy, and able to draw attention. In X-Cart, it usually corresponds with the product, category, or page name/title.
og:type - This is a tag to determine the type of content.
The type you use will change the way the content is displayed. For instance, using the "music.song" type will represent a single song and open up additional tags such as music:album, which represents the album, and music:release_date, which is when the song was released.og:url - The URL you want your content to link to. Usually, it is the page link.
og:site_name - The name of your website. Remember that the website name differs from your web page's actual title and usually displays under the title itself. This tag's value corresponds with the company name value set in the store profile in X-Cart.
og:description - A brief description of the page. It should be no more than two sentences. Make sure it's to the point and able to attract clicks. When autogenerated, X-Cart borrows this information from the Description, Content, or Full description fields of the page.
og:locale - This is a tag to define the content language.
og:image - URL for an image that you want to display. The minimum size is 50 by 50 pixels and must be in JPEG, GIF, or PNG formats. You can use this tag to change the image used for the page preview by default.
og:image:width - This Open Graph tag is nested within the image tag, allowing you to define your feature image's specific width.
og:image:height - This tag is nested within the image tag, allowing you to determine your feature image's height.
NOTE: You can find a complete list of types at https://developers.facebook.com/docs/reference/opengraph/.
Related pages: