Having trouble using jQuery to set meta tag values

Question

Possible Duplicate:
Is it possible to use javascript to change the meta-tags of the page?

I'm trying to set meta tags using jQuery (please don't reply that this doesn't make sense since search engines blah-blah-blah... I am loading invoking 3rd party Javascript functions that examine these vales, such as Tweetmeme and Facebook).

If I use:

 $('meta[name=some-name]').attr('content', 'some value');

it does work to set the value of an existing meta tag, but does not create a meta tag if such a named one does not exist.

If you have insight or experience with this, please reply...

What jQuery code are you using to create the tag? – Luke May 14 '10 at 02:36 — Luke, May 14 '10 at 02:36

score 12 · Answer 1 · answered May 14 '10 at 02:37

12

You can do this, not the cleanest, but what you're trying to do is pretty odd so there's not a great way to handle it:

var mt = $('meta[name=some-name]');
mt = mt.length ? mt : $('<meta name="some-name" />').appendTo('head');
mt.attr('content', 'some value');

The conditional expression in there checks .length, which is 0 or false if not found, if that's the case we create the element and append it to the head, whether it was added or originally found, mt is set to the <meta> with that name now, and you can set the attribute.

answered May 14 '10 at 02:37

Nick Craver

623,446
136
1,297
1,155

Thanks for the code Nick. What I'm doing may seem strange, but its a 100% client-side app and so as the user does things, the value of the Meta tags need to change to reflect the present state. – Zhami May 14 '10 at 02:53
hi, shouldn't it be: mt.attr('some-name', 'some value'); – Andresch Serj Dec 13 '11 at 14:55
1

@Andresch - nope, we're setting the `content="some value"` attribute of the `` tag, it's a specific attribute of that element...you can read more about it here: http://www.w3.org/TR/html4/struct/global.html#h-7.4.4.2 – Nick Craver Dec 13 '11 at 14:58
@NickCraver: Ahh, now i get it. Thanks! – Andresch Serj Dec 13 '11 at 15:03

score 6 · Answer 2 · answered May 14 '10 at 03:08

6

Leveraging Nick's code, I made a function to do the meta tag setting, creating if necessary. Should this be of use to anyone...

    function setOrCreateMetaTag(metaName, name, value) {
        var t = 'meta['+metaName+'='+name+']';
        var mt = $(t);
        if (mt.length === 0) {
            t = '<meta '+metaName+'="'+name+'" />';
            mt = $(t).appendTo('head');
        }
        mt.attr('content', value);
    }

The metaName most often might be assumed to be "name" but I am also having to set "property" as well, so made the function handle a meta meta-name.

answered May 14 '10 at 03:08

Zhami

19,033
14
48
47

can I suggest changing the function to return `mt`? You might want to perform other actions on it too. – nickf May 14 '10 at 03:11
Ah, chaining, of course. Thanks for the reminding me of the pattern! – Zhami May 14 '10 at 11:05

Matijs · Answer 3 · 2011-12-13T09:11:00.450

6

I was just experimenting with this a bit on iOS. It turned out that it was possible to dynamically set a meta tag to prevent zooming on iOS like so:

$('<meta>', {
 name: 'viewport',
 content: 'width=device-width, minimum-scale=1, maximum-scale=1'
}).appendTo('head');

Removing it however, didn't re-enable zooming:

$('meta[name=viewport]').remove();

But overwriting the meta tag:

$('meta[name=viewport]').attr(
 'content',
 'width=980, minimum-scale=0.25, maximum-scale=1.6'
);

with its default values did.

edited Dec 13 '11 at 09:11

answered Feb 21 '11 at 13:48

Matijs

3,118
2
29
41

I believe that the first line of the last code block should be: /* $('meta[name=viewport]').attr( */ I added a '. – KatieK Dec 13 '11 at 01:44

Having trouble using jQuery to set meta tag values

3 Answers3

Linked