Once a Drupal website is developed and ready to display content, the next crucial step is ensuring that the content is easily discoverable via search engines and displays beautifully when shared on social media platforms like Facebook and X.com. Drupal offers a powerful standard tool for this: the Metatag module, which provides detailed management of website header information (Head).
System Preparation
Start by installing the Metatag module via Composer, the standard method to ensure all necessary files and dependencies are correctly managed.
composer require drupal/metatagAfter installation, navigate to the Extend page to enable the core module (Metatag) and the sub-modules required for social media display: Metatag Open Graph and Metatag Twitter Cards (which X.com still references as its standard).
Global Configuration
Go to Configuration > Search and metadata > Metatag to set default values for all pages on the site. In the Global section, check basic values such as Page title and Description. Typically, a Token pattern like [node:title] | [site:name] is used so the system automatically pulls the headline.
Setting up for Facebook (Open Graph)
Facebook and most social media platforms use the Open Graph (og) standard to pull information for display. In the Metatag module settings, navigate to the Open Graph section and focus on these key configurations:
- og:title: Set this to pull from the article title
[node:title]. - og:description: Pull from the content summary
[node:summary]or the beginning of the article[node:body:summary]. - og:image: This is the most critical part for attracting attention. Select the Token for the image field in your Content Type, such as
[node:field_image:entity:url], so the system displays the cover image when shared. - og:type: Set this to
articlefor general content pages.
Setting up for X.com (Twitter Cards)
X.com uses the Twitter Cards tag group to control display. Pay special attention to:
- twitter:card: It is recommended to select Large image summary card so the image displays at full width, which is more engaging than a small one.
- twitter:site and twitter:creator: Enter the X.com handle for the website or author (must start with @).
- twitter:title, twitter:description, and twitter:image: You can use the same Tokens as those used for Facebook.
Managing at the Content Type Level
If your site has multiple content types, such as News and Products, you can differentiate Metatag settings for each type for better accuracy. For instance, on a product page, you might set og:image to pull directly from the product image rather than a general cover image.
Verification
After saving your settings, test the display before sharing live using tools like Facebook’s Sharing Debugger and X.com’s Card Validator. These tools simulate the display and alert you if any tags are missing or if the image size is inappropriate.
Taking the time to configure the Metatag module systematically from the start ensures your Drupal content doesn’t just look good on your site, but also appears professional and credible when shared across social networks—a key factor in increasing traffic and SEO rankings in the long run.