How to Extract Meta Tag Information Using JavaScript

Extracting meta tag information using JavaScript is straightforward and involves querying the DOM for <meta> tags and then retrieving their content or attributes. Here’s a step-by-step guide to achieve this:

1. Accessing Meta Tags#

You can use the document.querySelector or document.getElementsByTagName methods to select meta tags. For example:

Using `document.querySelector`#

// Retrieve a specific meta tag by its name attribute
const metaDescription = document.querySelector('meta[name="description"]');
if (metaDescription) {
    console.log(metaDescription.getAttribute("content")); // Outputs the content of the meta tag
}

// Retrieve a specific meta tag by its property attribute
const metaOgTitle = document.querySelector('meta[property="og:title"]');
if (metaOgTitle) {
    console.log(metaOgTitle.getAttribute("content")); // Outputs the content of the meta tag
}

Using `document.getElementsByTagName`#

// Retrieve all meta tags
const metaTags = document.getElementsByTagName("meta");
for (let i = 0; i < metaTags.length; i++) {
    let metaTag = metaTags[i];
    console.log(
        metaTag.getAttribute("name") + ": " + metaTag.getAttribute("content")
    );
}

2. Extracting Specific Meta Tag Information#

If you know the specific meta tag you are interested in, you can directly query for it by its attribute. For example:

// Example to get the content of meta tag with name="keywords"
const keywordsMetaTag = document.querySelector('meta[name="keywords"]');
if (keywordsMetaTag) {
    console.log(keywordsMetaTag.getAttribute("content")); // Outputs the keywords
}

// Example to get the content of meta tag with property="og:image"
const ogImageMetaTag = document.querySelector('meta[property="og:image"]');
if (ogImageMetaTag) {
    console.log(ogImageMetaTag.getAttribute("content")); // Outputs the URL of the image
}

3. Handling Cases When Meta Tags Are Not Present#

Always check if the meta tag exists before trying to access its attributes to avoid errors:

const metaTag = document.querySelector('meta[name="author"]');
if (metaTag) {
    console.log(metaTag.getAttribute("content"));
} else {
    console.log("Meta tag not found.");
}

Summary#

Use document.querySelector for specific meta tags based on name or property attributes.
Use document.getElementsByTagName to iterate over all meta tags.
Always check if the meta tag exists before trying to access its attributes.

This approach allows you to dynamically extract and work with meta tag information on your webpage using JavaScript.