Fix meta tags for thumbnail image display

[popovayoana]

Description

Thumbnail images for links shared from https://datahub.io/ and its subpages (e.g., https://datahub.io/blog, https://datahub.io/docs etc) are not displaying correctly when shared. This is tested on social media (LinkedIn, Twitter) and Google Chat. We need to ensure that the appropriate meta tags are correctly implemented on our web pages to support proper thumbnail display on any platform.

Expected Behavior

When a link from https://datahub.io/, any of its subpages (e.g., https://datahub.io/docs, https://datahub.io/opensource), including all blog pages (e.g., https://datahub.io/blog/how-to-configure-datahub-cloud-site), is shared on any platform, the corresponding thumbnail image should display correctly. The thumbnail image should be visually appealing and representative of the content of the linked page.

Image specs:

Verify the image meets the following requirements:

• Format: JPEG, PNG, or GIF
• Size: at least 1200 x 627 pixels for LinkedIn and GChat; at least 800 x 418 pixels for Twitter
• Aspect ratio: 1.91:1 for LinkedIn and GChat; 2:1 for Twitter
• File size: under 5 MB

Screenshots

Linkedin

datahub.io

datahub.io/blog

Twitter

Gchat

[olayway]

When a link from https://datahub.io/, any of its subpages (e.g., https://datahub.io/docs, https://datahub.io/opensource), including all blog pages (e.g., https://datahub.io/blog/how-to-configure-datahub-cloud-site), is shared on any platform, the corresponding thumbnail image should display correctly. The thumbnail image should be visually appealing and representative of the content of the linked page.

@popovayoana I don't think including separate thumbnails for /blog and /docs is a good idea. These pages are not representative enough, and even if they were, they still refer to the same product - and that product imo should be shown on the thumbnail. But I think we do want to have separate thumbnails for /enterprise and /opensource.