Drupal - How do I add a meta tag in inside the <head> tag?

From different sources I found different way of adding meta tags in Drupal 8, hence compiling all ways.

1. Using THEME.theme file

I think same question has been asked on stakeoverflow: add meta tag to head in drupal 8 and if you see the answer of @Danielishko, He has provided the following code,

Just add following code in your THEME.theme file, clear cache and you will be good to go. Note: function theme_preprocess_html(&$variables) {...} should be already there in your .theme file, hence do not create new one, otherwise it will give error.

function theme_preprocess_html(&$variables) {

  $xuacompatible = [
    '#tag' => 'meta',
    '#attributes' => [
      'http-equiv' => 'x-ua-compatible',
      'content' => 'ie=edge',
    ],
  ];


  $variables['page']['#attached']['html_head'][] = [$xuacompatible, 'x-ua-compatible'];
}

Output image:

enter image description here

2. Through Template file:

Another Question was asked on this topic: How to set / remove drupal 8 meta tags.

If you read the question in the above mentioned link, Questioner has mentioned that using html.html.twig template file you can directly add meta tags to <head>....</head>

html.html.twig file you can find at core/modules/sytem/templates/html.html.twig, You can copy and paste that in your theme's template folder and your theme will use that one.

from html.html.twig

<!DOCTYPE html>
<html{{ html_attributes }}>
  <head>
    <head-placeholder token="{{ placeholder_token|raw }}">
    <title>{{ head_title|safe_join(' | ') }}</title>
    <css-placeholder token="{{ placeholder_token|raw }}">
    <js-placeholder token="{{ placeholder_token|raw }}">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  </head>
  <body{{ attributes }}>
    {#
      Keyboard navigation/accessibility link to main content section in
      page.html.twig.
    #}
    <a href="#main-content" class="visually-hidden focusable">
      {{ 'Skip to main content'|t }}
    </a>
    {{ page_top }}
    {{ page }}
    {{ page_bottom }}
    <js-bottom-placeholder token="{{ placeholder_token|raw }}">
  </body>
</html>

Output Image:

enter image description here

NOTE: This is my own logic and tried to find reference for this, I did not find any reference regarding this except one line provides by Questioner in above link, but since we edit template file for adding other stuff why we can not use to add tags. PLEASE PROVIDE COMMENTS IF THIS IS NOT A RIGHT WAY TO DO, It will also be learning experience for me, Thanks.

3. Create your own Custom Module

If you refer this tutorial of: Adding new HTML tags in the in Drupal 8, He has described the general way of adding tag to head in Drupal 8. I have modified as per your requirement. You can refer this tutorial: Drupal 8: Create a Simple Module for how to develop simple module in Drupal 8, and following code will go in your module_name.module file, that's it.

for module_name.module file,

<?php
/**
 * Implements hook_page_attachments().
 */
function module_name_page_attachments(array &$page) {
  $xuacompatible = [
        '#tag' => 'meta',
        '#attributes' => [
          'http-equiv' => 'x-ua-compatible',
          'content' => 'ie=edge',
        ],
      ];
  $page['#attached']['html_head'][] = [$xuacompatible, 'x-ua-compatible'];
}

I think, this method and method described in 1st option are quite same.

4. Using Drupal module

I am not sure, how to use this approach, I tried to find. Here I am mentioning because when point of adding meta tags comes this module always pop-up.

I think this approach you should use. In the accepted answer he has describe the module way and you can use, Metatag module for that. This module has dependent modules Token & Ctools, which is very common thing. In that answer whole procedure has been described, so I am not mentioning here.


When adding content to a controller, block, entity, field or other places you don't need to create a hook.

You can add the meta tag directly to any theme or render element (#theme, #type, #markup):

$build['username'] = [
  '#theme' => 'username',
  '#account' => \Drupal::currentUser(),
  '#attached' => [
    'html_head' => [
      [
        [
          '#tag' => 'meta',
          '#attributes' => [
            'name' => 'foo',
            'content' => 'bar',
          ],
        ],
        'my_module_foo',
      ],
    ],
  ],
];

When rendered the tag bubbles up to page level and is added to the <head>...</head> section.

In a preprocess hook you can attach to the top level of $variables, see https://drupal.stackexchange.com/a/288989/47547

Tags:

Meta Tags

Recent Posts