Need some help with your project? Contact me

Adding new HTML tags in the <head> in Drupal 7

This tutorial will show you how to add a new HTML tag in the HEAD part of the page in Drupal 7. You can use this to add a new meta tag, link tag or whatever you may require for your theme or module.

It is quite simple really and I will demonstrate from the perspective of a theme builder. If you have to do this for a module, just put all the code you see below in your .module file. OK, so to add a new HTML tag to the HEAD, you need to create a custom preprocess function for the html.

Open your theme’s template.php file (if your theme does not already have one, you can create it in the root folder of the theme). If you have one already, make sure there is no function name in it ending like this this: preprocess_html. If there is, you need to add this code inside that, but if there is no such function, create one (replace your_theme_name with the machine readable name of your theme, or if you do this in a module, with the name of your module):

function your_theme_name_preprocess_html(&$vars) {
 //php magic
}

For this example, I am going to add a new meta tag to the HEAD, so for this, I add the following lines into this function:

$viewport = array(
  '#tag' => 'meta', 
  '#attributes' => array(
    'name' => 'viewport', 
    'content' => 'width=device-width, initial-scale=1, maximum-scale=1',
  ),
);

drupal_add_html_head($viewport, 'viewport');

What I just did was added a new meta tag called viewport with that specific content. In my page source, it will appear like this:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

If you want this tag to be applied only on certain pages, look inside the $vars array and see what you can use from there for some PHP conditionals. And you can also add other HTML tags as well, like

or
, in the same fashion. Read more about this in the Drupal API documentation. And if you want to use this technique to create Facebook Open Graph tags in code, read this article.

Hope this helps.

Some related articles you might enjoy

Comments

Hello! Nice article very usefull! thank you,
But I think that in : drupal_add_html_head($viewport, 'viewport');
$viewport should be $new_tag. Or the array var name $viewport.

Hey there!

Thanks for noticing the error...it happens :) Made the correction and should be fine now!

D

Tried both the following but couldn't see tag in header. My theme is my own and named perfectf and I added the code to my template.php file, what am I doing wrong?

Code 1


function perfectd_preprocess_html(&$vars) {

$viewport = array(
'#tag' => 'meta',
'#attributes' => array(
'name' => 'viewport',
'content' => 'width=device-width, initial-scale=1, maximum-scale=1',
),
);

drupal_add_html_head($viewport, 'viewport');
}

Code 2


function perfectd_preprocess_html(&$vars) {

$viewport = array(
'#tag' => 'meta',
'#attributes' => array(
'name' => '$viewport',
'content' => 'width=device-width, initial-scale=1, maximum-scale=1',
),
);

drupal_add_html_head($viewport, 'viewport');
}

I'm going to look pretty silly once you've pointed out I've simply missed off a comma somewhere, but I couldn't get either of these to show. Can you point me in the right direction please. Thanks for your help

Hey there!

Well the second one is wrong :)

However, did you clear your cache after you saved the file with this code? I probably should have mentioned it, but whenever you add a new preprocess function into the template.php file, you need to clear the cache before drupal sees it.

Try and let me know :)

Yes I've cleared the cache, both within drupal and within my browser.

I've created a new template.php file that is empty apart from the following;

function Perfectd_preprocess_html(&$vars) {
$viewport = array(
'#tag' => 'meta',
'#attributes' => array(
'name' => 'viewport',
'content' => 'width=device-width, initial-scale=1, maximum-scale=1',
),
);
drupal_add_html_head($viewport, 'viewport');
}
?>

As far as I can see it's identical to your above code, but I get the following error:

Parse error: syntax error, unexpected T_STRING, expecting ')' in C:\wamp\www\sites\all\themes\Perfectd\template.php on line 13

My fault entirely!

The above code works perfectly.

I'd failed to heed your instruction to 'create it in the root folder of the theme and instead of adding the template.php file to my sites/all/themes/mytheme folder I'd incorrectly added it to my sites/all/themes/mytheme/templates folder.

Later I thought I had deleted it from the template folder and pasted it to the mytheme folder, but what I'd actually done was to copy it, leaving the original in place, and giving me two different template.php files and a php error.

In short:

  • It's the obvious things that trip you up
  • The original code is correct
  • The template.php file has to be in the root folder of the template.
  • Thanks for your help.

No problem!

Glad it helped!

D

Yes thanks on it.

I've just started using Drupal. So far found it really good. Just stumbling through stuff curiously. Can you please suggest something which I should try in Drupal?

PS: The image is funny, and so apt!

Hey there,

I suggest you first get the basics of site building before you go into development/theming.

Good luck! :)

Hello, I think that for adding new tags already exists module: https://drupal.org/project/opengraph_meta

I'm going to write an article about adding other meta tags also on his new site http://www.drupalcity.eu/

Thank you for sharing this wonderful post.

your post is very nice thanks for post

This information is very useful for me, thank you very much

does it work on drupal 6 version..I've cleared cache and everything and I still don't see it.

thanks

Tell you the truth I don't know, never tried it. Check the documentation for that hook in D6 (if it exists).

Hi, i have tried to put the code from above as it was described, and it gives me a blank page for the entire site :( Some Help will be really appreciated. Thx.

hi dear...this article is very helpfull to me..thanks...i have one question.

if i want to add meta description then what i have to do...

Hey there! I'm trying to add meta tags for a website for a friend in Drupal 8. Your two articles sound were very helpful to me – what I'm unclear about is where i actually have to enter this (in order to add it for the entire website). Thanks a lot in advance!

Add new comment

You must have Javascript enabled to use this form.