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

28 Jan, 2020
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:
HTML-DOM
HTML5
JavaScript-Misc
Picked
Technical Scripter 2019
HTML
JavaScript
Technical Scripter
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to update Node.js and NPM to next version ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
REST API (Introduction)
Hide or show elements in HTML using display property
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
Remove elements from a JavaScript Array
Hide or show elements in HTML using display property
Difference Between PUT and PATCH Request