CINXE.COM
Perfect Your Facebook Link Previews with the Drupal Metatag Module
<!DOCTYPE html> <html lang="en" dir="ltr" prefix="content: http://purl.org/rss/1.0/modules/content/ dc: http://purl.org/dc/terms/ foaf: http://xmlns.com/foaf/0.1/ og: http://ogp.me/ns# rdfs: http://www.w3.org/2000/01/rdf-schema# schema: http://schema.org/ sioc: http://rdfs.org/sioc/ns# sioct: http://rdfs.org/sioc/types# skos: http://www.w3.org/2004/02/skos/core# xsd: http://www.w3.org/2001/XMLSchema# " class="page-blog"> <head> <meta charset="utf-8" /> <meta name="description" content="In a previous blog post and video, we looked at the code that controls the display of link previews on Facebook. This is outlined by Facebook's Open Graph protocol, where we modify the tags within the of our HTML web page to say what the title, description, image, and other info should appear in our preview. " /> <link rel="canonical" href="https://evolvingweb.com/blog/perfect-your-facebook-link-previews-drupal-metatag-module" /> <link rel="image_src" href="https://evolvingweb.com/sites/default/files/styles/ewsite8_social_image/public/2020-07/Drupal-Metatag-Module-banner.jpg?itok=sYsGi3ST" /> <meta property="og:site_name" content="Evolving Web" /> <meta property="og:type" content="article" /> <meta property="og:url" content="https://evolvingweb.com/blog/perfect-your-facebook-link-previews-drupal-metatag-module" /> <meta property="og:title" content="Perfect Your Facebook Link Previews with the Drupal Metatag Module" /> <meta property="og:description" content="In a previous blog post and video, we looked at the code that controls the display of link previews on Facebook. This is outlined by Facebook's Open Graph protocol, where we modify the tags within the of our HTML web page to say what the title, description, image, and other info should appear in our preview. " /> <meta property="og:image" content="https://evolvingweb.com/sites/default/files/styles/ewsite8_social_image/public/2020-07/Drupal-Metatag-Module-banner.jpg?itok=sYsGi3ST" /> <meta property="og:image:width" content="1200" /> <meta property="og:image:height" content="630" /> <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:site" content="@evolvingweb" /> <meta name="twitter:description" content="In a previous blog post and video, we looked at the code that controls the display of link previews on Facebook. This is outlined by Facebook's Open Graph protocol, where we modify the tags within the of our HTML web page to say what the title, description, image, and other info should appear in our preview. " /> <meta name="twitter:title" content="Perfect Your Facebook Link Previews with the Drupal Metatag Module" /> <meta name="twitter:creator" content="@evolvingweb" /> <meta name="twitter:image" content="https://evolvingweb.com/sites/default/files/styles/ewsite8_social_image/public/2020-07/Drupal-Metatag-Module-banner.jpg?itok=sYsGi3ST" /> <meta name="Generator" content="Drupal 10 (https://www.drupal.org)" /> <meta name="MobileOptimized" content="width" /> <meta name="HandheldFriendly" content="true" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta itemprop="acquia_lift:content_title" content="Perfect Your Facebook Link Previews with the Drupal Metatag Module" /> <meta itemprop="acquia_lift:content_type" content="blog" /> <meta itemprop="acquia_lift:page_type" content="node page" /> <meta itemprop="acquia_lift:context_language" content="en" /> <meta itemprop="acquia_lift:content_section" content="" /> <meta itemprop="acquia_lift:content_keywords" content="" /> <meta itemprop="acquia_lift:post_id" content="772" /> <meta itemprop="acquia_lift:content_uuid" content="57655ec4-d828-44dc-983e-9f74ff121ecb" /> <meta itemprop="acquia_lift:published_date" content="1595962382" /> <meta itemprop="acquia_lift:persona" content="" /> <meta itemprop="acquia_lift:engagement_score" content="1" /> <meta itemprop="acquia_lift:account_id" content="EVOLVINGWEB" /> <meta itemprop="acquia_lift:site_id" content="evolvingwebsite" /> <meta itemprop="acquia_lift:liftAssetsURL" content="https://builder.lift.acquia.com" /> <meta itemprop="acquia_lift:liftDecisionAPIURL" content="https://us-east-1-decisionapi.lift.acquia.com" /> <meta itemprop="acquia_lift:bootstrapMode" content="auto" /> <meta itemprop="acquia_lift:contentReplacementMode" content="trusted" /> <meta itemprop="acquia_lift:cdfVersion" content="1" /> <script src="https://builder.lift.acquia.com/lift.js" async></script> <link rel="icon" href="/themes/custom/ewsite9/favicon.ico" type="image/vnd.microsoft.icon" /> <link rel="alternate" hreflang="en" href="https://evolvingweb.com/blog/perfect-your-facebook-link-previews-drupal-metatag-module" /> <title>Perfect Your Facebook Link Previews with the Drupal Metatag Module</title> <link rel="apple-touch-icon" sizes="57x57" href="/themes/custom/ewsite9/favicons/apple-icon-57x57.png"> <link rel="apple-touch-icon" sizes="60x60" href="/themes/custom/ewsite9/favicons/apple-icon-60x60.png"> <link rel="apple-touch-icon" sizes="72x72" href="/themes/custom/ewsite9/favicons/apple-icon-72x72.png"> <link rel="apple-touch-icon" sizes="76x76" href="/themes/custom/ewsite9/favicons/apple-icon-76x76.png"> <link rel="apple-touch-icon" sizes="114x114" href="/themes/custom/ewsite9/favicons/apple-icon-114x114.png"> <link rel="apple-touch-icon" sizes="120x120" href="/themes/custom/ewsite9/favicons/apple-icon-120x120.png"> <link rel="apple-touch-icon" sizes="144x144" href="/themes/custom/ewsite9/favicons/apple-icon-144x144.png"> <link rel="apple-touch-icon" sizes="152x152" href="/themes/custom/ewsite9/favicons/apple-icon-152x152.png"> <link rel="apple-touch-icon" sizes="180x180" href="/themes/custom/ewsite9/favicons/apple-icon-180x180.png"> <link rel="icon" type="image/png" sizes="192x192" href="/themes/custom/ewsite9/favicons/android-icon-192x192.png"> <link rel="icon" type="image/png" sizes="32x32" href="/themes/custom/ewsite9/favicons/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="96x96" href="/themes/custom/ewsite9/favicons/favicon-96x96.png"> <link rel="icon" type="image/png" sizes="16x16" href="/themes/custom/ewsite9/favicons/favicon-16x16.png"> <link rel="manifest" href="/themes/custom/ewsite9/favicons/manifest.json"> <meta name="msapplication-TileColor" content="#050505"> <meta name="msapplication-TileImage" content="/themes/custom/ewsite9/favicons/ms-icon-144x144.png"> <meta name="theme-color" content="#FFFFFF"> <link rel="stylesheet" media="all" href="/sites/default/files/css/css_EckKgGO03jshZL782GQxjWGaj8ssmTi5WkU1mTsXuYE.css?delta=0&language=en&theme=ewsite9&include=eJxNTlsOgzAMu1Ahv9tpUB8ZdAskalIYt6dCG-Ijlu28rLsazhC8osNNs-ETRuLgqVPbKS_jZb94sc5vqDy32a-15gdSqeKp_0kXmE2teAFh4RXLzTFmsixuze0inNjPnCr9Pz-GKY8TtTK4mItUEw-KvsQJTtHFqtZCFBc5oS5ZBA1uvL-233oA1qRYgw" /> <link rel="stylesheet" media="all" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.1.0/styles/github.min.css" /> <link rel="stylesheet" media="all" href="//customer.cludo.com/css/templates/v1.1/essentials/cludo-search.min.css" /> <link rel="stylesheet" media="all" href="/sites/default/files/css/css_fSGOm-ChalFep4mIhFHM8na87e_i-cbamJg0JpugVfA.css?delta=3&language=en&theme=ewsite9&include=eJxNTlsOgzAMu1Ahv9tpUB8ZdAskalIYt6dCG-Ijlu28rLsazhC8osNNs-ETRuLgqVPbKS_jZb94sc5vqDy32a-15gdSqeKp_0kXmE2teAFh4RXLzTFmsixuze0inNjPnCr9Pz-GKY8TtTK4mItUEw-KvsQJTtHFqtZCFBc5oS5ZBA1uvL-233oA1qRYgw" /> <link rel="stylesheet" media="all" href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap" /> <link rel="stylesheet" media="all" href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap" /> <link rel="stylesheet" media="all" href="/sites/default/files/css/css_EbEF_iK7T1unaV-OeEjyseY5yR-WVbsSv48GmYKVeDE.css?delta=6&language=en&theme=ewsite9&include=eJxNTlsOgzAMu1Ahv9tpUB8ZdAskalIYt6dCG-Ijlu28rLsazhC8osNNs-ETRuLgqVPbKS_jZb94sc5vqDy32a-15gdSqeKp_0kXmE2teAFh4RXLzTFmsixuze0inNjPnCr9Pz-GKY8TtTK4mItUEw-KvsQJTtHFqtZCFBc5oS5ZBA1uvL-233oA1qRYgw" /> <!-- Google Tag Manager --> <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-THD3RB8');</script> <!-- End Google Tag Manager --> </head> <body class="path-node path-alias--blog-perfect-your-facebook-link-previews-drupal-metatag-module page-node-type-blog has-glyphicons"> <div class="dialog-off-canvas-main-canvas" data-off-canvas-main-canvas> <section class=""> <section class="hidden xl:block pt-[14px] pb-[13px] bg-neutral-400 dark:bg-dark"> <div class="container flex justify-end"> <div class="region region-navigation-top-bar navigation-top-bar flex items-center gap-8"> <section class="cludo-search-block-form block-topbar-cludosearchblock block clearfix" data-drupal-selector="cludo-search-block-form" id="block-topbar-cludosearchblock" aria-label="Cludo Search block"> <div id="csearch-form-wrapper" class="form-wrapper top"><form action="/blog/perfect-your-facebook-link-previews-drupal-metatag-module" method="post" id="cludo-search-block-form" accept-charset="UTF-8"> <div class="cludo-search-form" role="search"> <div class="form-item js-form-item form-type-textfield js-form-type-textfield form-item-search-keys js-form-item-search-keys form-group"> <label for="edit-search-keys" class="control-label">Enter the terms you wish to search for.</label> <input title="Enter the terms you wish to search for." autocomplete="off" placeholder="Search..." data-drupal-selector="edit-search-keys" class="form-text form-control" type="text" id="edit-search-keys" name="search_keys" value="" size="60" maxlength="128" /> </div> <button data-drupal-selector="edit-submit" class="button js-form-submit form-submit btn-primary btn icon-before" type="submit" id="edit-submit" name="op" value="Search"><span class="icon glyphicon glyphicon-search" aria-hidden="true"></span> Search</button><input autocomplete="off" data-drupal-selector="form-dk0kzfpahsaub4x-vez8jeysylztl9srzr8w9nit97w" type="hidden" name="form_build_id" value="form-dk0kZfPahSAUB4X-VEz8jEYSYlZtl9sRZR8W9Nit97w" /><input data-drupal-selector="edit-cludo-search-block-form" type="hidden" name="form_id" value="cludo_search_block_form" /> </div> </form> </div><a href="#" class="csearch-trigger action-open" aria-label="Show search field"><span class="icon glyphicon glyphicon-search" aria-hidden="true"></span></a><a href="#" class="csearch-trigger action-close hide" aria-label="Hide search field"><span class="icon icon-close" aria-hidden="true"></span></a> </section> <section class="language-switcher-language-url block-topbar-languageswitcher block clearfix" id="block-topbar-languageswitcher" role="navigation" aria-label="Language switcher"> <ul class="links"><li data-drupal-link-system-path="node/772" class="fr is-active"><a href="/fr/blog/perfect-your-facebook-link-previews-drupal-metatag-module" class="language-link" hreflang="fr" data-drupal-link-system-path="node/772">fr</a></li></ul> </section> </div> </div> </section> <header class="navbar header--main navbar-default xl:dark:bg-dark" id="navbar"> <div class="container"> <a href="#main-content" class="visually-hidden focusable skip-link">Skip to main content</a> <div class="navbar-header-wrapper"> <div class="navbar-header relative"> <div class="region region-navigation"> <a class="logo" href="/" title="Home" rel="home"> <img src="/themes/custom/ewsite9/logo.svg" alt="Evolving Web" height="240" class="block dark:block xl:dark:hidden" /> <img src="/themes/custom/ewsite9/logo--white.svg" alt="Evolving Web" height="240" class="hidden max-xl:dark:hidden dark:block" /> </a> </div> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar top-bar"></span> <span class="icon-bar middle-bar"></span> <span class="icon-bar bottom-bar"></span> </button> </div> <div class="navbar-collapse collapse"> <div class="region region-navigation-collapsible container"> <nav id="block-ewsite9-main-menu" class="main-menu" aria-label="Main menu"> <div id="block-ewsite9-main-menu-heading" class="sr-only">Main menu</div> <ul class="menu nav navbar-nav"> <li class="expanded dropdown"> <a href="/about" class="dropdown-toggle disabled depth--0 depth--0-1" data-target="#" data-toggle="dropdown"> <span class="title leading-none">About</span> <span class="flex items-center pl-2 relative xl:hidden before:content-[''] before:block before:w-[0.1rem] before:h-[1.375rem] before:bg-white/30 before:absolute before:left-0"> <button class="p-0 m-0 border-0 w-[1.6875rem] h-[1.6875rem] text-white bg-transparent rounded-full flex justify-center items-center text-2xl relative z-10" type="button" data-toggle="custom-collapse" data-target="container--1-1" > <i class="icon icon-chevron-down top-[0.2rem] transition-transform origin-center"></i> <span class="sr-only">Toggle submenu</span> </button> </span> </a> <ul id="container--1-1" class="menu submenu list-unstyled custom-collapse"> <li> <a href="/about" class="depth--1 depth--1-1" aria-label="A link in header to Meet Evolving Web page" data-drupal-link-system-path="node/821">Meet Evolving Web</a> </li> <li> <a href="https://careers.evolvingweb.com/en" class="btn_main_nav depth--1 depth--1-2" target="_blank" aria-label="A link in header to Careers page">Careers</a> </li> <li> <a href="/why-drupal" class="btn_main_nav depth--1 depth--1-3" aria-label="A link in header to Why Drupal? page" data-drupal-link-system-path="node/893">Why Drupal?</a> </li> <li> <a href="/wordpress-web-development" class="btn_main_nav depth--1 depth--1-4" aria-label="A link in header to WordPress Web Development page" data-drupal-link-system-path="node/1131">WordPress Web Development</a> </li> <li> <a href="/our-partners" class="btn_main_nav depth--1 depth--1-5" aria-label="A link in header to Our Partners page" data-drupal-link-system-path="node/1091">Our Partners</a> </li> </ul> </li> <li> <a href="/projects" class="btn_main_nav depth--0 depth--0-2" aria-label="A link in header to Projects page" data-drupal-link-system-path="node/1056">Projects</a> </li> <li class="expanded dropdown"> <a href="/services" class="dropdown-toggle disabled depth--0 depth--0-3" data-target="#" data-toggle="dropdown"> <span class="title leading-none">Services</span> <span class="flex items-center pl-2 relative xl:hidden before:content-[''] before:block before:w-[0.1rem] before:h-[1.375rem] before:bg-white/30 before:absolute before:left-0"> <button class="p-0 m-0 border-0 w-[1.6875rem] h-[1.6875rem] text-white bg-transparent rounded-full flex justify-center items-center text-2xl relative z-10" type="button" data-toggle="custom-collapse" data-target="container--1-3" > <i class="icon icon-chevron-down top-[0.2rem] transition-transform origin-center"></i> <span class="sr-only">Toggle submenu</span> </button> </span> </a> <ul id="container--1-3" class="menu submenu list-unstyled custom-collapse"> <li> <a href="/services" class="depth--1 depth--1-1" aria-label="A link in header to Our Services page" data-drupal-link-system-path="node/823">Our Services</a> </li> <li> <a href="/audit-services" class="btn_main_nav depth--1 depth--1-2" aria-label="A link in header to Audit Services page" data-drupal-link-system-path="node/1205">Audit Services</a> </li> <li> <a href="/digital-strategy-services" class="btn_main_nav depth--1 depth--1-3" aria-label="A link in header to Strategy page" data-drupal-link-system-path="node/916">Strategy</a> </li> <li> <a href="/web-design-services" class="btn_main_nav depth--1 depth--1-4" aria-label="A link in header to Design page" data-drupal-link-system-path="node/914">Design</a> </li> <li> <a href="/development-technology" class="btn_main_nav depth--1 depth--1-5" aria-label="A link in header to Development & Technology page" data-drupal-link-system-path="node/932">Development & Technology</a> </li> <li> <a href="/marketing" class="btn_main_nav depth--1 depth--1-6" aria-label="A link in header to Marketing page" data-drupal-link-system-path="node/1196">Marketing</a> </li> <li> <a href="/maintenance-support-services" class="btn_main_nav depth--1 depth--1-7" aria-label="A link in header to Maintenance & Support page" data-drupal-link-system-path="node/917">Maintenance & Support</a> </li> <li> <a href="/drupal-upgrades-and-migration-services" class="btn_main_nav depth--1 depth--1-8" aria-label="A link in header to Drupal Upgrades and Migration Services page" data-drupal-link-system-path="node/1054">Drupal Upgrades and Migration Services</a> </li> <li> <a href="/content-strategy-seo" class="btn_main_nav depth--1 depth--1-9" aria-label="A link in header to Content Strategy & SEO page" data-drupal-link-system-path="node/1213">Content Strategy & SEO</a> </li> </ul> </li> <li class="expanded dropdown"> <a href="/industries" class="dropdown-toggle disabled depth--0 depth--0-4" data-target="#" data-toggle="dropdown"> <span class="title leading-none">Industries</span> <span class="flex items-center pl-2 relative xl:hidden before:content-[''] before:block before:w-[0.1rem] before:h-[1.375rem] before:bg-white/30 before:absolute before:left-0"> <button class="p-0 m-0 border-0 w-[1.6875rem] h-[1.6875rem] text-white bg-transparent rounded-full flex justify-center items-center text-2xl relative z-10" type="button" data-toggle="custom-collapse" data-target="container--1-4" > <i class="icon icon-chevron-down top-[0.2rem] transition-transform origin-center"></i> <span class="sr-only">Toggle submenu</span> </button> </span> </a> <ul id="container--1-4" class="menu submenu list-unstyled custom-collapse"> <li> <a href="/industries" class="depth--1 depth--1-1" aria-label="A link in header to All Industries page" data-drupal-link-system-path="node/1085">All Industries</a> </li> <li> <a href="/website-development-government-agencies" class="btn_main_nav depth--1 depth--1-2" aria-label="A link in header to Government & Municipalities page" data-drupal-link-system-path="node/902">Government & Municipalities</a> </li> <li> <a href="/higher-education-website-design-development-and-training" class="btn_main_nav depth--1 depth--1-3" aria-label="A link in header to Higher Education page" data-drupal-link-system-path="node/887">Higher Education</a> </li> <li> <a href="/website-development-non-governmental-organizations-or-ngos" class="btn_main_nav depth--1 depth--1-4" aria-label="A link in header to Non-profits page" data-drupal-link-system-path="node/906">Non-profits</a> </li> <li> <a href="/web-design-development-hospitals-and-healthcare-websites" class="btn_main_nav depth--1 depth--1-5" aria-label="A link in header to Healthcare page" data-drupal-link-system-path="node/901">Healthcare</a> </li> <li> <a href="/enterprise" class="btn_main_nav depth--1 depth--1-6" aria-label="A link in header to Enterprise page" data-drupal-link-system-path="node/1212">Enterprise</a> </li> </ul> </li> <li class="expanded dropdown"> <a href="/training" class="dropdown-toggle disabled depth--0 depth--0-5" data-target="#" data-toggle="dropdown"> <span class="title leading-none">Training</span> <span class="flex items-center pl-2 relative xl:hidden before:content-[''] before:block before:w-[0.1rem] before:h-[1.375rem] before:bg-white/30 before:absolute before:left-0"> <button class="p-0 m-0 border-0 w-[1.6875rem] h-[1.6875rem] text-white bg-transparent rounded-full flex justify-center items-center text-2xl relative z-10" type="button" data-toggle="custom-collapse" data-target="container--1-5" > <i class="icon icon-chevron-down top-[0.2rem] transition-transform origin-center"></i> <span class="sr-only">Toggle submenu</span> </button> </span> </a> <ul id="container--1-5" class="menu submenu list-unstyled custom-collapse"> <li> <a href="/training" class="depth--1 depth--1-1" aria-label="A link in header to Training Catalogue page" data-drupal-link-system-path="node/824">Training Catalogue</a> </li> <li> <a href="/multi-course-drupal-training-pathways" class="btn_main_nav depth--1 depth--1-2" aria-label="A link in header to Training Packages page" data-drupal-link-system-path="node/935">Training Packages</a> </li> <li> <a href="/drupal-training-designed-your-team" class="btn_main_nav depth--1 depth--1-3" aria-label="A link in header to Custom Training page" data-drupal-link-system-path="node/1129">Custom Training</a> </li> </ul> </li> <li class="active expanded dropdown"> <a href="/drupal-and-web-development-resources" class="dropdown-toggle disabled depth--0 depth--0-6" data-target="#" data-toggle="dropdown"> <span class="title leading-none">Resources</span> <span class="flex items-center pl-2 relative xl:hidden before:content-[''] before:block before:w-[0.1rem] before:h-[1.375rem] before:bg-white/30 before:absolute before:left-0"> <button class="p-0 m-0 border-0 w-[1.6875rem] h-[1.6875rem] text-white bg-transparent rounded-full flex justify-center items-center text-2xl relative z-10" type="button" data-toggle="custom-collapse" data-target="container--1-6" > <i class="icon icon-chevron-down top-[0.2rem] transition-transform origin-center"></i> <span class="sr-only">Toggle submenu</span> </button> </span> </a> <ul id="container--1-6" class="menu submenu list-unstyled custom-collapse"> <li class="active"> <a href="/blog" class="btn_main_nav depth--1 depth--1-1" aria-label="A link in header to Blog page" data-drupal-link-system-path="node/151">Blog</a> </li> <li> <a href="/drupal-and-web-development-resources" class="btn_main_nav depth--1 depth--1-2" title="Resources" aria-label="A link in header to Resource Library page" data-drupal-link-system-path="node/867">Resource Library</a> </li> </ul> </li> </ul> </nav> <section class="language-switcher-language-url block-collapsable-languageswitcher block clearfix" id="block-collapsable-languageswitcher" role="navigation" aria-label="Language switcher"> <ul class="links"><li data-drupal-link-system-path="node/772" class="fr is-active"><a href="/fr/blog/perfect-your-facebook-link-previews-drupal-metatag-module" class="language-link" hreflang="fr" data-drupal-link-system-path="node/772">fr</a></li></ul> </section> <section class="cludo-search-block-form block-collapsable-cludosearchblock block clearfix" data-drupal-selector="cludo-search-block-form-2" id="block-collapsable-cludosearchblock" aria-label="Cludo Search block"> <div id="csearch-form-wrapper" class="form-wrapper top"><form action="/blog/perfect-your-facebook-link-previews-drupal-metatag-module" method="post" id="cludo-search-block-form--2" accept-charset="UTF-8"> <div class="cludo-search-form" role="search"> <div class="form-item js-form-item form-type-textfield js-form-type-textfield form-item-search-keys js-form-item-search-keys form-group"> <label for="edit-search-keys--2" class="control-label">Enter the terms you wish to search for.</label> <input title="Enter the terms you wish to search for." autocomplete="off" placeholder="Search..." data-drupal-selector="edit-search-keys" class="form-text form-control" type="text" id="edit-search-keys--2" name="search_keys" value="" size="60" maxlength="128" /> </div> <button data-drupal-selector="edit-submit" class="button js-form-submit form-submit btn-primary btn icon-before" type="submit" id="edit-submit--2" name="op" value="Search"><span class="icon glyphicon glyphicon-search" aria-hidden="true"></span> Search</button><input autocomplete="off" data-drupal-selector="form-wvetepmcxmo6i4xveuystfy0mwor-hre6fvfjicu1g4" type="hidden" name="form_build_id" value="form-wvETePMcxmo6i4xvEUYStfY0mWOR-Hre6fvFJIcU1G4" /><input data-drupal-selector="edit-cludo-search-block-form-2" type="hidden" name="form_id" value="cludo_search_block_form" /> </div> </form> </div><a href="#" class="csearch-trigger action-open" aria-label="Show search field"><span class="icon glyphicon glyphicon-search" aria-hidden="true"></span></a><a href="#" class="csearch-trigger action-close hide" aria-label="Hide search field"><span class="icon icon-close" aria-hidden="true"></span></a> </section> </div> </div> </div> </div> </header> </section> <a id="main-content" class="main-content-anchor"></a> <div class="header-container"> <div class="region region-header"> <section id="block-ewsite9-ewsiteheader" class="ewsiteheader block clearfix" aria-label="EWSite Header"> <div class="hero--blog " > <div class="container"> <div class="region region-header"> <div class="region-header__content"> <h2 class="hero__subtitle">Blog</h2> <h1 class="page-header ">Perfect Your Facebook Link Previews with the Drupal Metatag Module</h1> <span class="byline">Jul 28, 2020 <span class="dot-span">·</span> by Trevor Kjorlien</span> </div> </div> </div> <div class="background-image"> <div class="field field--name-field-media-image field--type-image field--label-hidden field--item"> <picture class="responsive-image"> <!--[if IE 9]><video style="display: none;"><![endif]--> <source srcset="/sites/default/files/styles/ew9_default_non_cropped_image_desktop/public/2020-07/Drupal-Metatag-Module-banner.jpg.jpeg?itok=jbSPbgt4 1x" media="all and (min-width: 992px)" type="image/jpeg" width="2680" height="1541"/> <source srcset="/sites/default/files/styles/ew9_default_non_cropped_image_mobile/public/2020-07/Drupal-Metatag-Module-banner.jpg.jpeg?itok=rz0QzFKV 1x" media="all and (min-width: 375px)" type="image/jpeg" width="2680" height="1541"/> <!--[if IE 9]></video><![endif]--> <img loading="lazy" src="/sites/default/files/styles/ew9_default_non_cropped_image_desktop/public/2020-07/Drupal-Metatag-Module-banner.jpg.jpeg?itok=jbSPbgt4" width="2680" height="1541" alt="" typeof="foaf:Image" class="img-responsive" /> </picture> </div> </div> </div> </section> </div> </div> <div class="main-wide "> <div role="main" class="main-container container js-quickedit-main-content"> <div class="region region-info-messages"> <div data-drupal-messages-fallback class="hidden"></div> </div> <div class="row"> </div> <div class="row"> <div class="col-sm-6 col-lg-8 col-xl-9 components-container"> <div class="region region-content"> <article about="/blog/perfect-your-facebook-link-previews-drupal-metatag-module" typeof="schema:Article" class="checklist-ul-style"> <span property="schema:name" content="Perfect Your Facebook Link Previews with the Drupal Metatag Module" class="hidden"></span> <div> <div property="schema:text" class="field field--name-body field--type-text-with-summary field--label-hidden field--item"><p>In a <a href="/blog/preview-content-sharing-facebook-sharing-debugger">previous blog post and video</a>, we looked at the code that controls the display of link previews on Facebook. This is outlined by Facebook's <a href="https://ogp.me/">Open Graph protocol</a>, where we modify the <code><meta></code> tags within the <code><head></code> of our HTML web page to say what the title, description, image, and other info should appear in our preview. </p> <p>In that post, I showed how to manually modify those HTML tags. While it's good to learn what's going on behind the scenes, in reality, it would be kind of crazy to ask your content editors to modify this code for each piece of content they add. In fact, if you're using a CMS, it would be impossible for them to do so. </p> <p>So instead, let's allow the CMS to make our jobs easier. In this video, let's look at the <a href="https://www.drupal.org/project/metatag">Drupal Metatag module</a> and the included Metatag: Open Graph module to save us time and make our job easier. At the end of this, we will have added <code><meta></code> tags in the <code><head></code> of our article to reflect how we want our preview on Facebook to appear. </p> <p><iframe allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen frameborder="0" height="315" src="https://www.youtube.com/embed/ttqVerZfWE0" width="560"></iframe></p> <h2>Install the Modules</h2> <p>First, let's download the Metatag module. Inside of this module are many sub-modules, each of which is designed to handle the expected meta tags for other social networks, search engines and products. </p> <p>For this tutorial, you'll only need to enable the Metatag and Metatag: Open Graph modules. Although we are going to be dealing with Facebook link previews, we will not require the Metatag: Facebook module for this tutorial.</p> <h2>Create Metatag Field on Content Type</h2> <p>In order to give your editors the ability to change the meta information that gets printed to the <code><head></code>, we need to add a field to our content type. </p> <ul> <li>Go to Structure > Content Types > Manage Fields on the content type you want to affect</li> <li>Click Add Field > General > Meta tags</li> <li>Give your field a name ('Metatags' will do)</li> <li>Save Settings </li> </ul> <p>Now when we go to add or edit a piece of content of this type, we have a collapsible 'Metatags' group on the right hand side of the page. It has a few different sections: </p> <ul> <li>Basic Tags</li> <li>Advanced</li> <li>Open Graph </li> </ul> <p>We can write inside of these fields and when we do, this will add the <code><meta></code> tags to our page. This gives your editors control over what gets printed in those tags and (eventually) what can be shown in the Facebook link preview. </p> <p>But we can also set some defaults. For instance, there's a lot options in the 'Advanced' section. Some of these fields we may never use, so let's turn them off and configure some others.</p> <h2>Configuring our Metatag Field</h2> <p>A new option appears on the Configuration page when we go to the Search and Metatag section. Click that and go to the Settings tab at the top of the page.</p> <h3>Hiding the Advanced Section</h3> <p>On that page, we get a list of different entities, including the content type that we just added the field to. Opening that section, it shows the Basic, Advanced, and Open Graph areas we saw before. Because none of them are checked, they all appear, but if we check the boxes next to Basic and Open Graph, now only those two sections will appear on our content type.</p> <h3>Hard-Coding Defaults</h3> <p>There are some Metatag fields that we probably don't expect our editors to fill out or have to change. So, we can set the default. For example, if we have an Article content type, we probably want to set the Facebook Open Graph <code>og:type</code> value to article. To change this: </p> <ul> <li>Go to Configuration > Search and Metatag</li> <li>Scroll to the Content section and click Edit</li> <li>Open the Open Graph section and in the Content type field, type article</li> <li>Click Save </li> </ul> <p>Now, the <code>og:type</code> meta tag will be filled in automatically with the value article. This works for a value that remains constant, but what about fields that change on every piece of content, like the Title field? </p> <h3>Setting Dynamic Defaults with the Token Module</h3> <p>First, install and enable the Token module. </p> <p>To set the Facebook Open Graph tags to match what we add in our content, we have to use the Token browser at the top of the page to select the field value we need. In this example, we'll set the <code>og:title</code> to match the node title: </p> <ul> <li>Open the Open Graph section and click on the Title field, making sure your text cursor is on the field</li> <li>Scroll to the top of the page and click Browse available tokens. A draggable modal window will appear</li> <li>Open the Nodes section</li> <li>Click on <code>[node:title]</code></li> </ul> <p>This will insert <code>[node:title]</code>in the Title field, automatically putting in that piece of content's Title. You can repeat this for other fields.</p> <h2>A Note on Images</h2> <p>One of the Open Graph tags you probably want to automatically fill in is the og:image field. When configuring the default for this with the Token module, it might be tempting just to click on the image field on your content type, such as <code>[node:field_image]</code>.</p> <p>This won't work. We need the URL of the image, and this token does not provide that. </p> <p>Instead, you have to open the triangle beside the field, which reveals the different available Image Styles. Open the appropriate style, and get the URL of it, which appears like so: <code>[node:field_image:large:url]</code>.</p> <h2>Wrapping Up</h2> <p>Setting up sensible defaults for your content editors is a great idea, and the Metatag module lets you get very specific with the data. And of course, these fields are editable on the content in case your editors do need to override them.</p> <p>To get more in-depth web development training, check out our <a href="/training" tabindex="-1">training page</a>. </p> </div> <div class="field field--name-field-articlecategory field--type-entity-reference field--label-above"> <div class="field--label">Category</div> <div class="field--item"><a href="/category/drupal-web-development" hreflang="en">Drupal and Web Development</a></div> </div> <div class="field field--name-field-tags field--type-entity-reference field--label-above"> <div class="field--label">Tags</div> <div class="field--items"> <div class="field--item"><a href="/tags/tutorial" property="schema:about" hreflang="en">Tutorial</a></div> <div class="field--item"><a href="/tags/modules-0" property="schema:about" hreflang="en">Modules</a></div> <div class="field--item"><a href="/tags/drupal" property="schema:about" hreflang="en">Drupal</a></div> <div class="field--item"><a href="/tags/seo" property="schema:about" hreflang="en">SEO</a></div> <div class="field--item"><a href="/tags/social-media" property="schema:about" hreflang="en">Social Media</a></div> <div class="field--item"><a href="/tags/content-strategy" property="schema:about" hreflang="en">Content Strategy</a></div> </div> </div> </div> </article> </div> </div> <aside class="col-sm-6 col-lg-4 col-xl-3"> <div class="region region-sidebar-second"> <section class="views-element-container views-block-team-member-profile-block-2-2 block clearfix" id="block-ewsite9-views-block-team-member-profile-block-2-2" aria-label="About the Author"> <div class="form-group"> <div class="view view-team-member-profile view-id-team_member_profile view-display-id-block_2 js-view-dom-id-8124c927df2e687bb3bd89fffe4719fb760ad26cfb6675cc95073223b5c4c276"> <div class="view-content"> <div class="views-row"><div class="views-field views-field-nothing"><div class="field-content"><div class="col-md-12 member-photo"> <img src="https://evolvingweb.com/sites/default/files/styles/ewsite8_team_mem/public/2020-01/Trevor-Circle.png.jpeg?itok=O_XEJgD5" width="300" height="300" alt="Photo of Trevor" loading="lazy" typeof="Image" class="img-responsive" /> </div> <div class="col-md-12"> <h2>About the author, Trevor Kjorlien</h2> <div class="member-intro"><p>Drupal trainer Trevor has worked as a web designer and developer since 2007. He started using Drupal in 2008.</p> </div> <a class="btn btn-link" href="https://evolvingweb.com/about/trevor-kjorlien">More articles by Trevor Kjorlien<span class="arrow"></span></a> </div></div></div></div> </div> </div> </div> </section> </div> </aside> </div> </div> </div> <footer class="footer footer--alone bg-dark border-0 m-0 p-0 text-white" data-effect="text-mask" data-effect-config="{'makeContainer': 1, 'maskSize': 20}" > <div class="container relative overflow-hidden"> <div class="row footer__container lg:pt-10 pb-11 xl:pt-24 xl:pb-[7.5rem]" data-mask> <div class="col-xl-4 elevate"> <div class="region region-footer-left"> <section id="block-ewsite9-logo" class="logo block clearfix" aria-label="Logo"> <a href="https://evolvingweb.com/" title="Home" rel="Home"> <img src="/themes/custom/ewsite9/logo--white.svg" alt="Home" /> </a> </section> <div id="block-ewsite9-setyourstoryinmotion" class="setyourstoryinmotion block block--contact-us block-block-content block-block-content2c9f8a8b-815e-4f4a-a82c-cca97c377c3f mt-10 pb-10 xl:mt-16 xl:pb-0" aria-label="Set Your Story in Motion"> <div class="field field--name-field-block__body field--type-text-long field--label-hidden field--item"><p>Set Your Story<br>in Motion</p> </div> <div class="field field--name-field-block__cta field--type-link field--label-hidden flex items-center leading-[2.25rem] text-[1.375rem] field--item"> <a href="/contact">Contact Us</a> <i class="icon icon-arrow-right ml-7 text-primary"></i> </div> </div> </div> </div> <div class="col-xl-4 mb-12 xl:mb-0 mt-7 xl:mt-0 xl:pt-5"> <div class="region region-footer-center"> <section id="block-ewsite9-footerblockcontact" class="footerblockcontact block clearfix" aria-label="Contact Information"> <div class="field field--name-body field--type-text-with-summary field--label-hidden field--item"><ul> <li><a href="tel:514-844-4930"><img src="/themes/custom/ewsite9/images/icons/sprite/phone.svg" alt="Phone" width="25" height="24" loading="lazy"> <span>514-844-4930</span></a></li> <li><a href="/cdn-cgi/l/email-protection#d0a3b1bcb5a390b5a6bfbca6b9beb7a7b5b2feb3bfbd"><img src="/themes/custom/ewsite9/images/icons/sprite/envelope.svg" alt="Email" width="25" height="24" loading="lazy"> sales<span>@evolvingweb.com </span></a></li> <li><a href="https://goo.gl/maps/D6ssaDGpxdoEZjnE6" target="_blank"><img src="/themes/custom/ewsite9/images/icons/sprite/marker.svg" alt="Visit us" width="25" height="24" loading="lazy"> <span>Visit us in Old Montreal</span></a></li> <li class="no-icon small"><span>304 Notre-Dame Est Suite 401</span> <span>Montreal, QC H2Y 1C7 Canada</span></li> </ul> </div> </section> </div> </div> <div class="col-xl-4 elevate xl:pt-5"> <div class="region region-footer-right"> <section class="menu"> <nav id="block-ewsite9-footer" class="footer" aria-label="Company menu"> <h2 id="block-ewsite9-footer-heading" class="visually-hidden">Company menu</h2> <ul class="menu menu--footer nav" data-mask-activator> <li class="first"> <a href="/services" class="btn_footer_nav" aria-label="A link in footer to Services page" data-drupal-link-system-path="node/823">Services</a> </li> <li> <a href="/training" class="btn_footer_nav" aria-label="A link in footer to Training page" data-drupal-link-system-path="node/824">Training</a> </li> <li> <a href="/blog" class="btn_footer_nav" aria-label="A link in footer to Blog page" data-drupal-link-system-path="node/151">Blog</a> </li> <li> <a href="https://careers.evolvingweb.com/" class="btn_footer_nav" aria-label="A link in footer to Careers page">Careers</a> </li> <li class="last"> <a href="/contact" class="btn_footer_nav" aria-label="A link in footer to Contact page" data-drupal-link-system-path="node/609">Contact</a> </li> </ul> </nav> </section> </div> </div> </div> </div> <div class="pb-11 xl:bg-dark-100 xl:flex xl:min-h-[4.375rem] xl:items-center xl:pb-0"> <div class="container"> <div class="row footer__after"> <div class="footer__copy col mt-6 xl:mt-0">© Evolving Web 2024</div> <div class="col-xl-4"> <div class="region region-after-footer"> <section id="block-ewsite9-socialmedia" class="socialmedia block social-media" aria-label="Social Links"> <div class="field field--name-body field--type-text-with-summary field--label-hidden field--item"><ul class="footer__social"> <li> <a href="https://www.linkedin.com/company/evolving-web/" target="_blank" class="btn btn--rounded"><br> <span class="sr-only">LinkedIn</span><br> <i class="icon icon-linkedin"></i><br> </a> </li> <li> <a href="https://www.facebook.com/Evolving-Web-321255477898272" target="_blank" class="btn btn--rounded"><br> <span class="sr-only">Facebook</span><br> <i class="icon icon-facebook"></i><br> </a> </li> <li> <a href="https://www.drupal.org/evolving-web" target="_blank" class="btn btn--rounded"><br> <span class="sr-only">Drupal.org</span><br> <i class="icon icon-drupal"></i><br> </a> </li> <li> <a href="https://instagram.com/evolving_web" target="_blank" class="btn btn--rounded"><br> <span class="sr-only">Instagram</span><br> <i class="icon icon-instagram"></i><br> </a> </li> <li> <a href="https://www.youtube.com/channel/UCRn6hlUZ3l8ZkrNoBRCleNQ" target="_blank" class="btn btn--rounded"><br> <span class="sr-only">YouTube</span><br> <i class="icon icon-youtube"></i><br> </a> </li> </ul> </div> </section> </div> </div> </div> </div> </div> </footer> </div> <script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script><script type="application/json" data-drupal-selector="drupal-settings-json">{"path":{"baseUrl":"\/","pathPrefix":"","currentPath":"node\/772","currentPathIsAdmin":false,"isFront":false,"currentLanguage":"en"},"pluralDelimiter":"\u0003","suppressDeprecationErrors":true,"data":{"extlink":{"extTarget":true,"extTargetNoOverride":false,"extNofollow":true,"extNoreferrer":true,"extFollowNoOverride":false,"extClass":"0","extLabel":"(link is external)","extImgClass":false,"extSubdomains":true,"extExclude":"","extInclude":"","extCssExclude":"","extCssExplicit":"","extAlert":false,"extAlertText":"This link will take you to an external web site. We are not responsible for their content.","mailtoClass":"0","mailtoLabel":"(link sends email)","extUseFontAwesome":false,"extIconPlacement":"append","extFaLinkClasses":"fa fa-external-link","extFaMailtoClasses":"fa fa-envelope-o","whitelistedDomains":[]}},"bootstrap":{"forms_has_error_value_toggle":1,"tooltip_enabled":1,"tooltip_animation":1,"tooltip_container":"body","tooltip_delay":"0","tooltip_html":0,"tooltip_placement":"auto left","tooltip_selector":"","tooltip_trigger":"hover","modal_animation":1,"modal_backdrop":"true","modal_focus_input":1,"modal_keyboard":1,"modal_select_text":1,"modal_show":1,"modal_size":"","popover_enabled":1,"popover_animation":1,"popover_auto_close":1,"popover_container":"body","popover_content":"","popover_delay":"0","popover_html":0,"popover_placement":"right","popover_selector":"","popover_title":"","popover_trigger":"click"},"cludo_search":{"cludo_searchJS":{"customerId":"10000581","engineId":"10002461","searchUrl":"https:\/\/evolvingweb.com\/search","disableAutocomplete":false,"hideResultsCount":false,"hideSearchDidYouMean":false,"hideSearchFilters":false,"language":"en"}},"ajaxTrustedUrl":{"form_action_p_pvdeGsVG5zNF_XLGPTvYSKCf43t8qZYSwcfZl2uzM":true},"user":{"uid":0,"permissionsHash":"e0e7fa1bf9e5fcd1b060db70b3dedaf7983fbf1ec3322d918efde64961946851"}}</script> <script src="https://cdnjs.cloudflare.com/polyfill/v3/polyfill.min.js?features=NodeList.prototype.forEach%2CElement.prototype.classList%2CElement.prototype.dataset"></script> <script src="/sites/default/files/js/js_yi9Xdyfv75mxK38THDkxyPdQjNiMlf17dkhatLdfQCk.js?scope=footer&delta=1&language=en&theme=ewsite9&include=eJxNTlsOgzAMu1Ahv9tpUB8ZdAskalIYt6dCG-Ijlu28rLsazhC8osNNs-ETRuLgqVPbKS_jZb94sc5vqDy32a-15gdSqeKp_0kXmE2teAFh4RXLzTFmsixuze0inNjPnCr9Pz-GKY8TtTK4mItUEw-KvsQJTtHFqtZCFBc5oS5ZBA1uvL-233oA1qRYgw"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.1.0/highlight.min.js"></script> <script src="/sites/default/files/js/js_piEMmrv38lN_sBQ9YdcZ_3oqid2wFUSiUcNv1IdkW_4.js?scope=footer&delta=3&language=en&theme=ewsite9&include=eJxNTlsOgzAMu1Ahv9tpUB8ZdAskalIYt6dCG-Ijlu28rLsazhC8osNNs-ETRuLgqVPbKS_jZb94sc5vqDy32a-15gdSqeKp_0kXmE2teAFh4RXLzTFmsixuze0inNjPnCr9Pz-GKY8TtTK4mItUEw-KvsQJTtHFqtZCFBc5oS5ZBA1uvL-233oA1qRYgw"></script> <script src="//api.cludo.com/scripts/xdomain.js" slave="//api.cludo.com/proxy.html"></script> <script src="//customer.cludo.com/scripts/bundles/search-script.min.js"></script> <script src="/sites/default/files/js/js_Z9d6GnWnPny9NbxkpTNwk_MI2nja3We3ZZCVBcLXm_w.js?scope=footer&delta=6&language=en&theme=ewsite9&include=eJxNTlsOgzAMu1Ahv9tpUB8ZdAskalIYt6dCG-Ijlu28rLsazhC8osNNs-ETRuLgqVPbKS_jZb94sc5vqDy32a-15gdSqeKp_0kXmE2teAFh4RXLzTFmsixuze0inNjPnCr9Pz-GKY8TtTK4mItUEw-KvsQJTtHFqtZCFBc5oS5ZBA1uvL-233oA1qRYgw"></script> <!-- Google Tag Manager (noscript) --> <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-THD3RB8" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript> <!-- End Google Tag Manager (noscript) --> </body> </html>