This project enhances the default metadata module to improve social media previews and SEO. It ensures proper display of titles, images, and descriptions across various platforms, providing default suggestions that can be customized. The enhancements aim to create a better user experience when sharing content on social media and when search engines crawl the site.
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.
- 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”.
Business needs covered: