Upgrade Your Drupal Skills

We trained 1,000+ Drupal Developers over the last decade.

See Advanced Courses NAH, I know Enough
Nov 01 2021
Nov 01

Drupal SEO Series using Metatag

The Metatag module allows you to configure structured metadata such as meta descriptions and meta keywords for your Drupal website. You can do this at the global level, on a per content type basis, per node basis and even on a per view page basis.

In this tutorial we will show you how to:

  • Install the Meta Tag module
  • Configure meta tags for a content type
  • Override meta tags on a per node basis
  • Override meta tags for View pages
  • Have more granular permissions for meta tags fields
  • Specify meta tags for different favicons

Table of Contents

Getting Started

This module can simply be installed with Composer.

Using Composer:

composer require drupal/metatag

Once downloaded go to Extend and install just the Metatag module.

Once the Metatag module has been installed, if you go to /admin/config/search/metatag you will be presented with the main configuration screen which looks like this:

From here you can configure the metatags for your entire website (Global), or just for the front page, or on a per content type basis. We will now explain what each of these configurations mean.

Global – Here you can configure the default meta tags for all pages. What you define here will be applied to all pages unless it is overridden by configuring one of the other sections.

Front Page – Here you can configure the meta tags specifically for the front page only. As mentioned above, these settings will override the Global settings.

Content – Here you can configure the meta tags for all content types. We will show you how you can specify meta tags on a per content basis in Step 2 below.

Typically, you will want to set a different canonical url for each of the above mentioned configurations.

Configuring Meta tags for a content type

We will now demonstrate how you can add default meta tags to your content type. In our tutorial, we will use the Article content type. (You can apply the same steps to your other content types.)

1. On /admin/config/search/metatag click on “Add default meta tags”

2. Select “Article”

At this point (before you click on Save), if you were to click on “Browse available tokens”, you will notice that you do not see the Article node context in the popup modal window. So tokens from the Article content type are technically unavailable at this moment. You must click on “Save” and then try again. The following screenshots show the before and after of this step.

Before saving, you will see this:

3. After saving, you get another fieldset for Article:

And if you were to click on “Edit” and then “Browse Available tokens”, you will notice that the Article node tokens are now available as highlighted in the following screenshot:

We would also like to point out that at this point that the Article node inherits the meta tags from settings in Global and Content:

4. We are now going to override this by clicking on “Edit” next to the Content: Article.

As an example, let’s add field_tags to the keywords meta tag and the body text summary to the description meta tag field for Article. We have done this in the following screenshot:

Then click on Save.

In the main meta tags configuration screen (at /admin/config/search/metatag), you will notice a new value for Content: Article as shown here:

5. Now let’s test our new setting by creating an Article node and inputting some Keywords:

After clicking on Save, go to the new Article node and inspect the source code. You will notice that the meta tags for keywords and description have been prefilled with your Article node data as shown here:

In the example above, we set some default meta tags for all article nodes. However, we can override it on a per node basis. To do this, you will need to add an extra field to your Article node of field type “Meta Tags”.

1. In the “Manage fields” (/admin/structure/types/manage/article/fields) section of your Article content type click on “Add field”:

2. Add a field of type “Meta tags” and click on “Save and continue”:

3. Now edit the Article node you just created and you will notice a new Meta Tag fieldset like this:

If you expand this Meta Tag fieldset, you can override the Meta Tags just for this node.

Setting Meta tags for Views pages

The Meta Tag module has a submodule called Meta Tag Views which allows you to override meta tags for View pages. We will demonstrate how you can use this module.

1. Install the Meta tag Views sub module via the Extend page.

2. In this example, we will edit the View of the front page. On the View edit screen, you will instantly notice a new Page Setting for your View:

3. If you expand this Page Setting, you can override the meta tags for this View page. We will override the Keywords in this example:

Now if you go to your View page (in our case it was the homepage view), you will notice the update to your Keywords meta tag in the source code:

The Meta Tag module comes with a sub module named Meta Tag Extended Permissions. Enabling this module will give you more granular permissions that can allow certain roles to access specific meta tag fields.

Click on Extend in the toolbar and install the module.

Once enabled, if you go to admin/people/permissions you will notice some new permissions settings that you can toggle as shown below:

The Meta Tag module also comes with a sub module named Meta Tag: Favicons. Enabling this module will allow you to specify your favicons.

Click on Extend in the toolbar and install the module.

After enabling this module, go to admin/config/search/metatag and click on “Edit” for the Global settings as shown here:

On the next page you will notice a new Favicon fieldset:

Now you can specify your different favicons for different sizes.

Summary

The Meta Tag module is a great module that allows you to configure meta tags for various pages of your Drupal site.

This module comes with a bunch of sub modules which we have explained in more detail. We have touched on how you can configure the meta tags on a global level, on a per content type basis, per node basis and View page basis.

We also mentioned how you can configure favicons and have more granular permissions for meta tag fields. We encourage you to try some of these settings to optimize the meta tags for your own website.

Jun 15 2021
Jun 15
[embedded content]

Don’t forget to subscribe to our YouTube channel to stay up-to-date.

Drupal SEO Series using Metatag

When someone tweets a link from your website, Twitter can use Twitter Cards to attach rich photos, videos and media to Tweets.

By doing some minimal configuration changes on your Drupal site using the Metatag Module and the Twitter Cards submodule, users can see a “Card” added below the tweet that contains neatly formatted information coming from your website, as shown in Image 1 below.

Image 1 shows an example of a “Card”.

The cards are generated using HTML markup in the HEAD region of your Drupal site; that’s why the Metatag module is used.

Twitter will scrape your site and generate the card using the HTML meta tags.

Table of Contents

Twitter Cards

There are four variations of Twitter cards. They are:

  1. Summary Card – Displays Title, description, and thumbnail
  2. Summary Card with Large Image – As the name suggests, similar to Summary Card but with a larger image
  3. App Card – A Card with a direct download to a mobile app. Use this Card to drive app downloads
  4. Player Card – Displays video/audio/media.

Image 1 above shows a “Card” of type Summary with Large Image.

In this tutorial, we will look at the steps involved in setting up the “Summary Card with Large Image” Twitter Card.

Getting Started

The Metatag module has a dependency on the Token module. However, if you download and enable the Drupal module using Composer and Drush, the dependency is automatically taken care of as we will show you now.

Use composer to download the module:

composer require drupal/metatag

Once the Metatag module is downloaded using composer, the Token module, which is a dependency, will be downloaded automatically.

Then enable the “Metatag: Twitter Card” submodule:

drush en metatag_twitter_cards -y

The above Drush command will automatically enable the Metatag: Twitter Card submodule, Metatag module and Token module.

Finally, it is always a good idea to clear the cache after enabling Drupal modules:

drush cr

Configure Twitter Cards

By default, Twitter Cards can be added to any content type. We will now configure the Twitter Cards for the Article Content type.

1. Go to Configuration > Metatag (admin/config/search/metatag) and click on “Add default meta tags”.

2. On the next page, select “Article” (or whatever content type you want to configure) from the Type dropdown.

3. Then click on Save. This is required for the correct tokens to appear in the “Browse available tokens” window.

4. Edit the “Content: Article” configuration from the Metatag page.

5. Click on “Twitter cards” to expand the field set and then select “Summary Card with large image” from the Twitter card type dropdown.

6. Now, we have to add tokens into the correct fields. Click “Browse available tokens.” then click on Nodes.

NOTE: If you can’t see “Nodes”, this means you need to save the “default meta tag” option first then edit it again.

Fill in the following fields:

  • Description: [node:summary]
  • Site’s Twitter account: Add your twitter account, i.e., @webwashnet
  • Title: [node:title]
  • Page URL: [node:url]
  • Image URL: [node:field_image] (adjust the field name accordingly)
  • Image alternative text: [node:field_image:alt] (adjust the field name accordingly)

Find Image Field Token

For this type of Twitter card, an image field must exist in your content type. We will show you how to use Token to grab that image data. Click on “Browse available tokens”.

Then drill down by going to Nodes -> Image. This assumes you’re using the Image (field_image) field on the Article content type.

The token should be [node:field_image].

Once you have found the image entity URL, make sure your mouse focus is in the empty Image URL Twitter Card meta tag field, and then click on the image entity URL token value. This will copy/paste the token value into the Image URL field.

Find Image Field Token on Media Asset

If you’re using a media field instead of an image field for handling assets, then use the following token, [node:field_media:entity:thumbnail] (change the field_media name accordingly).

7. Configure any extra fields as needed, then scroll down and click on Save.

8. Once you have filled out the other Twitter Card fields with their respective token values, you should validate the end result markup using the Twitter Card Validator tool. We will now show you how to validate your Twitter card.

As you can see, Twitter successfully recognised our “Summary with large image” card and displayed the information correctly.

NOTE: You’ll need to make sure your website is publicly accessible for the validator tool to work.

View HTML Source

If you want to see the generated markup, view the HTML source on your Drupal site and look for the “twitter:*” meta tags.

Summary

Twitter can display a neatly formatted version of your website’s content whenever someone’s tweets a link to your content. There are various types of Twitter cards depending on your needs.

We have shown how you can use the Metatag module and Twitter Cards submodule to configure Drupal 8 to correctly send your website’s content to Twitter and how to validate your markup to ensure Twitter correctly parses your website content.

FAQ

Q: I changed the default meta tag configuration, but the tags are not changing?

Try clearing the site cache. Go to Configuration > Performance and click on “Clear all caches”.

May 12 2021
May 12
[embedded content]

Don’t forget to subscribe to our YouTube channel to stay up-to-date.

When someone shares a Facebook post with a link to your website, Facebook lets you control how your website content appears to others by parsing your Open Graph (OG) markup.

By doing some minimal configuration changes on your Drupal site using the Metatag Module and the Metatag: Open Graph sub module, you can define what specific content can be shown on Facebook regardless of whether it’s shared from the desktop or mobile web or a mobile app.

It is easier to explain by showing the end result of what we are trying to accomplish. For example, the homepage of www.webwash.net has the following OG markup inside of the :

If someone posted www.webwash.net to Facebook, then Facebook would parse the OG markup like this:

And the end result would look like this:

You can clearly see the corresponding OG tags for the content.

If you want to learn more about the OG tags. Click here for a detailed list and explanations of the Facebook OG tags.

In this tutorial, we are going to show you how to configure a content type to dynamically populate the Facebook OG tags using the Metagtag module and Metatag Open Graph sub module.

Table of Contents

Getting Started

The Metatag module has a dependency on the Token module. However, if you download and enable the Drupal module using composer and drush, the dependency is automatically taken care of as we will show you now.

Use Composer to download the module:

composer require drupal/metatag

Once the Metatag module is downloaded using composer, the Token module, which is a dependency, will be downloaded automatically.

Then enable the “Metatag: Open Graph” sub module:

drush en metatag_open_graph -y

The above drush command will automatically enable the Metatag: Open Graph sub module, Metatag module and Token module.

Finally, it is always a good idea to clear the cache after enabling Drupal modules:

drush cr

By default, Open Graph can be added to any content type. We will now configure Open Graph for the Article Content type.

1. Go to Configuration > Search and meta data > Metatag and click on “Add default meta tags”.

2. On the next page, select “Article” (or whatever content type you want to configure)  from the Type dropdown.

3. Then click on Save. This is required for the correct tokens to appear in the “Browse available tokens” window.

4. Edit the “Content: Article” configuration from the Metatag page.

5. Then in the Open Graph fieldset on the same page, click to expand it. You will now notice quite an exhaustive list of OG tags that you can populate. Firstly, we are going to demonstrate how to populate the Image OG tag.

For this to be successful, your Article content must have at least an image field. We will show you how to use Token to grab that image data.

Click on “Browse available tokens”.

From the Token window click on Nodes to drill down and find the content type fields.

NOTE: If you can’t see “Nodes”, this means you need to save the “default meta tag” option first then edit it again.

Fill in the following fields:

  • Content type: article
  • Page URL: [node:url]
  • Title: [node:title]
  • Description: [node:summary]
  • Image URL: [node:field_image] (adjust the field name accordingly)

Find Image Field Token

To use an image stored in an image field, click on “Browse available tokens”.

Then drill down by going to Nodes -> Image. This assumes you’re using the Image (field_image) field on the Article content type.

The token should be [node:field_image].

Find Image Field Token on Media Asset

If you’re using a media field instead of an image field for handling assets, then use the following token, [node:field_media:entity:thumbnail] (change the field_media name accordingly).

6.After you fill out all of your OG tags fields, click on Save and clear the Drupal cache. If you do not clear your cache, the OG fields may not populate for existing content.

7. Once you have filled out the other OG fields with their respective token values, you should validate the resulting OG markup using the Facebook Sharing Debugger tool. We will now show you how to validate your OG markup.

NOTE: Your website has to be publicly accessible for the debug tool to work.

8. First we need to create a test Article node (make sure to upload an image to our image field). Our test article looks like this:

9. Paste the url for this node into the Facebook Sharing Debugger tool. The output should look like:

As you can see, Facebook successfully parsed our OG markup and displayed the information correctly.

Summary

Facebook lets you control your website’s content whenever someone’s shares a link to your content regardless of whether it’s shared from the desktop or mobile web or a mobile app. Facebook does this by parsing the Open Graph (OG) markup provided by your website. We have shown how you can use the Metatag module and Metatag Open Graph sub module to configure Drupal 8 to correctly generate the OG markup needed by Facebook and we have also shown how to validate your OG markup to ensure Facebook correctly parses your website content.

FAQ

Q: I changed the default meta tag configuration, but the tags are not changing?
Try clearing the site cache. Go to Configuration > Performance and click on “Clear all caches”.

About Drupal Sun

Drupal Sun is an Evolving Web project. It allows you to:

  • Do full-text search on all the articles in Drupal Planet (thanks to Apache Solr)
  • Facet based on tags, author, or feed
  • Flip through articles quickly (with j/k or arrow keys) to find what you're interested in
  • View the entire article text inline, or in the context of the site where it was created

See the blog post at Evolving Web

Evolving Web