When you are sharing your website's pages on Facebook, if you share any pages from your Products, Categories, Events, Blog Posts or Contact page, our system will pick the best and most relevant information to show on Facebook.
However, if you wish to show something different, or pick what's shown on sharing other pages, you can control the information used by using Facebook's API OpenGraph meta-tags.
These allow you to have a control over the information that is collected by Facebook when they crawl your website. This means that when a link to a website is posted, Instead of Facebook crawling your site for information, they will read the OpenGraph meta-tags and display what you wish for them to display.
The OpenGraph meta-tags will need to be added to the custom <head> of your website, which can be found in the "Page Options" of the page you wish to specify.
The tags are laid out in the following way:
og:title - Used for the tagline of your website, as highlighted below.
The code to define this is: <meta property="og:title" content="YOUR WEBSITE TITLE HERE" />
og:url - Used for the URL you wish to display, as highlighted below.
The code to define this is: <meta property="og:url" content="https://www.yourdomainname.com/" />
og:image - Used for the image you would like to display. This will appear in the highlighted area shown below. You will need to use the image URL which be found by right-clicking the image on your site and selecting "Copy Image Location".
The code to define this is: <meta property="og:image" content="http://www.yourimageURL.jpg" />
og:description - Used for the website description you would like to display, as highlighted below.
The code to define this is: <meta property="og:description" content="YOUR WEBSITE DESCRIPTION HERE" />
To apply the four OpenGraph meta-tags above, you will need to post the four codes in to the custom head area of your site, as shown below:
Once you have added your codes, click "Save Changes" in the bottom right-hand corner and then publish your site via the "Publish" area.
Now that the meta properties have been set Facebook will automatically begin pulling this information. In order to speed this up, you can use the Facebook debugger tool to force it to fetch the updated information. Simply enter the URL to the page with the information set up, and click the 'Debug' button.
You can preview how your site would look by scrolling to the section, 'When shared, this is what will be included'