When a link to your site is posted on social media you will typically see an image as well as the link. Depending on the social media platform you may also see additional information such as a summary of the content.
For the purposes of this article I will refer to Facebook but most of it will equally apply to Twitter, LinkedIn, Slack, Mattermost etc
So how does Facebook decide what image to show?
If you haven't specified an image then Facebook will use its own algorithm to try and determine the most relevant image to display in the preview of the link you are sharing. Facebook's algorithm looks at several factors, including:
- Images on the page: Facebook looks for images on the page that you are sharing, and may choose one of those images to display in the preview.
- Image size and quality: Facebook may prioritize images that are larger and higher quality, as these tend to look better in the preview.
- Image location on the page: Facebook may also consider the location of the image on the page, such as whether it is in the header or the body of the page.
- Image format: Facebook may prefer certain image formats, such as JPEG or PNG, over others.
- Content of the page: Facebook may also use the content of the page to try and determine the most relevant image to display in the preview.
- No image found: If Facebook cannot find any suitable images, no image will be displayed when the link is shared on Facebook.
The exact algorithm that is used is unknown and it will probably change over time so instead on relying on someone else to decide what image to show you should specify an image yourself.
How do I tell Facebook what image to display?
To tell Facebook what image to display, you can specify the desired image using Open Graph meta tags in the header of your website's page. These tags provide information about the page content, such as the title, description, and image.
To specify the image, use the "og:image" meta tag and set its value to the URL of the desired image. It is currently recommended to use images that are at least 1200 x 630 pixels as they display the best on high resolution devices.
Is there a Joomla extension?
Not surprisingly there are a lot of different extensions that will facilitate the creation of og metadata on your site or you can create your own. Each have their merits and this article will not cover that but I will probably write a tutroial on how I dynamically create og metadata and images on my own web sites at some point.
Do I need to have a unique image for every page?
No, not at all and from a branding perspective it might even be better for you to just have a single image as this will increase recognition when someon4e is scrolling through there social media.
If you want to do this then at a minimum you will need to add this one line of html to your template just before the closing </head>
<meta property="og:image" content="FULL_IMAGE_URL">
Replace FULL_IMAGE_URL to the full url of the chosen image. Remember it should be at least 1200 x 630 pixels in size.
I changed the image but Facebook still uses the old image?
If you changed the image but Facebook still uses the old image, it is probably due to Facebook's caching system. The first time the link was shared then Facebook will cache the results and it can take a long time for that cache to be updated..
To force Facebook to update its cache you can use the Facebook Sharing Debugger tool to fetch the latest information about the page and clear the cache. This will also give you a preview of how the page will look when shared.
Can I use the same og: image for Facebook and Twitter etc?
Yes, you can use the same "og:image" meta tag for all social media platforms and websites that support the Open Graph Protocol, including Facebook, Twitter, and LinkedIn.
Keep in mind that each platform may have its own size and aspect ratio requirements for preview images, so I recommend to use images that are at least 1200 x 630 pixels. Additionally, some platforms may also have specific image requirements, such as a minimum file size, so be sure to check each platform's documentation for any specific requirements.