How do I get the information from a meta tag with JavaScript?

javascript html greasemonkey meta-tags

221,948

Solution 1

You can use this:

function getMeta(metaName) {
  const metas = document.getElementsByTagName('meta');

  for (let i = 0; i < metas.length; i++) {
    if (metas[i].getAttribute('name') === metaName) {
      return metas[i].getAttribute('content');
    }
  }

  return '';
}

console.log(getMeta('video'));

Solution 2

The other answers should probably do the trick, but this one is simpler and does not require jQuery:

document.head.querySelector("[property~=video][content]").content;

The original question used an RDFa tag with a property="" attribute. For the normal HTML <meta name="" …> tags you could use something like:

document.querySelector('meta[name="description"]').content

Solution 3

One liner here

document.querySelector("meta[property='og:image']").getAttribute("content");

Solution 4

There is an easier way:

document.getElementsByName('name of metatag')[0].getAttribute('content')

Solution 5

function getMetaContentByName(name,content){
   var content = (content==null)?'content':content;
   return document.querySelector("meta[name='"+name+"']").getAttribute(content);
}

Used in this way:

getMetaContentByName("video");

The example on this page:

getMetaContentByName("twitter:domain");

View more solutions

221,948

Author by

supercoolville

lol wut

Updated on July 24, 2022

Comments

supercoolville almost 2 years
The information I need is in a meta tag. How can I access the "content" data of the meta tag when property="video"?

HTML:
```
<meta property="video" content="http://video.com/video33353.mp4" />
```
- Jens Bannmann almost 7 years
  
  Note that <meta> is supposed to have a name attribute, not property. Developers using the standard attribute will need to adapt the code given by most answers.
samdeV almost 10 years

This seems to work (atleast in chrome) : document.getElementsByTagName('meta')['video'].getAttribute(‌'content'); if the markup is as below: <meta name="video" content="http://video.com/video33353.mp4" />
tommed about 9 years

What you really want is 'let' to keep them locally defined ;)
frandroid over 8 years

@samdeV, this is the cleanest of all the solutions here. Submit it as your own answer. :)
frandroid over 8 years

@samdeV, also you don't need to .getAttribute('content'), you can just .content: document.getElementsByTagName('meta')['video'].content. I just tested, this works fine in Firefox as well.
frandroid over 8 years

I am now informed that it doesn't work in Safari. Damnit.
ILMostro_7 over 8 years

Assuming jquery, or some library; not javascript
bgmCoder over 8 years

I used this tidbit, but on a certain page was getting a type error as undefined because the meta tag itself was missing. I resolved that by assigning a variable and wrapping the document.queryselector in a try statement so I could get "" by default in case of error.
Admin almost 8 years

If you can use querySelector, you can do something like this: document.querySelector("meta[property='og:url']").getAttribu‌te('content')
Raniz over 7 years

Simple, elegant and has no dependencies. Better than the accepted answer imo
Sergei Basharov over 7 years

I think this answer is not more relevant and you should really use stackoverflow.com/questions/7524585/…
Robin van Baalen about 7 years

Even though my meta is in the <head> tag, document.head.querySelector gave me null but document.querySelector worked perfectly
arpo about 7 years

To get it working with OG tags add quotes to it like this_: var title = document.head.querySelector('[property="og:title"]');
rprez over 5 years

This works back to at least IE11, which makes it more useful.
fregante about 5 years

The document.querySelector version works all the way to IE8, so it's plenty
citykid about 5 years

NIce. Which purpose does the part "[content]" serve? Without it, I also get the meta element.
devMariusz over 4 years

function getMetaContentByName(name,content){ var content = (content==null)?'content':content; try{ return document.querySelector("meta[name='"+name+"']").getAttribute‌(content); }catch{ return null; } }
natevw over 4 years

This is a pretty good way normally, but note that the OP is using the RDFa "property" attribute instead of the more basic "name" attribute (stackoverflow.com/questions/22350105/…)
natevw over 4 years

@citykid It does seem somewhat superfluous. The snippet will always throw a TypeError if the tag is not found by its "property". Including [content] in the selector extends that exception to the case where any matching tag lacks a content attribute. IMO it makes more sense in that case to get a null result but it's up to the implementer's preference I guess.
natevw over 4 years

Skip this answer. It doesn't work in the OP's [admittedly odd] case since it looks at the "name" rather than "property" attribute. And in its current state it's overly complex but without any backwards compatibility advantage — any browsers that support const/let should support .querySelector!
S K R about 4 years

for just one meta attribute, why to loop over multiple times ? it may have hundreds of meta tags or it may need to get the meta value multiple times.
S K R almost 4 years

why would someone loop through all metas everytime ? if there are hundreds, what about the performance ?
Antonio Leonardo almost 3 years

For Stackoverflow site purposes, your response needs to be more complete, with minimal explanation about your code.
ehsan wwe almost 2 years

its awsome , i need this code just for csrf-token