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

Question

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" />

Note that `` is supposed to have a `name` attribute, not `property`. Developers using the standard attribute will need to adapt the code given by most answers. — Jens Bannmann, Jun 06 '17 at 11:53

score 361 · Answer 1 · edited Feb 28 '20 at 20:51

361

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

edited Feb 28 '20 at 20:51

natevw

16,807
8
66
90

answered Feb 26 '16 at 10:20

joepio

4,266
2
17
19

7

Even though my meta is in the tag, `document.head.querySelector` gave me `null` but `document.querySelector` worked perfectly – Robin van Baalen Apr 15 '17 at 15:42
12

To get it working with OG tags add quotes to it like this_: var title = document.head.querySelector('[property="og:title"]'); – arpo May 08 '17 at 08:21
1

NIce. Which purpose does the part "[content]" serve? Without it, I also get the meta element. – citykid Apr 30 '19 at 09:28
1

@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 Feb 28 '20 at 20:49
`document.querySelector` or `document.querySelectorAll` does not work when unclosed element does not end with `/`, for example on this site, meta tag viewport `` is without `/` and `document.querySelector(meta[property='viewport'])` returns null. – Biegacz Aug 25 '22 at 13:01

score 157 · Accepted Answer · edited Oct 20 '18 at 00:55

157

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'));

edited Oct 20 '18 at 00:55

neiker

8,887
4
29
32

answered Sep 23 '11 at 05:25

Saket

45,521
12
59
79

6

What you really want is 'let' to keep them locally defined ;) – tommed Mar 23 '15 at 21:54
44

If you can use querySelector, you can do something like this: `document.querySelector("meta[property='og:url']").getAttribute('content')` – Jun 17 '16 at 01:04
3

I think this answer is not more relevant and you should really use http://stackoverflow.com/questions/7524585/how-do-i-get-the-information-from-a-meta-tag-with-javascript/35649085#35649085 – Sergei Basharov Jan 21 '17 at 17:10
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`! – natevw Feb 28 '20 at 20:57
2

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 May 11 '20 at 15:21
1

why would someone loop through all metas everytime ? if there are hundreds, what about the performance ? – S K R Aug 30 '20 at 06:24

Ced · Answer 3 · 2020-10-25T21:01:22.923

131

One liner here

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

edited Oct 25 '20 at 21:01

answered Oct 12 '16 at 15:29

Ced

15,847
14
87
146

score 30 · Answer 4 · answered May 30 '16 at 18:19

30

There is an easier way:

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

answered May 30 '16 at 18:19

muchacho

393
5
7

This works back to at least IE11, which makes it more useful. – rprez Feb 26 '19 at 00:23
2

The `document.querySelector` version works all the way to IE8, so it's plenty – fregante Apr 19 '19 at 04:17
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 (https://stackoverflow.com/questions/22350105/whats-the-difference-between-meta-name-and-meta-property) – natevw Feb 28 '20 at 20:35

score 21 · Answer 5 · answered Feb 15 '14 at 14:44

21

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");

answered Feb 15 '14 at 14:44

devMariusz

223
2
8

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. – bgmCoder Jan 14 '16 at 22:32
function getMetaContentByName(name,content){ var content = (content==null)?'content':content; try{ return document.querySelector("meta[name='"+name+"']").getAttribute(content); }catch{ return null; } } – devMariusz Nov 27 '19 at 14:16

score 17 · Answer 6 · edited Aug 06 '19 at 09:23

17

If you use JQuery, you can use:

$("meta[property='video']").attr('content');

edited Aug 06 '19 at 09:23

joepio

4,266
2
17
19

answered Dec 30 '13 at 03:36

Elise Chant

5,048
3
29
36

11

Assuming jquery, or some library; not javascript – ILMostro_7 Dec 23 '15 at 22:34

score 16 · Answer 7 · edited Mar 29 '13 at 17:09

16

In Jquery you can achieve this with:

$("meta[property='video']");

In JavaScript you can achieve this with:

document.getElementsByTagName('meta').item(property='video');

edited Mar 29 '13 at 17:09

Wouter J

41,455
15
107
112

answered Mar 29 '13 at 16:51

Prameet Jain

193
1
4

10

This seems to work (atleast in chrome) : `document.getElementsByTagName('meta')['video'].getAttribute('content');` if the markup is as below: `` – samdeV Aug 08 '14 at 21:51
1

@samdeV, this is the cleanest of all the solutions here. Submit it as your own answer. :) – frandroid Nov 05 '15 at 22:22
1

@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 Nov 05 '15 at 22:39
I am now informed that it doesn't work in Safari. Damnit. – frandroid Nov 09 '15 at 16:18

Ahmed Benhajar · Answer 8 · 2022-09-10T12:33:30.220

9

document.querySelector('meta[property="video"]').content

this way you can get the content of the meta.

edited Sep 10 '22 at 12:33

answered Apr 12 '21 at 18:16

Ahmed Benhajar

91
1
3

Юрий Светлов · Answer 9 · 2018-10-02T02:02:42.143

Way - [ 1 ]

function getMetaContent(property, name){
    return document.head.querySelector("["+property+"="+name+"]").content;
}
console.log(getMetaContent('name', 'csrf-token'));

You may get error: Uncaught TypeError: Cannot read property 'getAttribute' of null

Way - [ 2 ]

function getMetaContent(name){
    return document.getElementsByTagName('meta')[name].getAttribute("content");
}
console.log(getMetaContent('csrf-token'));

You may get error: Uncaught TypeError: Cannot read property 'getAttribute' of null

Way - [ 3 ]

function getMetaContent(name){
    name = document.getElementsByTagName('meta')[name];
    if(name != undefined){
        name = name.getAttribute("content");
        if(name != undefined){
            return name;
        }
    }
    return null;
}
console.log(getMetaContent('csrf-token'));

Instead getting error, you get null, that is good.

its awsome , i need this code just for csrf-token – ehsan wwe Jun 28 '22 at 11:34 — ehsan wwe, Jun 28 '22 at 11:34

Erik Campobadal · Answer 10 · 2019-11-28T16:35:29.850

5

Simple one, right?

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

edited Nov 28 '19 at 16:35

answered Nov 28 '19 at 16:15

Erik Campobadal

867
9
14

score 3 · Answer 11 · answered Apr 18 '20 at 13:53

3

My variant of the function:

const getMetaValue = (name) => {
  const element = document.querySelector(`meta[name="${name}"]`)
  return element?.getAttribute('content')
}

answered Apr 18 '20 at 13:53

Aleh Atsman

41
3

score 2 · Answer 12 · answered Feb 05 '15 at 11:10

This code works for me

<meta name="text" property="text" content="This is text" />
<meta name="video" property="text" content="http://video.com/video33353.mp4" />

JS

var x = document.getElementsByTagName("META");
    var txt = "";
    var i;
    for (i = 0; i < x.length; i++) {
        if (x[i].name=="video")
        {
             alert(x[i].content);
         }

    }

Example fiddle: http://jsfiddle.net/muthupandiant/ogfLwdwt/

cssimsek · Answer 13 · 2015-05-05T20:38:09.703

Here's a function that will return the content of any meta tag and will memoize the result, avoiding unnecessary querying of the DOM.

var getMetaContent = (function(){
        var metas = {};
        var metaGetter = function(metaName){
            var theMetaContent, wasDOMQueried = true;;
            if (metas[metaName]) {
                theMetaContent = metas[metaName];
                wasDOMQueried = false;
            }
            else {
                 Array.prototype.forEach.call(document.getElementsByTagName("meta"), function(el) {
                    if (el.name === metaName) theMetaContent = el.content;
                    metas[metaName] = theMetaContent;
                });
            }
            console.log("Q:wasDOMQueried? A:" + wasDOMQueried);
            return theMetaContent;
        }
        return metaGetter;
    })();

getMetaContent("description"); /* getMetaContent console.logs the content of the description metatag. If invoked a second time it confirms that the DOM  was only queried once */

And here's an extended version that also queries for open graph tags, and uses Array#some:

var getMetaContent = (function(){
        var metas = {};
        var metaGetter = function(metaName){
            wasDOMQueried = true;
            if (metas[metaName]) {
                wasDOMQueried = false;
            }
            else {
                 Array.prototype.some.call(document.getElementsByTagName("meta"), function(el) {
                        if(el.name === metaName){
                           metas[metaName] = el.content;
                           return true;
                        }
                        if(el.getAttribute("property") === metaName){
                           metas[metaName] = el.content;
                           return true;
                        }
                        else{
                          metas[metaName] = "meta tag not found";
                        }  
                    });
            }
            console.info("Q:wasDOMQueried? A:" + wasDOMQueried);
            console.info(metas);
            return metas[metaName];
        }
        return metaGetter;
    })();

getMetaContent("video"); // "http://video.com/video33353.mp4"

Vanilla · Answer 14 · 2016-04-10T01:34:58.220

2

function getDescription() {
    var info = document.getElementsByTagName('meta');
    return [].filter.call(info, function (val) {
        if(val.name === 'description') return val;
    })[0].content;
}

update version:

function getDesc() {
    var desc = document.head.querySelector('meta[name=description]');
    return desc ? desc.content : undefined;
}

edited Apr 10 '16 at 01:34

answered Jul 22 '15 at 03:46

Vanilla

112
4

milahu · Answer 15 · 2021-01-29T10:52:40.883

2

copy all meta values to a cache-object:

/* <meta name="video" content="some-video"> */

const meta = Array.from(document.querySelectorAll('meta[name]')).reduce((acc, meta) => (
  Object.assign(acc, { [meta.name]: meta.content })), {});

console.log(meta.video);

edited Jan 29 '21 at 10:52

answered Jan 29 '21 at 10:27

milahu

2,447
1
18
25

score 1 · Answer 16 · answered Jun 08 '20 at 13:34

If you are interessted in a more far-reaching solution to get all meta tags you could use this piece of code

function getAllMetas() {
    var metas = document.getElementsByTagName('meta');
    var summary = [];
    Array.from(metas)
        .forEach((meta) => {
            var tempsum = {};
            var attributes = meta.getAttributeNames();
            attributes.forEach(function(attribute) {
                tempsum[attribute] = meta.getAttribute(attribute);
            });
            summary.push(tempsum);
        });
    return summary;
}

// usage
console.log(getAllMetas());

score 1 · Answer 17 · answered Feb 26 '22 at 20:39

The simple way preferred

We can use direct one line to get meta description or keyword or any meta tag in head section as this code:

document.head.getElementsByTagName('meta')['description'].getAttribute('content');

Just change ['description'] to keywords or element of meta name rang

This is an example: using document.head to get meta names values

score 0 · Answer 18 · answered Oct 01 '16 at 11:45

I personally prefer to just get them in one object hash, then I can access them anywhere. This could easily be set to an injectable variable and then everything could have it and it only grabbed once.

By wrapping the function this can also be done as a one liner.

var meta = (function () {
    var m = document.querySelectorAll("meta"), r = {};
    for (var i = 0; i < m.length; i += 1) {
        r[m[i].getAttribute("name")] = m[i].getAttribute("content")
    }
    return r;
})();

score 0 · Answer 19 · answered Jan 13 '19 at 04:36

0

FYI according to https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta global attributes are valid which means the id attribute can be used with getElementById.

answered Jan 13 '19 at 04:36

jmoz

7,846
5
31
33

score 0 · Answer 20 · answered Apr 06 '22 at 15:31

0

Using meta root and then getting and setting any of its properties:

let meta = document.getElementsByTagName('meta')

console.log(meta.video.content)
> "http://video.com/video33353.mp4"

meta.video.content = "https://www.example.com/newlink"

answered Apr 06 '22 at 15:31

assayag.org

709
10
24

Tommaso Lintrami · Answer 21 · 2022-09-15T10:25:40.780

The problem with complex websites and metadata is that meta tags not always have the itemprop attribute. And in some case they have itemprop only but not a name attribute.

With this script you can get all the Meta with an itemprop attribute and print its content.

  const allMeta = document.getElementsByTagName("meta");
    
  for (let i = 0; i < allMeta .length; i++) {
      if( allMeta [i].getAttribute("itemprop") != null){
        console.log( allMeta [i].getAttribute("itemprop")+":"+allMeta [i].getAttribute('content') );
      }
  }

score 0 · Answer 22 · answered Sep 01 '23 at 21:47

0

It's very simple with vanilla-js...

var author = document.querySelector("meta[name=author]").content;
alert(`My author is ${author}`);

answered Sep 01 '23 at 21:47

Jcc.Sanabria

629
1
12
22

score -1 · Answer 23 · answered Dec 09 '19 at 13:15

<html>
<head>
<meta property="video" content="http://video.com/video33353.mp4" />
<meta name="video" content="http://video.com/video33353.mp4" />
</head>
<body>

<script>
var meta = document.getElementsByTagName("meta");
    size = meta.length;

for(var i=0; i<size; i++) {
    if (meta[i].getAttribute("property") === "video") {
        alert(meta[i].getAttribute("content"));
    }
}
meta = document.getElementsByTagName("meta")["video"].getAttribute("content");
alert(meta);
</script>
</body>
</html>

Demo

score -2 · Answer 24 · answered Jun 21 '21 at 17:15

-2

document.head.querySelector('meta[property=video]').content;

answered Jun 21 '21 at 17:15

parthiban dhanapal

1
1

1

For Stackoverflow site purposes, your response needs to be more complete, with minimal explanation about your code. – Antonio Leonardo Jun 21 '21 at 18:32

S K R · Answer 25 · 2020-05-11T15:22:06.800

-3

if the meta tag is:

<meta name="url" content="www.google.com" />

JQuery will be:

const url = $('meta[name="url"]').attr('content'); // url = 'www.google.com'

JavaScript will be: (It will return whole HTML)

const metaHtml = document.getElementsByTagName('meta').url // metaHtml = '<meta name="url" content="www.google.com" />'

edited May 11 '20 at 15:22

answered Jul 30 '19 at 08:09

S K R

552
1
3
16

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

25 Answers25

Linked

Related