When you create a new page on your Knorish site and share the link on social media platforms such as WhatsApp, Facebook, LinkedIn, and Google Chat, these platforms will automatically grab an image to display as a thumbnail along with the page title.
Covered in this article
- How social media platforms fetches image and title from link?
- How can you customize the images that appear when sharing a URL on social media platforms?
- How can you see a preview of how your content will appear when shared on social media platforms?
- How can you clear any cached images stored by social media platforms?
How do social media platforms fetch images and titles from links?
While social media platforms do not explicitly disclose how they fetch images and titles from links, through testing, you can observe the behavior as shown in the screenshot below.
How can you customize the image, title and description that appear when sharing a URL on social media platforms?
The customization will depend on which page builder version you are using on Knorish.
Pages created using the v2 page builder had a restriction where they would automatically attach the course thumbnail (for course pages) or the website logo for social sharing (og:image, twitter:image). This posed a challenge for customization as each social media platform has specific image size guidelines for sharing content.
Pages created using the v3 page builder, you have the freedom to choose how your content appears when shared on social media platforms.
You have the option to personalize the image, title, and description by utilizing Open Graph (OG) meta tags. These tags are small snippets of code that dictate how URLs are presented when shared on social media platforms.
<meta property="og:type" content="website" />
<meta property="og:image" content="upload_image_using_filemanager_and_use_link_here" />
<meta property="og:title" content="change_this_yourself" />
<meta property="og:description" content="change_this_yourself" />
For generating images, make sure to follow the guidelines provided at https://developers.facebook.com/docs/sharing/webmasters/images. It is important to adhere to the image size recommendations to ensure that the image appears undistorted on all devices.
On Knorish site, you can customize this either for all pages or on a per-page basis.
Customize this for all pages
Access your publisher dashboard and navigate to the Website builder section. From there, go to Custom code and select Header code. Here, you can insert your Open Graph meta tags according to the specific page builder version you are using (v2 or v3). Feel free to refer to the provided screenshot for guidance.
Customize this per-page basis
Access your publisher dashboard, go to the page settings, and insert the Open Graph meta tag in the header code. You can refer to the screenshot below for guidance.
Once you are done, depending on whether social media platforms index your site, it may take anywhere between instantly and up to a week or even a month for the changes to be reflected.
How can you see a preview of how your content will appear when shared on social media platforms?
A helpful platform you can use to preview how your content will appear when shared on social media platforms is https://socialsharepreview.com/. It is recommended to use this platform for previewing as other platforms may be blocked by our firewalls.
Another method to test how your content will appear is by sharing it on suitable social media channels. However, we do not recommend this approach due to the caching behavior of social media platforms. Once shared, it can be challenging to easily clear their cache.
How can you clear any cached images stored by social media platforms?
If the URL has already been shared on social media or other internet platforms, the changes may not immediately reflect because the URL has already been cached with a specific image. In such situations, you may need to update the page's URL before sharing it again or give it time to be reindexed.
Various platforms offer tools to debug and invalidate cached data. For Facebook, you can use their purging tool at https://developers.facebook.com/tools/debug/.