Add HTML Tags for all the site pages

Question

I was searching around but with no clear solution for me!

I would like to add the below HTML code for all my Drupal 8 website pages:

<meta name="viewport" content="width=device-width, user-scalable=no" />

How can I do that, is there a contributed module for it ?

Thank you,

Answer 1

1. Using metatag module

If you want to do it without custom coding you can try metatag module

• enable MOBILE & UI ADJUSTMENTS submodule
• go to metatag settings admin/config/search/metatag
• edit the GLOBAL settings

• under MOBILE & UI ADJUSTMENTS fill in viewport input box

  

2. Using viewport module

There is also a dedicated module called viewport which will allow you to do just that.

3. In your custom theme

But can be easily done in your custom theme. Put the following code inside the THEMENAME_preprocess_html function in your THEMENAME.theme

function THEMENAME_preprocess_html(&$variables) {
  $viewport = [
    '#type' => 'html_tag',
    '#tag' => 'meta',
    '#attributes' => [
      'name' => 'viewport',
      'content' => 'width=device-width, user-scalable=no',
    ],
  ];
  $variables['page']['#attached']['html_head'][] = [$viewport, 'viewport'];
}

NOTE: if THEMENAME_preprocess_html function does not exist you can create it and put the code inside. You can't redeclare it otherwise you will end up with WSOD.

function THEMENAME_preprocess_html(&$variables) {
  //...
}

Answer 2

A) Theme Template

Probably the simplest way to add a viewport metatag is to edit your site theme's html.html.twig template.

If you don't yet have a custom theme for your site, and are only using a builtin or contributed theme, you can read the Drupal 8 Themeing Guide to find out more about how the theme system works, and how to create a sub-theme for your site.

B) Page Attachments

Another way to add additional metatags is by implementing hook_page_attachments() in a module. This is usually done when the value of the metatag may change, but works fine with a constant value as well.

function MY_MODULE_page_attachments(array &$attachments) {
  $attachments['#attached']['html_head'][] = [
    [
      '#type' => 'html_tag',
      '#tag' => 'meta',
      '#attributes' => [
        'name' => 'viewport',
        'content' => 'width=device-width, user-scalable=no',
      ],
    ],
    'meta-viewport',
  ];
}