Site icon StackBlogger

Extract Metadata Information From URL | TypeScript

StackBlogger
extract-metadata-from-url-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.

1
2
3
 
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…

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
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

If you want to extract metadata information from a website using the callback method then go with the following code…

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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

If you want to extract metadata information from a website using the callback method then go with the following code…

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
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…

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
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

Related Posts: