How can I add the following meta tag inside the <head>
tag?
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
I am trying to add it to a Drupal 8 site.
Drupal Answers is a question and answer site for Drupal developers and administrators. It only takes a minute to sign up.
Sign up to join this communityHow can I add the following meta tag inside the <head>
tag?
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
I am trying to add it to a Drupal 8 site.
From different sources I found different way of adding meta tags in Drupal 8, hence compiling all ways.
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:
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:
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.
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.
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
Custom Meta module is the way to go. It has a very straightforward configuration and allows adding any custom meta tag to the page head section.
Here we can use the Metatag module.
We need to enable Metatag: Mobile & UI Adjustments submodule.
After doing this from metatag config page we would be able to see Windows & Windows Mobile under each metatag type and according to our requirement, we can add either globally or page-specific X-UA-Compatible content.
Recently had to implement some Open Graph <meta property="og:xxx" content="xxx">
tags for Facebook embedding.
Drupal 7 let's you also do the following (not sure about Drupal 8 though):
$ogTitleElement = array(
'#type' => 'html_tag',
'#tag' => 'meta', // The #tag is the html tag -
'#attributes' => array( // Set up an array of attributes inside the tag
'property' => 'og:title',
'content' => 'My Custom Title',
),
);
drupal_add_html_head($ogTitleElement, 'facebook_title');
Code can be added inside your custom module, or inside the <themename>_preprocess_html
function of your theme's template.php
file.