Skip to content
Related Articles

Related Articles

Improve Article

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

  • Last Updated : 28 Jan, 2020
Geek Week

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:






<!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>

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:




<!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>

Output:

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it’s lowest price ever!




My Personal Notes arrow_drop_up
Recommended Articles
Page :