How to Get the information from a meta tag using JavaScript

# Table of Contents

# How to Get the information from a meta tag using JavaScript

Use the document.querySelector() method to get the information from a meta tag.

Once you select the meta tag, you can access its attributes using dot notation or the getAttribute() method.

Here is the HTML for the example.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />

    <meta name="title" content="Example meta title" />

    <meta
      name="description"
      content="Example meta description"
    />

    <meta property="og:title" content="The Rock" />

    <meta
      property="video"
      content="https://youtu.be/HZ8uXq5VG2wk"
    />
  </head>

  <body>
    <h2>bobbyhadz.com</h2>

    <script src="index.js"></script>
  </body>
</html>

The code for this article is available on GitHub

And here is the related JavaScript code.

index.js

Copied!
const metaTitle = document.querySelector('meta[name="title"]');

// 👇️ <meta name="title" content="Example meta title">
console.log(metaTitle);

// 👇️ Example meta title
console.log(metaTitle.content);

// 👇️ title
console.log(metaTitle.name);

// 👇️ Example meta title
console.log(metaTitle.getAttribute('content'));

get data from meta tag using javascript

The code for this article is available on GitHub

We used the document.querySelector() method to select the meta element that has a name attribute of title.

index.js

Copied!
const metaTitle = document.querySelector('meta[name="title"]');

Notice that we alternate between single and double quotes so that the string selector is not closed prematurely.

The query selected the following element.

index.html

Copied!
<meta name="title" content="Example meta title" />

We can access the attributes of the meta element using dot notation or the getAttribute() method.

index.js

Copied!
// 👇️ <meta name="title" content="Example meta title">
console.log(metaTitle);

// 👇️ Example meta title
console.log(metaTitle.content);

// 👇️ title
console.log(metaTitle.name);

// 👇️ Example meta title
console.log(metaTitle.getAttribute('content'));

The code for this article is available on GitHub

The same approach can be used to access the meta tag that has its name attribute set to description.

index.js

Copied!
const metaDescription = document.querySelector(
  'meta[name="description"]',
);

// 👇️ <meta name="description" content="Example meta description">
console.log(metaDescription);

// 👇️ Example meta description
console.log(metaDescription.content);

// 👇️ description
console.log(metaDescription.name);

// 👇️ Example meta description
console.log(metaDescription.getAttribute('content'));

You can also create a reusable function that takes the name of the attribute and its value and returns the corresponding meta element.

index.js

Copied!
const metaDescription = getMetaElement('name', 'description');

// 👇️ <meta name="description" content="Example meta description">
console.log(metaDescription);

// 👇️ Example meta description
console.log(metaDescription.content);

// 👇️ description
console.log(metaDescription.name);

// 👇️ Example meta description
console.log(metaDescription.getAttribute('content'));

function getMetaElement(attribute, value) {
  return document.querySelector(`meta[${attribute}="${value}"]`);
}

The code for this article is available on GitHub

The getMetaElement function takes the name and value of the attribute and returns the matching meta element.

# Getting data from meta OG (Open Graph) tags

You can also use this approach to get data from meta OG (Open Graph) tags.

Suppose we have the following HTML.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />

    <meta property="og:title" content="The Rock" />

    <meta name="title" content="Example meta title" />

    <meta
      name="description"
      content="Example meta description"
    />

    <meta
      property="video"
      content="https://youtu.be/HZ8uXq5VG2wk"
    />
  </head>

  <body>
    <h2>bobbyhadz.com</h2>

    <script src="index.js"></script>
  </body>
</html>

The code for this article is available on GitHub

We want to select the following OG meta tag.

index.html

Copied!
<meta name="title" content="Example meta title" />

Here is the related JavaScript.

index.js

Copied!
const metaOgTitle = getMetaElement('property', 'og:title');

// 👇️  <meta property="og:title" content="The Rock" />
console.log(metaOgTitle);

// 👇️ The Rock
console.log(metaOgTitle.content);

// 👇️ The Rock
console.log(metaOgTitle.getAttribute('content'));

function getMetaElement(attribute, value) {
  return document.querySelector(`meta[${attribute}="${value}"]`);
}

get data from meta og tag

The code for this article is available on GitHub

Notice that the value of the attribute (og:title) is placed in quotes.

index.js

Copied!
function getMetaElement(attribute, value) {
  return document.querySelector(`meta[${attribute}="${value}"]`);
}

Here is the equivalent example without using a reusable helper function.

index.js

Copied!
const metaOgTitle = document.querySelector(
  'meta[property="og:title"]',
);

// 👇️  <meta property="og:title" content="The Rock" />
console.log(metaOgTitle);

// 👇️ The Rock
console.log(metaOgTitle.content);

// 👇️ The Rock
console.log(metaOgTitle.getAttribute('content'));

# Accessing data from all `meta` tags in the document

If you need to access data from all meta tags in the document:

Use the document.getElementsByTagName() method to select the meta tags.
Use a for...of loop to iterate over the collection of meta tags.
Access the name and content attributes of each meta tag.

Here is the HTML for the example.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />

    <meta name="title" content="Example meta title" />

    <meta
      name="description"
      content="Example meta description"
    />

    <meta
      property="video"
      content="https://youtu.be/HZ8uXq5VG2wk"
    />

    <meta property="og:title" content="The Rock" />
  </head>

  <body>
    <h2>bobbyhadz.com</h2>

    <script src="index.js"></script>
  </body>
</html>

The code for this article is available on GitHub

And here is the related JavaScript code.

index.js

Copied!
const metaTags = document.getElementsByTagName('meta');

for (const metaTag of metaTags) {
  console.log(metaTag.name, metaTag.content);
}

get data from all meta tags in the document

The code for this article is available on GitHub

We used a for...of loop to iterate over the collection of meta tags.

The for...of statement is used to loop over iterable objects like arrays, strings, Map, Set and NodeList objects and generators.

On each iteration, we access the name and content attributes of the meta tag.

Note that the attributes will be set to an empty string if they aren't set on the meta element.

You can use an if statement if you need to filter for specific meta elements based on their attributes.

index.js

Copied!
const metaTags = document.getElementsByTagName('meta');

for (const metaTag of metaTags) {
  if (metaTag.name === 'description') {
    console.log(metaTag.name, metaTag.content);
  }
}

The only meta element that meets the condition is the one that has its name attribute set to description.

You can also use the getAttribute() method to access the attributes of the meta element.

index.js

Copied!
const metaTags = document.getElementsByTagName('meta');

for (const metaTag of metaTags) {
  if (metaTag.getAttribute('name') === 'description') {
    // 👇️ description, Example meta description
    console.log(
      metaTag.getAttribute('name'),
      metaTag.getAttribute('content'),
    );
  }
}

The only parameter the getAttribute() method takes is the name of the attribute whose value to retrieve.

You can also access the meta tags using their index in the collection.

Suppose, we have the following head tag.

index.html

Copied!
<head>
  <meta charset="UTF-8" />

  <meta name="title" content="Example meta title" />

  <meta
    name="description"
    content="Example meta description"
  />

  <meta
    property="video"
    content="https://youtu.be/HZ8uXq5VG2wk"
  />

  <meta property="og:title" content="The Rock" />
</head>

The code for this article is available on GitHub

Here is an example of accessing the meta tags by their index in the collection.

index.js

Copied!
const metaTags = document.getElementsByTagName('meta');

// 👇️ Example meta title
console.log(metaTags[1].content);

// 👇️ Example meta description
console.log(metaTags[2].content);

Here is an equivalent example that uses the getAttribute() method.

index.js

Copied!
const metaTags = document.getElementsByTagName('meta');

// 👇️ Example meta title
console.log(metaTags[1].getAttribute('content'));

// 👇️ Example meta description
console.log(metaTags[2].getAttribute('content'));

The code for this article is available on GitHub

JavaScript indexes are zero-based, so the first element in a collection has an index of 0.

We didn't use index 0 to skip the following meta tag.

index.html

Copied!
<meta charset="UTF-8" />

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

You can use the search field on my Home Page to filter through all of my articles.

How to Get the information from a meta tag using JavaScript

# Table of Contents