Handling meta data with Javascript

Question

I am trying to read meta data from an html page using JavaScript. I created an array of all the meta tags and I am trying to read the property field, but I cant seem to get it to work. Here is the console:

>meta[6]
  <meta property="og:image" content="http://www. example.com/img/1.png">
>meta[6].property
  undefined
>meta[6].content
  "http://www. example.com/img/1.png"

How am I able to access the content but not the property field and how can I get the property?

Maybe more context can help. Is this an XML document? How are you getting the array? — sdleihssirhc, May 24 '11 at 03:31
expand your code, how did you get the meta tag, did you try to get it using getElementByTagName()? you know only the default properties work easily — Ibu, May 24 '11 at 03:33

score 4 · Answer 1 · answered May 24 '11 at 05:12

To answer the question:

"How am I able to access the content but not the property field"

content is a standard attribute of the HTML meta element, so browsers will create an equivalent DOM property for the related DOM meta element.

property is not a standard attribute for the HTML meta element, so some browsers will not create a similar property (e.g. Firefox), while other browsers (e.g. IE) will. Therefore getAttribute should be used for any non-standard attribute value, but direct DOM property access should be used for the values of standard attributes.

As a general rule, you should not use non-standard attributes on HTML elements, then you can always access values using DOM properties (which is the most appropriate method for HTML DOM elements).

Note that the HTML5 meta element is the same as the HTML 4.01 element linked to above, however the HTML 4 spec is probably the better one to use on the general web for the time being. HTML5-specific code should really only be used when targetting the HTML5 features of a particular browser.

John Drefahl · Answer 2 · 2011-10-20T00:57:18.270

Here is a complete working example..

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"  lang="en" xml:lang="en">
<head>
<title>Cross-Window HTML</title>
<meta property="og:title" content="Share Title" />
<meta property="og:description" content="Share Page Description" />
<meta property="og:image" content="Path to Share Image" />
<link rel="canonical" href="http://127.0.0.1/newWindowWrite.html" />
<script type="text/javascript">

function GetMetaValue(meta_name) {

    var my_arr = document.getElementsByTagName("meta");
    for (var counter = 0; counter < my_arr.length; counter++) {
        console.log(my_arr[counter].getAttribute('property'));

        if (my_arr[counter].getAttribute('property') == meta_name) {
            return my_arr[counter].content;
        }
    }
    return "N/A";

}


function newHTML() {
    HTMLstring = '<html>\n';
    HTMLstring += '<head>\n';
    HTMLstring += '<title>Google +1</title>\n';
    HTMLstring += '<meta property="og:title" content="' + GetMetaValue('og:title') + '"/>\n';
    HTMLstring += '<meta property="og:description" content="' +  GetMetaValue('og:description') + '"/>\n';
    HTMLstring += '<meta property="og:image" content="' + GetMetaValue('og:image') + '"/>\n';
    HTMLstring += '<link rel="canonical" href="' + location.href + '"/>\n';
    HTMLstring += '</head>\n';
    HTMLstring += '<body>\n';
    HTMLstring += '<div id="shareContent">\n';
    HTMLstring += '</div>\n';
    HTMLstring += '</body>\n';
    HTMLstring += '</html>';
    console.log(HTMLstring);
    newwindow = window.open();
    newdocument = newwindow.document;
    newdocument.write(HTMLstring);
    newdocument.close();
}
</script>
</head>
<body>
<div onclick="newHTML();">Spawn Sharing Window</div>
</body>
</html>

It fixes the problem, but it's way too long and doesn't explain the root cause. Especially considering the existing answers already mentioned what your code is doing — Ruan Mendes, Oct 20 '11 at 00:00
Hey no worries I just thought it would help to show a fully working piece of code that someone can work with and see how its working through the console. None the less, I needed to take out the Google +1 integration because it didn't work. This is pretty straight forward now.. sorry to confuse. — John Drefahl, Oct 20 '11 at 00:59

score 2 · Accepted Answer · answered May 24 '11 at 03:33

2

you want the getAttribute function:

>meta[6].getAttribute('property');
   "og:image"

answered May 24 '11 at 03:33

pthurlow

1,091
7
11

1

Achieves desired result but doesn't answer the question. – RobG May 24 '11 at 05:15
RobG's answer gives you the correct explanation. Attributes that are defined by the spec within the element are copied to properties on the DOM element. So you can access those with `meta.content` access. In your case `property` is not a standard. This is why jQuery now has both a $.attr() and a $.prop . See http://stackoverflow.com/questions/5874652/prop-vs-attr – Ruan Mendes Oct 19 '11 at 23:58

Handling meta data with Javascript

3 Answers3