metatag_ui_enhancements

The social media previews generated by Drupal metadata module when a user adds a link to a page on a social media platform is incomplete so far. For example, Facebook would add the image when available on page, but LinkedIn and X (formerly known as Twitter) would not. Search engines also use metadata from a page, such as the page or news summary. However, Google can override that information with their own, AI-driven, description.

For the rebuilt website in Drupal 10, we have requested to enable social media previews for links posted from the website. Social media previews consist of:

• Page title + website title: Website domain short title.
• Image: dimensions in preview depend on how social media platforms show the image.
• Description: will only display depending on what social media platforms decide to show in previews. Many channels, including X (Twitter) and LinkedIn are not displaying descriptions at time of writing. Pinterest still does.

Features

These social media previews serve two main use cases:

• When users publishes a link to a news page on an owned social media channel (LinkedIn and X) and adds an image on-page or on demand.
• When any visitor to the site posts a link on a social media platform to any page of the website, that does, or does not have an image on-page associated. When there is no image associated in the page’s content banner, a generic image displays in the preview.

Business needs covered:

• Default suggestions are in place for title, description and image.
• Title: page title
• Image: featured media image
• Description: the page or news summary, and the image in the light blue page header (content banner, “Featured image”).
• Which we can all override with another text or another image. Note: if deciding to override the page title make sure that the link text matches the destination: link text + title have to be identical or closely similar. This is a UX/content design best practice.
• We can manage the generic image that will display when a page does not have an image associated in the light blue page header. This includes the medicine pages.
• For back-end usability, we have a dedicated tab “SEO and social media”.