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.
Add a comment
|
6 Answers
From different sources I found different way of adding meta tags in Drupal 8, hence compiling all ways.
Using a THEME.theme file
The same question has been asked on Add meta tag to <head>. One of the answers provides the following code.
Just add the following code in the .theme file, and clear the cache.
The theme_preprocess_html() function should be already there in the .theme file; don't add another function with the same same, or PHP will throw an 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'];
}
Through a template file
In How can I set/remove meta tags?, the user who asked the question mentioned that it's possible to add meta tags in the html.html.twig file. The template file used by Drupal core is core/modules/sytem/templates/html.html.twig. You can copy and paste its content in a theme's template folder.
The relevant part in that template file is the following one.
<!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>
Create your own custom module
If you follow Adding new HTML tags in the <head> in Drupal 8, it describes the general way of adding tag to head in Drupal 8. I have modified the code to adapt it to the question you asked.
/**
* 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'];
}
Using a Drupal module
You can use the Metatag module for this, which requires the Token and the Chaos Tool Suite (ctools) modules.
When adding content to a controller, block, entity, field or other places you don't need to create a hook.
You can attach the meta tag directly to a render/build array. Any render array has at least one render child (containing #theme, #type, #markup, #plain_text), where you can place the attachment:
$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.
The module allows you to define and manage custom meta tags. Simply select the Meta attribute (property, name, http-equiv) and set the value and content value in the format and the module will add your meta tags to all non-admin content for your site.
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.
Drupal 7 answer
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.
The Mix module can be used to set title and meta tags for the front page and a description meta tag for the node page.
Set title and meta tags for the front page.
Install and enable the Mix module.
Goto /admin/config/mix, find and click the Meta tags link or goto /admin/config/mix/meta directly.
Fill the Frontpage form then click Save Configuration
Goto front page and inspect the page title and source code to see all the changes.
Set a description meta tag for the node page.
Install and enable the Mix module.
Goto /admin/config/mix, find and click the Meta tags link or goto /admin/config/mix/meta directly.
Fill the Node form then click Save Configuration
Goto any node page and inspect the source code to see the changes.
