How to get the information from a meta tag using JavaScript?

To display meta tag information in HTML with JavaScript, we will use a method called getElementByTagName() function.

Method 1: Using getElementsByTagName() method.

Syntax:



document.getElementsByTagName("meta");

With this, we can get all the meta elements from an HTML file. As we click on the button, all the meta tag names and content will be displayed on the web page.

Example 1:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <meta name="description" 
          content="GeeksforGeeks Article">
    <meta name="keywords" 
          content="GeeksforGeeks,GfG,Article">
    <meta name="author" 
          content="Aakash Pawar">
    <title>GfG</title>
    <style>
        body {
            font-size: 20px;
            margin: 20px;
        }
          
        button {
            font-size: 18px;
        }
    </style>
</head>
  
<body>
    <button onclick="GfGFunction()">
      Click Here!
  </button>
  <br>
    <div id="demo">
        <h2>Content of Meta Tag<h2></div>
    <script>
        function GfGFunction() {
          var meta = document.getElementsByTagName("meta");
          for (var i = 0; i < 3; i++) {
            document.getElementById("demo").innerHTML +=
              "name: <b>"+meta[i].name+"</b> and content: <b>"
            +meta[i].content+"</b><br>";
          }
        }
    </script>
</body>
</html>

chevron_right


Output:

Method 2: Using getElementsByTagName() method with index specification.

Syntax:

var meta = document.getElementsByTagName("meta")[0];

Here, the index number ‘0’ represents the first meta element. You can consider all the meta element in an HTML file as an array and can access them by specifying the index of the meta tag. This way, we can get specific meta elements from an HTML file.

Example 2:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <meta id="author" 
          name="description" 
          content="GeeksforGeeks Article">
    <meta id="author" 
          name="keywords" 
          content="GeeksforGeeks,GfG,Article">
    <meta id="author" 
          name="author" 
          content="Aakash Pawar">
    <title>Meta Tag</title>
    <style>
        body {
            font-size: 20px;
            margin: 20px;
        }
          
        button {
            font-size: 18px;
        }
          
        h1 {
            color: green;
        }
    </style>
</head>
  
<body>
    <h1>GeeksforGeeks</h1>
    <button onclick="GfGFunction()">Click Here!</button>
    <br>
    <div id="demo">
        <h2>Content of Meta Tag<h2></div>
    <script>
        function GfGFunction() {
          var meta = document.getElementsByTagName("meta")[0];
          document.getElementById("demo").innerHTML +=  
            "name: <b>"+meta.name+"</b> and content: <b>"
          +meta.content+"</b><br>";
        }
    </script>
</body>
</html>

chevron_right


Output:

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.