Introduction: Facebook Open Graph & Twitter Card Images
This Tutorial gives web publishers a step-by-step guide to social media thumbnail publishing for Facebook Open Graph & Twitter Cards using the Metatag module on Drupal 8 websites. Each post on a Drupal 8 website can have a specific image associated with it for social media publication that is machine generated which should be different sizes for Facebook & Twitter. The Metatag module for Drupal 8 also gives administrators the ability to set the site description, keywords, & Dublin Core meta-information as well as canonical URL values for every page.
Step One: Install & Enable the Metatag Module for Drupal 8
Start: In order to install the Metatag module for Drupal 8, the Token module is also required. Download:https://www.drupal.org/project/metatag Download:https://www.drupal.org/project/token Next: Download, install, & enable the required files at: admin/modules/install 
Available Drupal 8 Module Options for Metatag:
- (x) Metatag – Manage meta tags for all entities.
- (x) Metatag Page Manager – Provides metatag support for Page Manager variants.
- (o) Metatag: App Links – Provides support for applinks.org meta tags.
- (x) Metatag: Dublin Core – Provides the fifteen Dublin Core Metadata Element Set 1.1 meta tags from the Dublin Core Metadata Institute.
- (o) Metatag: Dublin Core Advanced – Provides forty additional meta tags from the Dublin Core Metadata Institute.
- (x) Metatag: Facebook – A set of meta tags specially for controlling advanced functionality with Facebook.
- (x) Metatag:favicons – Provides support for many different favicons.
- Metatag: Google Custom Search Engine (CSE) – Provides support for meta tags used for Google Custom Search Engine.
- (o) Metatag: Google Plus – Provides support for Google’s Plus meta tags.
- (o) Metatag: hreflang – Provides support for the hreflang meta tag with some extra logic to simplify it.
- (x) Metatag: Mobile & UI Adjustments – Provides support for meta tags used to control the mobile browser experience.
- (x) Metatag: Open Graph – Provides support for Open Graph Protocol meta tags.
- Metatag: Open Graph Products – Provides additional Open Graph Protocol meta tags for describing products.
- (o) Metatag: Pinterest – Provides support for Pinterest’s custom meta tags.
- (x) Metatag: Twitter Cards – Provides support for Twitter’s Card meta tags.
- (x) Metatag: Verification – Verifies ownership of a site for search engines and other services.
- (x) Metatag: Views – Provides views integration for metatags.
Configuration: The modules in the Metatag collection can be sorted in three categories:
- Enable (Required): Metatag, Metatag Page Manager, Metatag: Dublin Core, Metatag: Facebook, Metatag: favicons, Metatag: Mobile & UI Adjustments, Metatag: Open Graph, Metatag: Twitter Cards, Metatag: Verification, & Metatag: Views.
- Enable Only If Needed: Metatag: App Links, Metatag: Dublin Core Advanced, Metatag: Google Custom Search Engine (CSE), Metatag: hreflang, Metatag: Open Graph Products, & Metatag: Pinterest.
- Do Not Enable:Metatag: Google Plus.
Finish: Only enabling the selected Metatag modules will simplify the SEO administration for different Content Types, Views, & Panels pages in Drupal 8 with social media thumbnails.
Step Two: Review the Configuration Settings for SEO Values
Start: The Metatag module offers an advanced configuration for SEO, including web page descriptions & keywords with options for Facebook & Twitter thumbnail image generation.
Note: When a link is shared from a Drupal 8 site (i.e. blog, product, or landing page), each URL should lead to an embedded social media image thumbnail shared on Facebook & Twitter.
Configuration: The shared link should also include an auto-generated title & page description that is used with the thumbnail image file on social media profile pages by specific sizes. 
Note: More information on generating image thumbnail sizes for social media is in Steps 3 & 4.
Testing: Browse to specific blog, article, or static landing pages & view the source code to see how Drupal 8 has output the metatags. Use the same image as the Teaser view in Drupal 8. Finish: Each page should have a unique image in multiple thumbnail sizes. Follow the directions in Step 3 below to generate custom Image Thumbnails for Facebook & Twitter.
Step Three: Set Custom Thumbnail Image Sizes for Displays
Start:Drupal 8 functionality can be used to auto-generate multiple Image Thumbnails for each web page that can be used to share URLs on Twitter & Facebook with anchor images. 
- Create an Image Thumbnail for Facebook with an image size of: 1200 px x 630 px
- Create an Image Thumbnail for Twitter with an image size of: 2:1 up to a max size of 4096 px x 4096 px (Recommended to use:880 px x 440 px)
Configuration: Save the settings and use the Token values in the Metatag page for display. 
Step Four: Set Image Tokens for Twitter & Facebook Shares
Start: Further background information from the Metatag module can be used as a reference for setting custom Image Thumbnail sizes for Token generated dynamic content & social media.
Facebook Open Graph – Image Sizes:
"The URL of an image which should represent the content. The image must be at least 200 x 200 pixels in size; 600 x 316 pixels is a recommended minimum size, and for best results use an image least1200 x 630 pixels in size. Supports PNG, JPEG and GIF formats. Should not be used if og:image:urlis used. Note: if multiple images are added many services (e.g. Facebook) will defaultto the largest image, not specifically the first one. Multiple values may be used, separated by a comma. Note: Tokens that return multiple values will be handled automatically. This will be able toextract the URLfrom an image field."
Twitter Cards:
The definition of a Twitter Card according to the Drupal 8 Metatag module:
"A setof meta tags specially for controlling the summaries displayed whencontentissharedon Twitter."
Twitter Card Types:
The available choices for Twitter Card type are:
- Summary Card
- Summary Card with large image
- Photo Card
- Gallery Card
- App Card
- Player Card
- Product Card
Configuration: Best practice is to choose “Summary Card with large image” unless there is a specific reason to use the other options with a content type, i.e. for publishing media files, e-commerce products, images, etc. to Twitter in a customized web/mobile application.
Rules for Twitter Card Metatag Generation in Drupal 8:
No other fields are required for a Summary card. Photo card requires the 'image' field. Media player card requires the 'title', 'description', 'media player URL', 'media player width', 'media player height' and 'image' fields. Summary Card with Large Image card requires the 'Summary' field and the 'image' field. Gallery Card requires all the 'Gallery Image' fields. App Card requires the 'iPhone app ID' field, the 'iPad app ID' field and the 'Google Play app ID' field. Product Card requires the 'description' field, the 'image' field, the 'Label 1' field, the 'Data 1' field, the 'Label 2' field and the 'Data 2' field.
Testing: The expected output in the Metatags of the content type or node/page is:
<title>Page Title. (Maximum length 60-70 characters)</title> <meta name="description" content="Page description. (No longer than 155 characters.)" /> <!-- Twitter Card data --> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:site" content="@user_name"> <meta name="twitter:title" content="Page Title"> <meta name="twitter:description" content="Page description (less than 200 characters)."> <meta name="twitter:creator" content="@author_handle"> <!-- Twitter summary card with large image must be at least 280x150px --> <meta name="twitter:image:src" content="http://www.example.com/image.jpg"> <!-- Open Graph data --> <meta property="og:title" content="Page Title" /> <meta property="og:type" content="blog" /> <meta property="og:url" content="http://www.example.com/" /> <meta property="og:image" content="http://example.com/image.jpg" /> <meta property="og:description" content="Meta Description" /> <meta property="og:site_name" content="Site Name" />
Finish: Test the Metatag settings on all blog, forum, article, product, etc. pages in the CMS until the expected output of Image Thumbnails is viewed in the code across all instances.
Step Five: Test the Image Settings for Each Content Type
Start: In the last step, copy the URL for specific pages to the Facebook & Twitter developer tools hosted online to build live previews of the Image Thumbnails & Page Descriptions.
Social Media URL Sharing – Testing Resources:
- Facebook URL Crawler:https://developers.facebook.com/tools/debug/
- Twitter Card Validator:https://cards-dev.twitter.com/validator
Testing: Use the links above to auto-test generation of social media descriptions & Image Thumbnails from Metatags on Drupal 8 websites to view the output for all pages as correct. 
Conclusion: Increase Social Media Visibility of D8 Content
Summary: Many web publishers neglect to build an Image Thumbnail & Page Description system for SEO in social media link sharing, losing the opportunity to maximize content value. Recommendation: Use the Metatag module for Drupal 8 with custom Image Thumbnail generation via Token for unique social media posts that support dynamic content at scale.
Check out these top 3 Drupal hosting services:
- Want to get top recommendations about best hosting? Just click this link!
