Skip to main content

How to Get the Content of a Meta Tag using JavaScript

Reading the content of <meta> tags is a common task in web scraping, building SEO tools, or creating social media previews. The content of these tags can be easily accessed by first selecting the element and then reading its properties. The modern and most powerful way to select these elements is with CSS attribute selectors.

This guide will teach you how to use querySelector to get a specific meta tag by its name or property attribute, and how to use querySelectorAll to get a collection of all meta tags on a page.

The Core Method: querySelector with Attribute Selectors​

The document.querySelector() method is the definitive tool for finding a specific element in the DOM. It works with any valid CSS selector, including attribute selectors ([...]), which are perfect for finding a meta tag based on its unique attributes.

HTML for Examples:

<head>
  <meta name="description" content="This is an example meta description.">
  <meta name="keywords" content="javascript, meta, seo">
  <meta property="og:title" content="My Awesome Page Title">
</head>

How to Get a Specific Meta Tag (by name or property)​

To find a single meta tag, you provide querySelector with a selector that matches the attribute you're looking for.

For example, you want to get the content of the description meta tag and the og:title meta tag.

This is the recommended best practice for its precision and readability.

// --- Get a meta tag by its 'name' attribute ---
const metaDescription = document.querySelector('meta[name="description"]');

if (metaDescription) {
  console.log(metaDescription.content);
  // Output: "This is an example meta description."
}

// --- Get a meta tag by its 'property' attribute (for Open Graph, etc.) ---
const ogTitle = document.querySelector('meta[property="og:title"]');

if (ogTitle) {
  console.log(ogTitle.content);
  // Output: "My Awesome Page Title"
}

How it works:

  • The selector meta[name="description"] tells the browser to find a <meta> tag that has a name attribute with the exact value "description".
  • Once you have the element, the .content property gives you direct access to the value of its content attribute.

How to Get All Meta Tags in the Document​

If you need to read all meta tags on a page, you can use document.querySelectorAll('meta'). This method returns a NodeList containing all <meta> elements in the document, which you can then iterate over.

Solution:

// Get a NodeList of all <meta> elements in the document
const allMetaTags = document.querySelectorAll('meta');

// Use .forEach() to loop through them
allMetaTags.forEach(tag => {
  // Check which attribute is used (name or property) and log its content
  if (tag.name) {
    console.log(`Name: ${tag.name}, Content: ${tag.content}`);
  } else if (tag.getAttribute('property')) { // .property is not a direct DOM property
    console.log(`Property: ${tag.getAttribute('property')}, Content: ${tag.content}`);
  }
});
/* Output:
   Name: description, Content: This is an example meta description.
   Name: keywords, Content: javascript, meta, seo
   Property: og:title, Content: My Awesome Page Title
*/

Practical Example: A Reusable getMetaContent Function​

For cleaner code, you can encapsulate this logic into a reusable helper function that can find any meta tag by its attribute.

/**
 * Gets the content of a meta tag by its attribute and value.
 * @param {string} attrName - The name of the attribute (e.g., 'name', 'property').
 * @param {string} attrValue - The value of the attribute.
 * @returns {string|null} The content of the meta tag, or null if not found.
 */
function getMetaContent(attrName, attrValue) {
  const element = document.querySelector(`meta[${attrName}="${attrValue}"]`);
  return element ? element.content : null;
}

// Example Usage:
const description = getMetaContent('name', 'description');
console.log('Description:', description);

const ogTitle = getMetaContent('property', 'og:title');
console.log('OG Title:', ogTitle);

Conclusion​

Accessing the content of meta tags in JavaScript is a simple task with modern DOM APIs.

  • To get a single, specific meta tag, the recommended best practice is to use document.querySelector() with an attribute selector (e.g., meta[name="description"]).
  • To get all meta tags on a page, use document.querySelectorAll('meta') and loop through the results.
  • Once you have the element, use the .content property to read its content.

By using these methods, you can reliably read any metadata your application needs from the DOM.

Table of Contents