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