When sharing your site on Facebook, Twitter, Google Plus and others, we 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 your site to gain SEO score points, be more compatible with browsers, Social sites and more.
1. On your backend to Content -> Edit Web Pages
2. Select the Home Page (The homepage has the /home url)
3. After opening the Home page, scroll down and on your right you should see the Social Media Sharing Details section
4. At the end of this section there is the Social Media Image box. Place the URL of your image without the name of your site. So if the image is in http://mysite.com/images/siteLogo.jpg, you would put /images/siteLogo.jpg.
- 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 your 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 you upload images to your 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. If you wish to have the best quality, use PNG. If you need better compression, use JPG and if you need the 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, if you wish 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. So if you wanted to show for example a logo of 100px X 50px, you would 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, you would 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 you will use for sharing on a social site, for example like Facebook, you will need to 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 your site (Instead of the cache version Facebook uses from your site).