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 above-named fields 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.

Though the front page does not have an Open Graph image field property as well as 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 categories pages use a category icon, and the products pages use the main product image to display in a link preview for networks.

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.

The absolute minimum is 200 x 200 pixels, though if your image is smaller than 600 x 314 pixels, it will appear as a thumbnail-sized picture. So, if your images carry a lot of important detail that would be lost in such a small frame, it's 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 larger. Facebook will crop the top and bottom of the image automatically 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 2 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 this will be shown 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 that you want your content to link to. Usually, it is the page link.

  • og:site_name - The name of your website. Remember that this differs from your web page's actual title and is usually shown under the title itself. In X-Cart, this tag's value corresponds with the company name value set in the store profile.

  • og:description - A brief description of the page. This should be no more than 2 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 if you want 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 define your feature image's specific height.

You can find a full list of types at https://developers.facebook.com/docs/reference/opengraph/.

Did this answer your question?