When sharing the site on Facebook, Twitter and others, many times want to select a specific image to share on those sites that will represent out site. For this we simply how to follow the following steps and the recommendations mentioned afterwards. Please be sure to also read the recommendations since they include important information for the site to gain SEO score points, be more compatible with browsers, Social sites and more.
1. Go to: Content > Edit Web Pages > Select the Homepage (The homepage has the /home url)
2. After opening the Home page, open the SEO Settings tab and upload an image:
3. At the end of this section there is the Social Media Shared Image box. The image can be uploaded directly from the computer or from an existing image in the Media Manager.
- Do not under any circumstance use image names with spaces or special characters, this will prevent them from most likely not working, not only on the BD site, but also on any social site since this will go against the Web Standards. For example an image named Hello World.jpg is wrong. It should be named HelloWorld.jpg (Without spaces). Social Sites will immediately fail on providing the correct image if a space is found and when uploading images to the site, please make sure they do NOT have spaces in them. This will also create issues when viewing them over the mobile device or different browsers. It is highly not recommended to ever use images with spaces or special characters.
- Images should be PNG, JPG or GIF. To have the best quality, use PNG. For compression, use JPG and for an image to be animated, use GIF.
- Images are highly recommended to always be lower case. This will make sure they are fully compatible with all Social Sites, RSS Feeds, XML Feeds and more.
- When uploading images, in order for them to look perfect on different devices (Including big resolutions), the recommended width and height of the image should be between 2x to 5x the size that will be shown on the homepage. For example a logo of 100px X 50px, upload an image that is at least 300px X 150px to 500px X 250px. The multiplier will depend on the size you wish to show, so a lower multiplier applies to an already big image, but a higher multiplier will apply to a small image to make sure the quality is maintained over different devices.
- Images by default do not have an ALT attribute attached to them. Since 2015, Google and other companies enforce the use of this to enhance SEO and help maintain the web standards over all sites. The change is basically adding the ALT attribute to the img tag. So for example, go from <img src="myImage.png> to <img src="myImage.png alt="This is an image">. The description inside the ALT attribute should either explain what the image is (Optional), or simply leave a default text that the ALT attribute uses.
- When testing what image to use for sharing on a social site, for example like Facebook, go to their Facebook Debug Tool to make sure that the image is correctly being fetched. When in there, always click on the Fetch new scrape information button to grab the latest changes from the site (Instead of the cache version Facebook uses from the site).