{"id":57189,"date":"2023-04-27T20:47:56","date_gmt":"2023-04-27T15:17:56","guid":{"rendered":"https:\/\/www.tothenew.com\/blog\/?p=57189"},"modified":"2023-05-02T21:24:16","modified_gmt":"2023-05-02T15:54:16","slug":"a-guide-to-configure-metatag-module-in-your-drupal-website","status":"publish","type":"post","link":"https:\/\/www.tothenew.com\/blog\/a-guide-to-configure-metatag-module-in-your-drupal-website\/","title":{"rendered":"A guide to configure metatag module in your Drupal website"},"content":{"rendered":"

Meta tags are the extract of the page\u2019s content. These HTML tags play a pivotal role in search engine optimization. They do not appear on the page but definitely do on the page’s source code. Drupal provides a metatag module (https:\/\/www.drupal.org\/project\/metatag) to generate meta keywords for your Drupal website. It can be done at the global level, content type level, and node level.<\/p>\n

Installing the meta tag module:-<\/strong><\/h3>\n

1. Install the module using composer.
\n\"\"
\n<\/span><\/p>\n

2. Enable the module using the drush command.
\n\"\"
\n<\/span><\/p>\n

3. After the successful installation of the meta tag module, go to the configuration page (\/admin\/config\/search\/metatag) of the metatag module where you can spot the configurations for content types, default error pages, etc.<\/p>\n

\"\"
\n<\/span><\/p>\n


\nConfiguring meta tags for a content type:-<\/b><\/h2>\n

1. \u00a0On the meta tag configuration page, first click on \u201cadd default meta tags”. Then you can find the content types listed on your website in the type dropdown. Select the content type of your choice. In our case, we have chosen the “basic page” content type.<\/p>\n

\"\"
\n<\/span><\/p>\n

2. After saving, you can find another field set for your selected content type (i.e. basic page)
\n\"\"
\n<\/span><\/p>\n

3. Edit your desired content type’s metatag, then click “browse available token”. You can find multiple tokens available, but we need to choose from “nodes” for content types.
\n\"\"<\/p>\n

4. From the tokens available for nodes, fill in the fields as per your choice.
\n\"\"<\/p>\n

5. To validate this, create\/edit a node of the configured content type. Go to that particular node and inspect the source code; you can find the meta tags you have configured are already prefilled.<\/span><\/p>\n

Overriding meta tags for specific nodes:-<\/b><\/h3>\n

In the above example, we have configured meta tags for a content type that covers all its nodes. But what if you require meta tags on a node per basis? Well, there is a solution for it. <\/span>To do this, you have to add a meta tag field to your desired content type, as shown in the screenshot below:-
\n\"\"
\n<\/span><\/p>\n

Edit any node of that particular content type, and you will notice that a new meta tag field is added to the right sidebar of the page. You can override the meta tags for this node here.<\/p>\n

\"\"
\n<\/span><\/p>\n

Configuring the meta tag for views:-<\/b><\/h3>\n

1. Enable the meta tag view module(a sub-module of metatag) using drush.
\n\"\"<\/p>\n

<\/span><\/p>\n

2. Edit any view as per your requirement. In our case, we have opted for “\/blogs” view. After clicking on edit, you can find a new page setting with the name \u201cmeta tags\u201d.<\/p>\n

\"\"
\n<\/span><\/p>\n

3. Click on this page setting and configure the meta tags for this view page.
\n\"\"
\n<\/span><\/p>\n

4. To validate this, click on the “view page source” of the output page of that particular content type and you can find the configured metatags.<\/p>\n

\"\"<\/p>\n

Few highly sub-modules of meta tags are open graphs and Twitter cards. Their implementation can be found below.<\/h3>\n

\u00a0Configuring Open graph meta tags for Facebook using metatags:-<\/b><\/h3>\n

1. Enable the \u201cMetatag: Open Graph\u201d module using the drush command as shown below.
\n\"\"
\n<\/span><\/p>\n

2. Edit the \u201ccontent:blog\u201d (choose content type as per your requirement) present on the metatag\u2019s configuration page.<\/span> Click on \u201cOpen Graph\u201d and configure the tokens available in \u201cbrowse available token\u2019s node section\u201d.
\n\"\"
\n<\/span><\/p>\n

The most commonly used tokens are stated below:-<\/span><\/p>\n