15

How can I add the following meta tag inside the <head>...</head> section in Drupal 8?

<meta http-equiv="X-UA-Compatible" content="IE=edge" />
44

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.

  • I checked the metatag modul before I wrote my post, but I do not know which field I have to choose to output what I want. And even if it would so than I have to do this for every content type. Maybe there is a more comfortable way? – lesley n. Oct 16 '16 at 19:49
  • @lesleyn. I have updated my answer, I have included different way of adding metatags, but like you I also did not figure out how to add using Metatag modules, I thing, through that module we can access whatever provided in the list of token, Hence to use your listed metatag, I think we nned to create token for that, This is jus my wild guess. Othe approached I have tested, and they are WORKING. – CodeNext Oct 17 '16 at 10:04
  • 1
    This should be marked as correct =) +1 – Cyclonecode Oct 17 '16 at 10:25
  • 1
    @AntonínSlejška, Both n-1 and n-3 are pretty much same method, the difference is in n-1 you are adding code in .theme file while in n-3 you are creating custom module for that. I would say go for n-1, is will be clean and easy. And for HOMEPAGE, you need to extra line of code in the code which I have provided in n-1. I have just added update in n-1 for your need, let me know if you copy-paste that, i need to delete that. If still, there is issue, please let me know. – CodeNext Jan 27 '17 at 15:23
  • @CodeNext I am sorry. I have forgot to clear cache. It works perfect. Thanks for the help. I have copied the code. – Antonín Slejška Jan 27 '17 at 15:43
1

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):

$variables = [
  '#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.

-1

You can and should use the alter hook for page attachments in your theme.

https://api.drupal.org/api/drupal/core%21lib%21Drupal%21Core%21Render%21theme.api.php/function/hook_page_attachments_alter/8.3.x

function THEME_page_attachments_alter(array &$page) {
  $page['#attached']['library'][] = 'theme_name/main';
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.