Extract Metadata Information From URL | JavaScript

The original article is published at my blog here- Extract metadata information from URL using TypeScript/JavaScript.

Metadata of a website holds the information about its search engine-related properties like title, description, site-name, site-color, and many other open-graph properties. If you are building a SEO service-related application then reading metadata properties of websites might be a required point for you. The article provides a very easy-to-use package that you can use in TypeScript/JavaScript project to extract metadata information from an URL.

Extract Metadata Information from URL

Extract metadata information from any http/https url.

Install link-meta-extractor package

Run the command to install the package in your existing TypeScript/JavaScript application. You can find the complete package here. Check the complete source code of the package here.

npm install link-meta-extractor

TypeScript Usage

Work with async/await

If you want to extract metadata information from a website using async/await then go with the following code…

import { extractMetadata } from 'link-meta-extractor';

async function extractMeta() {
  const url = 'https://stackblogger.com';
  const metaInformation = await extractMetadata(url);

  console.log(metaInformation);
}

extractMeta();

/*
    {
        title: 'StackBlogger - A blog by programmer for programmers',
        description: 'StackBlogger provide programming Tutorials, Tips, Tricks and HowTo Guides.',
        banner: 'https://stackblogger.com/wp-content/uploads/2021/10/Untitled-7-1.png',
        isItWordpress: true,
        wordpressVersion: 'WordPress 5.8.1'
    }
*/

Work with promise/callback

Extract metadata information from a website using the callback method then go with the following code…

import { extractMetadata } from 'link-meta-extractor';

function extractMeta() {
  const url = 'https://stackblogger.com';
  extractMetadata(url).then((metaInformation) => {
    console.log(metaInformation);
  });
}

extractMeta();

/*
    {
        title: 'StackBlogger - A blog by programmer for programmers',
        description: 'StackBlogger provide programming Tutorials, Tips, Tricks and HowTo Guides.',
        banner: 'https://stackblogger.com/wp-content/uploads/2021/10/Untitled-7-1.png',
        isItWordpress: true,
        wordpressVersion: 'WordPress 5.8.1'
    }
*/

JavaScript Usage

Use the following code to extract metadata information from an url in JavaScript code

Work with async/await

Extract metadata information from a website using async/await then go with the following code…

const metaExtractor = require('link-meta-extractor');

async function extractMeta() {
  const url = 'https://stackblogger.com';
  const metaInformation = await metaExtractor.extractMetadata(url);
  console.log(metaInformation);
}

extractMeta();

/*
    {
        title: 'StackBlogger - A blog by programmer for programmers',
        description: 'StackBlogger provide programming Tutorials, Tips, Tricks and HowTo Guides.',
        banner: 'https://stackblogger.com/wp-content/uploads/2021/10/Untitled-7-1.png',
        isItWordpress: true,
        wordpressVersion: 'WordPress 5.8.1'
    }
*/

Work with promise/callback

Extract metadata information from a website using the callback method then go with the following code…

const metaExtractor = require('link-meta-extractor');

function extractMeta() {
  const url = 'https://stackblogger.com';
  metaExtractor.extractMetadata(url).then((metaInformation) => {
    console.log(metaInformation);
  });
}

extractMeta();

/*
    {
        title: 'StackBlogger - A blog by programmer for programmers',
        description: 'StackBlogger provide programming Tutorials, Tips, Tricks and HowTo Guides.',
        banner: 'https://stackblogger.com/wp-content/uploads/2021/10/Untitled-7-1.png',
        isItWordpress: true,
        wordpressVersion: 'WordPress 5.8.1'
    }
*/

Additional Metadata Fields Extraction

The plugin accepts additional fields as optional arguments that you can use to extract from a website.

Pass the meta field keys in string format as a rest parameter in the function. Refer to the code here…

import { extractMetadata } from 'link-meta-extractor';

async function extractMeta() {
  const url = 'https://stackblogger.com';
  const metaInformation = await extractMetadata(
    url,
    'og:site_name', // additional field
    'og:image', // additional field
    'robots' // additional field
  );

  console.log(metaInformation);
}

extractMeta();

/* 
    {
        title: 'StackBlogger - A blog by programmer for programmers',
        description: 'StackBlogger provide programming Tutorials, Tips, Tricks and HowTo Guides.',
        banner: 'https://stackblogger.com/wp-content/uploads/2021/10/Untitled-7-1.png',
        isItWordpress: true,
        wordpressVersion: 'WordPress 5.8.1',
        additional: {
            siteName: 'StackBlogger',
            image: 'https://stackblogger.com/wp-content/uploads/2021/10/Untitled-7-1.png',
            robots: 'index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1'
        }
    }
*/

Final Say

Extract metadata information in just one line of code with a simple plugin
Checkout my other exciting JavaScript related articles here.