When you look at your Facebook and Twitter timeline or the Linkedin feed you can’t help but notice that it is all about the image now a days.
When you have no image or a bad quality image (to small or scaled up), your message will just get ‘overrun’ by all the other posts. That is a shame because you have a message in your blog that you want to get across to as many as readers as possible!
So you need high quality images and not only that, you also want to have the image itself have a clear call to action. The image is what stands out, not the title or the description text.
This ideal situation bares two conflicts in it.
1. The SMO (Social Media optimization) conflict
So you want a call to action on your image when shown on Twitter or Facebook, but you don’t want to show that call to action on the image in your blog: there is no sense in asking people to click to your blog when they are already in your blog. Just for demonstration purposes, this is the image that is used when you share this web page on a Social media platform:
2. The SEO and Google PageSpeed conflict
Google ‘forces’ you to keep your images as small as possible. When you have the ideal image on your web page for Facebook to show on the timeline e.g. 900x600px and you show that image on your blog scaled down to 300x200px, then Google will (potentially) ‘punish’ you for not having optimized your site: the image ‘load’ is 9 times (!!!) to high and therefore not optimized.
How to avoid these conflicts
The best way to optimize your blog for sharing on Social Media and have optimized images for Google on your web site is to create different images for each purpose.
The image that you want to show in your web page should be optimized for the template you are using: if the image will be shown at a resolution of 300x200 px, use an image that has an actual resolution of 300x200 px: Google will love you (and your website) for it!
The image that you want to use for sharing on Facebook, Twitter, Linkedin must be a separate image. Resolution can be as high as you would like: no penalty here as the Social media platforms will scale down the image to the best size for the purpose.
This image you need to refer to in your web page with the OpenGraph meta tags (og:image), or Twitter Card meta tags (twitter:image)
Implement for your web site?
There are a lot of plugins that will add OpenGraph and / or Twitter Card meta tags to your website and that will fill the image meta tags automatically with your web page’s image. When choosing a solution make sure that it has the possibility to select a custom image that will be set as the image meta tag.
Joomla? Here comes ochOpenGraph
On this Joomla! web site I of course use ochOpenGraph to do the job. It has all the features you need to have a professional appearance on Social Media:
- It can automatically add the article image as image meta tag: the first image in the text, the intro image or the full text image. You can specify the order in which these images should be used: e.g. first use the full text image, but when not found use the intro image, etc.
- {New in Joomla! 3.7] It can add custom images based on filename logic or on Joomla! Custom article Fields. What this enables you to do is to add e.g. a Custom article field of the type media to your articles. You, or your author (depending on the rights you assign to this field), can then add the custom image via this field. In the image priority you can then give this image the highest priority: so when this image is set, it will be used in the image meta tags.
- It differentiates between og:image images and twitter:image images. What this enables you to do is that you can have different images for Facebook (linkedin, Google+, etc) and Twitter.
- It has the possibility of a fall-back image: when the image in your article is below a set resolution, the the fall-back image will be used. This way when sharing your web page you always have an image accompanying it
Do you have any tips and tricks that will make your web page look awesome on Social media and that will positively affect your SEO ranking?