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
This module can simply be installed with 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:
Overriding the meta tags on a per node basis
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:
Granular permissions for Meta Tags
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:
Meta Tag for Favicons
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.
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.